The hairline. #1e1e1e, one pixel, everywhere.
| Prop | Type | Notes |
|---|---|---|
| orientation | horizontal · vertical | A row rule, or an inline column rule |
| variant | solid · dashed | Continuous or dashed hairline |
| label | string | Centred caption with a rule each side |
| element | hr · role=separator | Semantic where it divides content |
| inset | boolean | Indent to align with content, not the edge |
A Divider separates; it never emphasises. Reach for spacing first — add a line only when whitespace alone doesn't read as a break.
Keep it one pixel and quiet. Let spacing do most of the work.
Don't thicken or colour it for emphasis. That's not its job.
Use a labelled divider to break auth flows and long lists.
Don't stack rules with no content between. That's just noise.
Separating a destructive action in a menu.
Between a form and social sign-in options.
Vertical rules grouping toolbar controls.
| Token | Value | Role |
|---|---|---|
| --divider | #1E1E1E | The one hairline colour |
| --divider-dashed | #2A2A30 | Dashed variant |
| --divider-h | 1px | Always one pixel |
| --divider-label | #565A62 | Caption colour, mono |
| --divider-gap | 14px | Space around a label |
| --divider-vh | ≥ 22px | Min height of a vertical rule |
<hr class="o-divider" /> <hr class="o-divider o-divider--dashed" /> <div class="o-divider-label">Or</div> <span class="o-divider--vertical"></span>