Separator
Horizontal or vertical divider.
Installation
npx axiom add separatorpnpm dlx axiom add separatoryarn dlx axiom add separatorbun x axiom add separatorNo logic and no tokens: the line reads border.default or border.subtle.
Usage
import { Separator } from '@/components/ui/separator';
<Separator />
<Separator orientation="vertical" />
<Separator label="or" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | A horizontal separator fills the width; a vertical one stretches to the height of its row. |
variant | 'default' | 'subtle' | 'default' | border.default between blocks, border.subtle inside a surface such as a card. |
thickness | number | hairline | Line thickness. Defaults to the hairline metric (1pt), which reads as one physical pixel on dense screens. |
inset | SpacingToken | { start?: SpacingToken; end?: SpacingToken } | — | Space left empty at the start and end of the line, to align it with content instead of the screen edge. |
spacing | SpacingToken | 0 | Margin on both sides of the line, along the cross axis. |
label | ReactNode | — | Text centered in a horizontal separator, with a line on each side. |
decorative | boolean | true | Hides the separator from screen readers. Set to false when it marks a meaningful boundary. |
style | StyleProp<ViewStyle> | — | Extra styles for the line. |
No logic: a single file per styling variant.
Use cases
Inset dividers in a list
The line starts after the leading icon, the iOS way: rows read as a group, icons as a column.
<FlatList
data={files}
renderItem={renderFile}
ItemSeparatorComponent={() => <Separator inset={{ start: 14 }} />}
/>Stats side by side
Vertical separators between values in a row.
<View style={{ flexDirection: "row" }}>
<Stat label="Distance" value="5.2 km" />
<Separator orientation="vertical" variant="subtle" />
<Stat label="Time" value="28:14" />
</View>Alternative sign-in methods
label splits two ways of doing the same thing.
<Separator label="or" spacing={4} />