Separator
A hairline divider: horizontal or vertical, optionally with a centered label, in two weights.
Live demo
Separator draws a thin dividing rule between content. It runs horizontal (a full-width rule, the default) or vertical (a full-height rule for inline groups like toolbars and button clusters), in two weights: normal uses the standard line color and thin uses the fainter --line-2.
The with-label variant centers a label over the rule, splitting it into two segments that flank the text (the classic "OR" divider), and works on both axes. A bare divider is decorative and aria-hidden; once it carries a label it becomes a real role="separator" so assistive tech announces the section break.
When to use
How this component composes with the rest of the set.
orientation="vertical" inside a Toolbar or a horizontal button Cluster to divide groups of controls. variant="with-label" for the classic "OR" divider between two flows, e.g. a login form split from a social-auth row. Props
3 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
horizontal spans width; vertical spans height for inline groups. | ||||
default is a plain rule; with-label centers a label over the rule. | ||||
normal uses the standard line color; thin uses the fainter --line-2. |
Appearance
Variants
default
A plain dividing rule with no label: decorative and aria-hidden.
with-label
Centers a label over the rule, splitting it into two flanking segments; promoted to role="separator".
Sizes
thin
Faint: drawn in the lighter --line-2.
normal
Default: the standard --line weight.
States
vertical
Vertical orientation: the rule spans height instead of width, for inline groups.
Anatomy
The named parts that make up the component. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.
separator
The root element. Bare, it is the rule itself; labeled, it is a flex track whose pseudo-elements draw the rule on either side of the label.
label
The centered label text shown in the with-label variant, flanked by rule segments.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--border-thin--fg-2--font-sans--leading-tight--line--line-2--space-2--space-3--text-xs--weight-mediumSlots
The label text, shown only in the with-label variant.
Accessibility
aria-hidden and the role is omitted. It adds no noise to the accessibility tree. role="separator" with the label as its accessible name. aria-orientation="vertical" on the labeled (separator-role) form so the axis is announced. Code
Orientations, weights, and the labeled divider
A default rule, the thin weight, the labeled "OR" divider, and a vertical rule inside an inline group.
<xtyle-separator></xtyle-separator>
<xtyle-separator size="thin"></xtyle-separator>
<xtyle-separator variant="with-label">OR</xtyle-separator>
<div style="display: flex; height: 1.5rem; align-items: center;">
<span>Edit</span>
<xtyle-separator orientation="vertical"></xtyle-separator>
<span>Share</span>
</div><script lang="ts">
import { Separator } from "@xtyle/svelte";
</script>
<Separator />
<Separator size="thin" />
<Separator variant="with-label">OR</Separator>
<div style="display: flex; height: 1.5rem; align-items: center;">
<span>Edit</span>
<Separator orientation="vertical" />
<span>Share</span>
</div>---
import { Separator } from "@xtyle/astro";
---
<Separator />
<Separator size="thin" />
<Separator variant="with-label">OR</Separator>
<div style="display: flex; height: 1.5rem; align-items: center;">
<span>Edit</span>
<Separator orientation="vertical" />
<span>Share</span>
</div>