Separator

A 1px line that separates content. It’s a native <hr>, so it already has the separator role.

Install

import "elements-kit/ui/styles.css";
import "elements-kit/ui/separator/separator.css";

API

<hr class="x-separator" />
<hr class="x-separator" aria-orientation="vertical" data-size="2" />

Attribute	Values
aria-orientation	horizontal (default), vertical
data-size	1, 2, 3, 4 (default): the length
data-accent	an accent line; --neutral-a6 without it

The class resets the <hr>’s native border and margin, so it doesn’t need unset.

Sizing

data-size sets the length. The line is always 1px thick.

data-size	length
1	--space-4 (16px)
2	--space-6 (32px)
3	--space-9 (64px)
4 (default)	100%: the container’s width, or a vertical separator’s row height

The default is the full length, what an <hr> usually means.

Vertical

aria-orientation="vertical" turns it into a 1px column. At full length it stretches to a flex or grid row’s height, and on its own it’s one line tall. Sizes 1–3 give a fixed length, centered by the row’s align-items. The attribute also tells assistive technology the orientation.

<div style="display: flex; align-items: center; gap: 12px">
  <button class="unset x-button" data-variant="borderless">Cut</button>
  <hr class="x-separator" aria-orientation="vertical" data-size="2" />
  <button class="unset x-button" data-variant="borderless">Copy</button>
</div>

Color

The line is --neutral-a6. With data-accent it’s --accent-a6: a bare data-accent uses the inherited accent, and data-accent="iris" picks a scale.

In a menu

Directly inside an x-menu, a horizontal separator is inset to the items’ text, with --space-2 above and below.

See also

• Menu: separators between groups of items