Separator

A separator is a one-pixel rule in --border. By default it carries role="separator" and aria-orientation; pass decorative when it only helps the eye. Children turn it into a label centred between two lines.

import Separator from '@zuilib/components/separator'

Horizontal

A plain rule is the line itself, w-full and h-px.

Loading example

Vertical

A vertical separator is h-full self-stretch, so it takes its height from a flex parent (flex items-center, <Stack direction="row">). Outside a flex parent it collapses; give it an explicit height (className="h-6").

Loading example

Labelled

Children render as a label between two flexible lines and name the separator through aria-labelledby. '', null and booleans draw a plain rule, so a conditional label never leaves a gap.

Loading example

Props

SeparatorProps extends the <div> attributes minus role, with:

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Also sets aria-orientation when not decorative
decorative	boolean	false	true renders role="none" and no aria attributes
children	ReactNode	—	Label centred between two lines; empty, null or boolean draws a plain rule
lineClassName	string	—	Merged onto the drawn line(s): the root of a plain rule, both separator-line spans of a labelled one
labelClassName	string	—	Merged onto the label span
className	string	—	Merged last onto the root

role is not accepted: decorative is the only switch between role="separator" and role="none".

Slots

Slot	Element	Notes
[data-slot="separator"]	div	Root. Also data-orientation and data-decorative (present when decorative)
[data-slot="separator-line"]	span	One of the two lines of a labelled separator; aria-hidden
[data-slot="separator-label"]	span	The label between the lines

Tokens

Token	Used for
--border	The rule
--muted-foreground, --text-sm	The label

Accessibility

• role="separator" with aria-orientation by default; a label is linked with aria-labelledby.
• decorative renders role="none" so assistive technology skips it. Use it between toolbar buttons and in menus that already group items.
• Never focusable; a separator is static structure.

Related

• Stack: a flex parent that gives a vertical separator its height.
• Card: sections divided by rules.
• Menu: groups of items with their own separators.