Separator
Visual or semantic divider between content
Category: display · WCAG 2.2-AA · divider, rule, layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | horizontal | Layout orientation of the component. |
decorative | boolean | false | When true, the separator is purely visual and hidden from assistive tech |
Design tokens
--cascivo-color-border
When to use
- Dividing groups of content within a section or menu
- Adding a vertical rule between inline items (orientation="vertical")
- Marking a meaningful thematic break (decorative=false)
When not to use
- Adding spacing only — use margin/padding, not a separator
- Bordering a container — use the container border, not a separator
How to build an accessible Separator in React →
Examples
Horizontal
<Separator />Vertical
<Separator orientation="vertical" />Related components
- Card — Often used to divide regions inside a Card