Primitives

Separator

A divider between sections. Decorative by default, which is what stops a screen reader from reading the furniture.

Horizontal

The default. Use it between stacked sections.

Tokens are generated, never hand-edited.

Change a hue in the generator and replay.

<Separator />

Vertical

Use orientation to turn it, inside a flex row it stretches to fit.

Draft

2 minutes ago

minuk

<Separator orientation="vertical" />

Thickness

size is the thickness in pixels. It doubles, because the difference between 1 and 2 is the whole difference at the thin end and nobody can tell 12 from 14 at the other. The length comes from whatever the rule sits in.

<Separator size={1} />
<Separator size={2} />
<Separator size={4} />
<Separator size={8} />
<Separator size={16} />

Vertical, thickened

The same prop sets the width when the rule runs down.

Tokens

Components

<Separator orientation="vertical" size={2} />

Props

Prop	Type	Default	Notes
`orientation`	`'horizontal' \| 'vertical'`	'horizontal'	Vertical stretches to its flex parent.
`size`	`1 \| 2 \| 4 \| 8 \| 16`	1	Thickness in pixels. Height when horizontal, width when vertical.
`decorative`	`boolean`	true	False exposes it as a real separator to assistive tech.