Components
Separator
A themed rule between content or controls, horizontal or vertical, on a native hr.
.ui-separator styles the native <hr> element with its implicit role="separator" instead of rebuilding one from a div. data-orientation="vertical" turns it into a column rule that stretches to the row height in flex and grid layouts. Spacing uses composition: add margin utilities like my-xs or mx-xs.
Separators come in two types. A meaningful separator marks a content boundary that assistive tech should announce. Keep the implicit role and add aria-orientation="vertical" on the vertical form, because assistive tech assumes separators are horizontal by default. A purely decorative separator takes role="presentation" to stay out of the accessibility tree.
Default
Loading components…
<div class="flex flex-col gap-sm max-w-xl"> <div> <p class="text-sm font-strong">Zazz Design Framework</p> <p class="text-sm text-muted-foreground">Web-native primitives.</p> </div> <hr class="ui-separator" /> <div class="flex flex-row items-center gap-xs text-sm"> <a href="#" class="ui-button" data-variant="link">Docs</a> <hr class="ui-separator" data-orientation="vertical" aria-orientation="vertical" /> <a href="#" class="ui-button" data-variant="link">Components</a> <hr class="ui-separator" data-orientation="vertical" aria-orientation="vertical" /> <a href="#" class="ui-button" data-variant="link">Themes</a> </div></div>/** * separator.css: Separator (.ui-separator on native <hr>) * * @layer variables, components * @requires layers.css, _variables.css, _reset.css * @uses <hr>: the platform's separator (implicit role="separator"); * no div reconstruction needed * @uses data-orientation="vertical": flips to a stretching column rule * for flex/grid rows; pair with aria-orientation="vertical" when * the separator is meaningful, or role="presentation" when purely * decorative * @tokens --ui-separator-* (@layer variables) */@layer variables { :root { --ui-separator-color: var(--border); --ui-separator-thickness: var(--step-px); }}@layer zazz.components { /* =========================================================================== SEPARATOR: a themed <hr>, horizontal or vertical - The bare-hr baseline lives in _reset.css; this class adds the token hooks and the vertical form. Spacing is composition (my-xs / mx-xs utilities), like every other recipe. - Meaningful separators keep hr's implicit separator role (add aria-orientation="vertical" for the vertical form: AT assumes horizontal); decorative ones take role="presentation". =========================================================================== */ .ui-separator { border: none; background-color: var(--ui-separator-color); block-size: var(--ui-separator-thickness); inline-size: auto; flex-shrink: 0; } .ui-separator[data-orientation="vertical"] { inline-size: var(--ui-separator-thickness); block-size: auto; /* Stretches to the row height as a flex/grid item; the fallback keeps it visible in plain flow, where auto block-size would collapse to zero */ align-self: stretch; min-block-size: 1lh; }}API
| Attribute | Target | Values |
|---|---|---|
data-orientation | .ui-separator | vertical: column rule for flex/grid rows |
aria-orientation | .ui-separator | vertical: pair with the above when the separator is meaningful |
role | .ui-separator | presentation: for purely decorative separators |
| Tokens | :root | --ui-separator-color, --ui-separator-thickness |