Separator
A hairline between sections of a card, menu or toolbar.
Examples
Horizontal
Inside a card, separate sections with a hairline instead of nesting cards.
Light
Transport
Authentication
Dark
Transport
Authentication
<Stack gap="3">
<Text size="sm">Transport</Text>
<Separator />
<Text size="sm">Authentication</Text>
</Stack>Vertical
Between groups in a toolbar. The parent must be a flex row so the line can stretch.
<Inline gap="2" align="stretch">
<IconButton icon="refresh" label="Refresh" />
<IconButton icon="copy" label="Copy URL" />
<Separator orientation="vertical" decorative />
<IconButton icon="trash" label="Delete server" variant="danger-ghost" />
</Inline>Usage
import { Separator } from '@switchboard/ui'
<Separator />Props
Every component also takes mix, for css() and mixins applied after its own style.
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Vertical is 1px wide and stretches to the row height. |
| decorative | boolean | – | role="presentation" instead of role="separator", hiding it from assistive tech. |
| mix | Mix | – | Extra css() or mixins. |
Also accepts every <hr> attribute.
Accessibility
- Renders an <hr> with role="separator" and aria-orientation, so screen readers announce the break.
- Set decorative when the line only tidies the layout and the sections already have headings.
Guidance
Do
- Use one hairline between sections of the same card.
- Mark toolbar dividers decorative.
Don’t
- Put a separator under a heading that already starts a section.
- Rule off every row of a list.