Separator
Interactive documentation for the separator component. Change props in the playground, inspect orientations and sizes, and copy the generated example.
Preview
OR
Code
<Separator
label="OR"
/>Horizontal
Horizontal separators with and without labels.
With label
OR
OR
OR
Vertical
Vertical separators with and without labels.
Without label
With label
OR
OR
OR
Sizes
Comparison of all supported separator sizes.
size=s
OR
size=m
OR
size=l
OR
size=xl
OR
size=2xl
OR
size=3xl
OR
Props
This table matches the current Separator props interface.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | 'm' | Controls separator height for horizontal orientation and width for vertical orientation. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Defines separator direction and layout behavior. |
| label | string | boolean | false | Renders centered separator text. Boolean true uses the default "OR" label, string renders custom content. |