Divider / Separator

Demo & usage

More examples

<sv-divider orientation="vertical" />
<sv-divider variant="dashed" spacing="my-8" />

<sv-divider width="120px" />
<sv-divider orientation="vertical" height="24px" />

<!-- A visual flourish: nothing is announced -->
<sv-divider semantics="decorative" variant="gradient" />

<!-- A section title is a HEADING, not a labelled divider -->
<h2 class="text-sm font-semibold">Billing</h2>
<sv-divider semantics="decorative" />

When to use

• Separating content groups visually without adding semantic structure.
• Section breaks, "OR" separators between options, list/menu groupings.
• For grouping form fields with a heading, use the Input Group instead.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Customization & theming

• Solid, dashed, dotted and gradient lines.
• Inline text or icon label.
• Horizontal or vertical.
• Optional explicit `width` / `height`, custom `color` and `thickness`.
• `semantics`: `semantic` (default — a real thematic break) or `decorative` (a visual flourish, removed from the accessibility tree).
• Variant axes (X-8): `variant`, `color`, `thickness`, `align`, `spacing`, `width` / `height` are APPEARANCE; `orientation` is LAYOUT; `semantics` is MEANING and is independent of how the rule looks. Known limits: `gradient` ignores `color` and `thickness`; a vertical divider needs a height — a stretched flex-row parent or an explicit `height` — or it collapses to 1rem.

Best practices

• Do: Use a labelled divider ("OR") to separate alternative actions.
• Do: Keep dividers subtle — they should organize, not dominate.
• Tip: Match `spacing` (margin utility classes such as `my-8`, replacing the default `my-4`) to the surrounding rhythm so sections breathe consistently.
• Don't: Don't use a labelled divider as a section title ("Billing", "Advanced settings"). It gives assistive technology no heading to jump to. Use a real `<h2>`–`<h6>` (or a `<fieldset>` + `<legend>` for form groups), and add a `semantics="decorative"` divider beside it if you want the line.
• Do: Mark purely visual rules — between cards, inside a hero, under a logo — `semantics="decorative"`, so a screen reader is not told "separator" between every flourish. Keep `semantic` for genuine topic changes.
• Tip: Layout (X-9): the host is `display: block; width: 100%` when horizontal and `inline-flex; align-self: stretch` when vertical — so a vertical divider takes its height from a flex row parent. Nothing is measured, portalled or scrolled.
• Tip: Platform limits (X-11): under Windows forced colours the solid, dashed and dotted variants are borders and repaint in the system colour; `gradient` is a background gradient, which forced colours drops, so under `forced-colors: active` it falls back to a 1px `CanvasText` border in the same orientation — the rule stays visible in every variant. Browsers omit backgrounds when printing by default, so a `gradient` rule may not print.

Accessibility

• `semantics="semantic"` (the default, and what every divider rendered before the input existed) exposes `role="separator"` with `aria-orientation`, named by `label`.
• `semantics="decorative"` renders `role="none"`; an unlabelled decorative divider is also `aria-hidden`, so nothing is announced. A decorative divider with a `label` keeps the text readable in reading order ("OR" still means something) but announces no separator.
• A divider is not a heading. Screen-reader users navigate sections by headings, and a labelled rule gives them none — see the "don't" below.