Divider
Preview appears after the next Storybook update.
<Divider />When to use
Use it for
- Between groups that belong to the same surface but differ in kind: settings sections, toolbar groups.
- Labelled, to name what follows ("Older changes") or to offer an alternative ("Or").
Not for
- Between every list item: use spacing, or row borders in a Table.
- To separate sections that have headings: the heading and space already do it.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Vertical dividers between toolbar groups
They group related controls without adding boxes.
Stacked dividers and borders
A divider next to a card edge doubles the line. Pick one.
Accessibility
- Base UI Separator: role separator with aria-orientation, announced as a boundary.
- The labelled variant renders two separators around plain text, so the label is read once in order.
- The line uses border.default (decorative); never rely on it to convey meaning.
Content guidelines
- Labels are one to three words in sentence case.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Divider/Divider.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Line
.divider - Horizontal
.horizontal - Vertical
.vertical - Horizontal
.horizontal.spacing-sm - Horizontal
.horizontal.spacing-md - Vertical
.vertical.spacing-sm - Vertical
.vertical.spacing-md - Labelled container
.labelled - Labelled container
.labelled.spacing-sm - Labelled container
.labelled.spacing-md - Line segment
.line - Label
.label
Motion and interaction
Divider does not animate: its states change at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Divider/Divider.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | No description in the code yet. |
label | ReactNode | none | Short text centered on a horizontal line, like "Or" or "Older changes". |
spacing | 'none' | 'sm' | 'md' | 'md' | Space around the line: `none`, `sm` (8px) or `md` (16px). Default `md`. |
Playground
Change the props and see the real Divider update. Controls are generated from the TypeScript props; nothing here changes the system.
<Divider label="Older changes" />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Divider in Storybook).
Embed Storybook stories here (3)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Horizontal
Labelled
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Data display: Card restyled as a flat plate with an
interactiveoption and padding sizes; Badge gainsappearance(subtle, now the default, or solid), a dot, icons and sizes (existing solid badges must passappearance="solid"to keep their look); new Avatar and AvatarGroup, Table (sortable headers with aria-sort, selectable rows, sticky header, focusable scroll region, useTableSort), Accordion, Tag (removable, toggleable), Divider and Kbdv1.0.0, Nov 11, 2026
- Fix
Quality: an adoption row's hover fills the whole row up to the divider
v1.0.0, Nov 11, 2026