Divider

Subtle line to separate content — horizontal by default, or vertical in a row.

Preview

Live

Above the rule

Below the rule

Left Right 
<hr class="divider" aria-hidden="true" />
<hr class="divider divider--vertical" aria-hidden="true" />

Variants

Horizontal

Full-width 1px rule — default.

Vertical

.divider--vertical for inline separation.

A B

Semantic separator

When not decorative, expose role="separator" (React decorative={false}).

Accessibility

  • Decorative dividers (default) use aria-hidden="true" so AT skip them.
  • When the line conveys structure, set React decorative={false} (or HTML role="separator" + aria-orientation).
  • Prefer heading hierarchy over dividers for major section boundaries.
  • Vertical dividers need a flex / inline row parent for height alignment.

API

HTML classes

Class Description
.divider Base horizontal rule.
.divider--vertical Inline vertical separator.

React props

From src/core/Divider.tsx — renders <hr>.

Prop Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' Layout direction / modifier class.
decorative boolean true When true, hides from AT. When false, exposes role="separator".
className string — Merged onto the root.