Skip to main content
xoji

Separator
Info:Layout html svelte astro Success: coverage 10/10

A hairline divider: horizontal or vertical, optionally with a centered label, in two weights.

Live demo

live · @xoji/astro

Separator

Horizontal rules

Normal weight — the standard line color.

Thin weight — the fainter --line-2.

Labeled divider

A separator can carry a centered label to break up a stacked layout into named sections.

Settings that scope to your profile.

Irreversible actions live below.

Vertical separators

A vertical rule divides items in an inline group — breadcrumbs, meta rows, toolbars.

Overview Pricing Docs

v0.2.0

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.

Drop a bare Separator between stacked sections (list rows, card bodies, menu groups) for a quiet structural break.
Use orientation="vertical" inside a Toolbar or a horizontal button Cluster to divide groups of controls.
Reach for 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.

PropTypeDefaultBindingsDescription
orientation Orientation
horizontal vertical
horizontal
html svelte astro
Axis of the rule. `horizontal` spans width; `vertical` spans height for inline groups.
variant SeparatorVariant
default with-label
default
html svelte astro
`default` is a plain rule; `with-label` centers a label over the rule.
size SeparatorSize
thin normal
normal
html svelte astro
Rule weight. `normal` uses the standard line color; `thin` uses the fainter `--line-2`.

Appearance

Variants

default

 .xoji-separator

A plain dividing rule with no label: decorative and aria-hidden.

with-label

 .xoji-separator--with-label

Centers a label over the rule, splitting it into two flanking segments; promoted to role="separator".

Sizes

thin
.xoji-separator--thin

Faint: drawn in the lighter --line-2.

normal

 default
.xoji-separator

Default: the standard --line weight.

States

vertical

 .xoji-separator--vertical

Vertical orientation: the rule spans height instead of width, for inline groups.

Anatomy

The named parts that make up the component, with their selectors.

separator

 .xoji-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.
--line --line-2 --border-thin --fg-2 --font-sans --text-xs --weight-medium --leading-tight --space-2 --space-3

label

 .xoji-separator__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.

Success:fully covered 10/10 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { 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-medium

Slots
default
html svelte astro

The label text, shown only in the with-label variant.

Accessibility
A bare divider is purely decorative, so it is marked aria-hidden and the role is omitted. It adds no noise to the accessibility tree.
The labeled variant carries real meaning (a named section break), so it becomes role="separator" with the label as its accessible name.
Vertical orientation sets aria-orientation="vertical" on the labeled (separator-role) form so the axis is announced.
The rule itself is drawn with backgrounds and pseudo-elements, never text, so screen readers never encounter stray glyphs.

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.

 
<xoji-separator></xoji-separator>

<xoji-separator size="thin"></xoji-separator>

<xoji-separator variant="with-label">OR</xoji-separator>

<div style="display: flex; height: 1.5rem; align-items: center;">
	<span>Edit</span>
	<xoji-separator orientation="vertical"></xoji-separator>
	<span>Share</span>
</div>
 
<script lang="ts">
	import { Separator } from "@xoji/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 "@xoji/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>