Materials
Divider
One hairline between sections, with an optional label.
On this page
A divider is one hairline between sections. Use .divider on an <hr>, which already carries the separator role. Reach for it after spacing and grouping have done what they can: a line is the strongest way to part two things.
Divider
<p class="m(0) text-sm fg-text-body">Billing is managed by the workspace owner.</p><hr class="divider"><p class="m(0) text-sm fg-text-body">Invoices are sent on the first day of each month.</p>#With a label
divider-label parts the line around a caption. Put it on an element with role="separator", since an <hr> cannot hold text.
With a label
<button type="button" class="btn w-full">Continue with a passkey</button><div class="divider divider-label" role="separator">or</div><input class="input" type="email" placeholder="you@example.com" aria-label="Email">#Vertical
divider-vertical stands between items in a row and takes the row's height. Give it role="separator" and aria-orientation="vertical" when it parts groups of controls; hide it with aria-hidden="true" when it is only visual.
Vertical
<div class="flex items-center gap-sm"> <button type="button" class="btn btn-quiet btn-sm">Edit</button> <span class="divider divider-vertical" role="separator" aria-orientation="vertical"></span> <button type="button" class="btn btn-quiet btn-sm">Share</button> <button type="button" class="btn btn-quiet btn-sm">Export</button></div>#Classes
| Class | Description |
|---|---|
divider | A 1px rule in --color-line-divider |
divider-vertical | A rule between items in a row; it takes the row's height. With divider |
divider-label | The line parts around a caption such as "or". An hr cannot hold text, so it goes on an element with role="separator". With divider |