Divider

A divider separates groups of content. It renders a role="separator" element rather than an <hr>, because a label goes inside it and <hr> takes no children.

Basic divider

Everything above.

Everything below.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Everything above.'),
  divider(),
  text({ tone: 'muted' }, 'Everything below.'),
)

With a label

Children become a label centred in the rule.

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Continue with GitHub'),
  divider('or'),
  button({ block: true }, 'Continue with email'),
)

Spacing

spacing sets the margin above and below, from the same scale everything else uses.

Tight

Default

Roomy

End

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Tight'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Default'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Roomy'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'End'),
)

Vertical

A vertical divider needs a parent that gives it a height — a flex row whose items stretch, which is what stack() does by default.

4.1 kB

12 pages

0 islands

stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4.1 kB'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 pages'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 islands'),
)

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Which way the rule runs.
`spacing`	`Space`	`'md'`	Margin on either side of the rule.