All components (204)

Separator

Surfaces · Separator · .amset-separator

What it is and when to use it

A dividing line. Without text it is a plain separator; with text it stops being a line and becomes a label between two lines, like the "or" between two ways of signing in.

When to use it

To split blocks inside a card or a panel when white space is not enough.
With text: the "or" between two paths to the same thing, or the label of a group ("Advanced settings"), with align="start".
orientation="vertical" between pieces of a row: inside a flex container it stretches to full height.
space adjusts the margin; none for tight lists.
A long label breaks into several lines and each line keeps a minimum, instead of running off the screen.

When not to

Between groups of a toolbar: BarSeparator, inside Toolbar.
The header of a section: a real heading (h2, h3). The separator's text is not a heading and does not show up when navigating by headings.

Keyboard: it is not focusable.

Accessibility: without text it is a separator (horizontal, an <hr>; vertical, with aria-orientation="vertical"). With text it stops being one: the lines are decorative (aria-hidden) and only the text is read.

Fine-tuning: CSS variables --amset-separator-*: -color (by default --amset-divider), -thickness, -style (dashed or dotted give a dashed line) and -space, the margin set by the space prop: --amset-space-2 (sm), -4 (md) or -6 (lg).

What it looks like

Top

Bottom

<Separator />
<Separator>or</Separator>

Props

Import it with import { Separator } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`align`	`"center" \| "start" \| "end"`	Where the text goes when there is one.
`children`	`ReactNode`	Text in the middle of the line: "or", "Advanced settings". Without it, the line is decorative and is not announced.
`className`	`string`	Merged with the library classes; it does not replace them.
`orientation`	`SeparatorOrientation`	—
`space`	`"sm" \| "md" \| "lg" \| "none"`	Margin around. `none` to separate items inside a tight list.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-separator-color`	`var(--amset-divider)`
`--amset-separator-thickness`	`var(--amset-border-width)`
`--amset-separator-style`	`solid`
`--amset-separator-space`	`var(--amset-space-4)`
`--amset-separator-rule`	`var(--amset-separator-thickness) var(--amset-separator-style) var(--amset-separator-color)`

How to change it

.amset-separator {
  --amset-separator-color: ...;
  --amset-separator-thickness: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: