DIVIDER: Labeled or plain section break
VARIANTS: Plain | Labeled | Vertical
A thin hairline that separates content. Add a .divider-label child
("or", "OR CONTINUE WITH") to break the line with centered text — the same
.divider class switches layout automatically. Use .divider-vertical
between side-by-side elements such as two buttons.
Plain: A single hairline, full width. Use a semantic <hr> — it
already carries the implicit separator role, so no extra ARIA is needed.
Section one content sits above the break.
Section two content sits below it.
<hr class="divider">
Labeled: Wrap the text in .divider-label inside a .divider
container — no separator role is added, since the visible "or" text is meaningful content that
should be read normally by assistive tech, not hidden behind a decorative-separator role.
Sign-in "or" break
<div class="divider"><span class="divider-label">or</span></div>
Vertical: Add .divider-vertical alongside .divider inside a
flex row with tw:items-stretch so the hairline stretches to match the row's height —
useful between two related actions (e.g. "Save" / "Save & continue").
<span class="divider divider-vertical" role="separator" aria-orientation="vertical"></span>
Quick Reference
Base: .divider (plain hairline, or flex row when it wraps .divider-label)
Label: .divider-label (centered text, surface bg, neutral-700 ink)
Orientation: .divider-vertical (pair with .divider, use inside a tw:flex tw:items-stretch row)