Divider
StableA hairline that separates groups of content, horizontally or vertically, with an optional short label.
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.
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
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
Changelog
- New
Data display: Card restyled as a flat plate with an `interactive` option and padding sizes; Badge gains `appearance` (subtle, now the default, or solid), a dot, icons and sizes (existing solid badges must pass `appearance="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 Kbd. Adds avatar, tag, kbd, divider and accordion component tokens.
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026