Divider

Usage

Use a divider to separate groups that spacing alone can't separate: the totals row of a parts list, two groups of toolbar actions, alternative sign-in methods. Prefer whitespace first — every line adds visual noise to dense dispatcher screens.

• Horizontal — <hr> for a thematic break in content (it is announced as a separator).
• Vertical — between inline groups (toolbar sections, metadata items).
• With label — a short word that explains the break ("or", "Earlier"). One or two words, sentence case.

Anatomy

1. Line — 1px --color-border-default (.divider--strong for 3:1)
2. Label (optional) — centered text between two lines, .divider-label

Examples

<hr class="divider">

<span class="divider divider--vertical" role="separator" aria-orientation="vertical"></span>

<!-- Labelled: the text is read as normal text, the lines are decoration -->
<div class="divider-label"><span>or</span></div>

API

Do and don't

Accessibility

• <hr> has the implicit separator role; screen readers announce it. Add aria-hidden="true" when the break is purely visual.
• Vertical separators need role="separator" and aria-orientation="vertical". Inside a toolbar they group controls for assistive tech.
• The labelled divider isn't a separator role (separator children are hidden from the accessibility tree); its word is read as normal text.
• Decorative lines are 1px border.default; lines in forced colors use CanvasText.
• Not focusable, no keyboard interaction. (Resizable separators are the splitter component.)

Tokens