Separator
StableA hairline between groups of content: across a panel, or down a toolbar. Reach for it when space alone does not make the break clear enough.
Horizontal
The default. A 1px hairline across the full width of its container, in the faintest border colour. Space around it comes from the layout, not the line.
Vertical
orientation="vertical" draws a 1px line that stretches to the height of its row, so it needs a flex or grid row to stand in. Inset it with a margin so it stops short of the bar's edges.
Decorative or semantic
By default a separator is decorative: it is drawn but hidden from assistive tech, because the groups around it are usually clear from headings, lists or labels. Set decorative={false} when the line itself marks where one group ends, such as between groups of buttons in a toolbar. It is then announced as a separator, with its orientation when vertical. Both look the same: only what assistive tech hears changes.
Which to use
- Decorative (the default) when the line only tidies the layout: rows in a list, a total under its lines. It renders with
role="none". - Semantic when the line is structure a screen reader user needs: groups in a toolbar, sections of a list without headings. It renders with
role="separator", andaria-orientation="vertical"when vertical.
In both themes
Both orientations, light and dark side by side.
Guidelines
The kit groups with space and weight first, a hairline second, and a box last. A separator is the second step.
- Try space first. A larger gap often separates groups better than a line.
- Separate groups, not items: one line between groups, never one between each thing.
- Card footers and menus draw their own hairlines (menus have MenuSeparator). Do not add another beside them.
- Never stack a separator against a border: two lines read as a mistake.
Accessibility
- Decorative separators render
role="none", so screen readers skip them. - With
decorative={false}the separator is announced, and a vertical one says so witharia-orientation. It is not focusable: it marks structure and cannot be dragged. - The hairline is deliberately faint. Keep space around it too, so the break still shows for someone who cannot make out the line.
Props
Also accepts every native div attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Across the full width, or down the full height of its row. |
decorative | boolean | true | Hidden from assistive tech. Set false when it divides content into meaningful groups. |