Labeled Separator

Horizontal separator with a centered text label.

Installation#

npx @aniui/cli add labeled-separator

Web preview — components render natively on iOS & Android

import { LabeledSeparator } from "@/components/ui/labeled-separator";

export function MyScreen() {
  return (
    <View>
      <Text>Sign in with email</Text>
      <LabeledSeparator label="or" />
      <Button>Sign in with Google</Button>
    </View>
  );
}

Usage#

app/index.tsx

import { LabeledSeparator } from "@/components/ui/labeled-separator";

export function MyScreen() {
  return (
    <View>
      <Text>Sign in with email</Text>
      <LabeledSeparator label="or" />
      <Button>Sign in with Google</Button>
    </View>
  );
}

Props#

PropTypeDefault

label

string

-

className

string

-

labelClassName

string

-

Also accepts all View props.

Accessibility#

Decorative separator with centered label text.
The label text is readable by screen readers; the separator lines are decorative.

Source#

components/ui/labeled-separator.tsx

import React from "react";
import { View, Text } from "react-native";
import { cn } from "@/lib/utils";

export interface LabeledSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  label: string;
  labelClassName?: string;
}

export function LabeledSeparator({ label, className, labelClassName, ...props }: LabeledSeparatorProps) {
  return (
    <View className={cn("flex-row items-center gap-3 my-2", className)} {...props}>
      <View className="flex-1 h-px bg-border" />
      <Text className={cn("text-sm text-muted-foreground", labelClassName)}>{label}</Text>
      <View className="flex-1 h-px bg-border" />
    </View>
  );
}

Previous← Label NextList →