Separator

Start with a plan

Debug an issue

Review the changes

import { Separator } from "@arcadia/ui";

<div {...sx("cmp-list", cmp.list)}>
  <span {...sx(null, cmp.listItem)}>Start with a plan</span>
  <Separator inset />
  <span {...sx(null, cmp.listItem)}>Debug an issue</span>
  <Separator inset />
  <span {...sx(null, cmp.listItem)}>Review the changes</span>
</div>

TSX

import { Separator } from "@arcadia/ui";

<Separator />

A 1px --stroke-3 rule. inset pulls it in along its length by --separator-inset: 11px (--hairline-inset) when horizontal, so a hairline list's rules start where its text does, and 4px when vertical.

Examples

Vertical

In a flex row the rule stretches to the row's height; inset trims its ends, as between the last two buttons.

import { IconButton, Separator } from "@arcadia/ui";

<div {...sx("cmp-toolbar", cmp.toolbar)}>
  <IconButton icon="copy" label="Copy" tone="muted" />
  <Separator orientation="vertical" />
  <IconButton icon="revert" label="Restore checkpoint" tone="muted" />
  <Separator orientation="vertical" inset />
  <IconButton icon="trash" label="Delete" tone="muted" />
</div>

rootStyle takes where the rule sits and these knobs: its colour as a palette token, its inset as a spacing token.

--separator-color: PaintDefault var(--stroke-3); The rule's colour.
--separator-inset: Ref<Space | Measure>Default var(--hairline-inset); How far inset pulls the rule in along its length (4px on a vertical rule).

A role="separator" with aria-orientation, so assistive tech can announce the break between groups. It is never focusable and has no keys.

Use it where the groups are real, such as sections of a menu or a toolbar. Where the rule is only decoration between items that already have their own structure, like list items or a card's sections, hide it with aria-hidden so it isn't read as a stray separator.

orientation: "horizontal" | "vertical"Default "horizontal"; Direction of the rule.
inset: boolean; Inset along its length by --separator-inset: 11px (--hairline-inset) when horizontal, so a hairline list's rules start where its text does; 4px when vertical (toolbar dividers).
rootStyle: RootStyle<SeparatorKnobs>; Typed StyleX override: layout and the --separator-* knobs.

Rest props go to <div> props.

Usage

Examples

Vertical

Customising

Accessibility

API reference

Separator