Components · Data display
Separator
BetaDivides content.
- Source
components/ui/separator.tsx - shadcn/ui Separator
- Figma: not linked yet (Q13)
When to use
- To divide groups of content that sit together without their own container: a client's name from the links under it, or groups of buttons in a toolbar.
- Vertically, between groups of controls in a toolbar or between short items in a row: "Program | Check-ins | Payments".
When not to use
- Between every item in a list: use spacing, or the row borders of a Table.
- Around a block of content: use a Card.
- As the only sign that two sections differ: give each section a heading.
- Inside an Accordion, dropdown menu or command palette: they have their own dividers (
DropdownMenuSeparator,CommandSeparator).
Anatomy
Upper body A
- 1. Horizontal: 1px high, full width of its container
- 2. Vertical: 1px wide, full height of its container; give the container a height
Variants
Coach notes, week 2
Squat depth is good. Keep the rest at 2 minutes.
Coach notes, week 3
Add 2.5 kg to the bench press if all sets felt easy.
| Variant | Use for |
|---|---|
Decorative (default, decorative) | Most uses. Purely visual, hidden from screen readers. |
Semantic (decorative={false}) | A break between two sections that a screen reader user should also hear, when the sections have no headings to separate them: two weeks of coach notes. Rendered as role="separator". |
| Horizontal (default) | Between stacked groups. |
Vertical (orientation="vertical") | Between groups in a row, such as toolbar actions. The parent needs a height (h-5) or items-stretch; the separator fills it. |
States
Separator has no interactive states. It is always bg-border, 1px thick.
| State | What changes | Token |
|---|---|---|
| Default | 1px line | bg-border |
Usage guidelines
- Use the fewest separators that make the groups clear. Spacing alone often does it.
- In toolbars, separate groups of related actions (undo and redo; add actions; preview), not every button.
- Add space around a separator with margin on the separator (
my-4,mx-1), so it sits evenly between groups.
Sara Al-Harbi
Strength block, week 3 of 12
Next check-in: Thursday
Sara Al-Harbi
Strength block
Week 3 of 12
Next check-in: Thursday
Content guidelines
Separators have no text. Don't put "or" or other words in the middle of a line to imitate a separator; write the choice as text, or use separate sections with headings.
Accessibility
| Key | Does |
|---|---|
| — | Nothing. A separator is never focusable |
- Decorative separators are
role="none", so screen readers skip them. That is right for almost every use. - A semantic separator is
role="separator"witharia-orientationwhen vertical. Screen readers announce "separator" between the two sections, and some list it in their navigation. bg-borderon the background is a low-contrast line by design. It is decoration, so it doesn't need 3:1; nothing that the user needs to understand should depend on seeing it.- In a toolbar, the separator isn't a stop in the tab order, and the buttons on each side keep their own labels.
RTL
Nothing to mirror: a separator is a line. Vertical separators sit between the same groups, which follow the reading order. Margins should be logical (ms-*, me-*) when they differ on each side.
Tokens used
Read from components/ui/separator.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.
| Token | Utilities | SuperCoach | Coach |
|---|---|---|---|
| --border | bg-border | neutral-200 | neutral-200 |
Props
<Separator>
Also takes every prop of Radix Separator.Root
No props of its own.
orientation ("horizontal" or "vertical") and decorative (true by default) come from Radix Separator.
Replaces in coach-admin
From the read-only audit of coach-admin: 18 style values, 24 uses.
coach-admin draws dividers with .divider, .separator and hr, each with its own color, width and margin. All of them become Separator with spacing from the scale.
Classes and selectors
.divider13.separator5hr4.navbar-divider1hr.transparent1