A content-free line marking a boundary between adjacent regions, with no spacing or interaction of its own. Table rows, menu groups, and breadcrumb separators keep their component-specific structure; they share Divider's border tokens, not its markup.
The semantic default is hr.ds-divider. Here the surrounding Stack supplies space.4 on both sides of the line — remove the Stack and the Divider adds no air.
Notifications
Product updates and account activity.
Security
Sign-in alerts and recovery changes.
Billing
Invoices, payment methods, and renewal notices.
Two native thematic breaks separate three settings regions. Every line is exactly border.thin; the one parent Stack, not either Divider, creates the repeated equal breathing room.
Vertical is a boundary between side-by-side regions. Its row establishes the height and Inline supplies the space around it; when the boundary is meaningful, role="separator" pairs with aria-orientation="vertical".
12
Open issues
4
In review
28
Closed
Two vertical lines stretch across the same three-metric row and carry no inline margin; the one parent Inline's space.4 gap stays the repeated spacing source.
Subtle is the default. Strong is a structural exception for a boundary that must stay visible beside dense content; it changes only the line role and compounds with either orientation.
| Example | Emphasis | Modifier | Role | Usage |
|---|---|---|---|---|
| Subtle | — | border.subtle | The default boundary between related regions | |
| Strong | --strong | border.strong | Major structural break beside dense content |
A Divider marks a boundary; it does not create the layout around it.
| Verdict | Rule |
|---|---|
| Do | Use hr.ds-divider for a meaningful horizontal thematic break; use role="separator" with aria-orientation="vertical" for a meaningful vertical boundary. |
| Do | Mark purely decorative Divider markup aria-hidden="true" so it creates no false boundary in the accessibility tree. |
| Do | Let Stack or Inline supply every surrounding gap; Divider always has zero margin. |
| Do | Let a vertical Divider stretch to a real flex or grid row whose content establishes its height. |
| Don’t | Render Divider elements inside Table, Menu, or Breadcrumbs — those components own their structural separators and only share the border tokens. |
| Don’t | Use --strong to compensate for cramped spacing or weak hierarchy; fix the composition first. |
| Don’t | Make a Divider draggable or focusable — that is a Splitter/ResizeHandle with a different interaction contract. |