Separator

Primitives

Horizontal and vertical divider line with optional centered label, dashed style, configurable thickness, color, and spacing. Accessibility-aware (decorative by default).

GitHub

Installation

bash

npx native-mate add separator

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Separator } from '~/components/ui/separator'

// Default horizontal
<Separator />

// With label
<Separator label="or" />
<Separator label="continue with" />

// Dashed
<Separator dashed />
<Separator dashed label="or" />

// Custom thickness & color
<Separator thickness={2} color="#6366f1" />

// Vertical (inside a row)
<View style={{ flexDirection: 'row', height: 40 }}>
  <Button variant="ghost">Cut</Button>
  <Separator orientation="vertical" spacing={4} />
  <Button variant="ghost">Copy</Button>
  <Separator orientation="vertical" spacing={4} />
  <Button variant="ghost">Paste</Button>
</View>

// Custom spacing
<Separator spacing={16} label="section" />

Props

Prop	Type	Default	Description
orientation	"horizontal"\|"vertical"	"horizontal"	Direction of the divider.
thickness	number	StyleSheet.hairlineWidth	Line width/height in dp.
color	string	—	Line color. Defaults to theme.colors.border.
spacing	number	8	Margin on both sides (vertical for horizontal, horizontal for vertical).
label	string	—	Optional text centered in the line, e.g. "or".
labelColor	string	—	Label text color. Defaults to theme.colors.muted.
labelSize	number	11	Label font size.
labelWeight	TextStyle["fontWeight"]	"500"	Label font weight.
dashed	boolean	false	Renders the line as dashed instead of solid.
decorative	boolean	true	Hides from assistive technology when true.

Example

tsx

import { Separator } from '~/components/ui/separator'
import { View } from 'react-native'

export function SeparatorExamples() {
  return (
    <View style={{ padding: 16, gap: 0 }}>
      <Separator />
      <Separator label="or" />
      <Separator dashed />
      <Separator dashed label="or" />
      <Separator thickness={2} color="#6366f1" />
      <Separator spacing={16} />

      {/* Toolbar with vertical separators */}
      <View style={{ flexDirection: 'row', alignItems: 'center', height: 44 }}>
        <Button variant="ghost" size="sm">Cut</Button>
        <Separator orientation="vertical" />
        <Button variant="ghost" size="sm">Copy</Button>
        <Separator orientation="vertical" />
        <Button variant="ghost" size="sm">Paste</Button>
      </View>
    </View>
  )
}

Accessibility

Feature	Detail
Decorative	When decorative={true} (default) the separator is hidden from screen readers. Set decorative={false} when the separator has semantic meaning.
Role	When decorative={false}, accessibilityRole="separator" is applied automatically.

Spinner

Button