Skip to main content

Foundations

Divider

Render a tokenized horizontal or vertical separator with optional label support. A tidy line that knows when to stay quiet for assistive tech.

Curated demo

Primary option

Secondary option

Reference

Render a tokenized horizontal or vertical separator with optional label support. A tidy line that knows when to stay quiet for assistive tech.

  • Use Divider to separate related chunks without inventing one-off border utilities.
  • Leave decorative true for purely visual separators; set decorative false when the separator conveys structure.
  • Use the label prop sparingly for meaningful breaks like 'Or' between authentication choices.

Props

Name Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' Separator direction.
decorative boolean true Whether an unlabelled separator is hidden from assistive semantics.
label string — Optional visible divider label.
class string — Additional CSS classes.

Example snippet

<Stack space={3}>
  <p>Before</p>
  <Divider label="Or" />
  <p>After</p>
</Stack>