Divider

A Divider provides a visual separator that groups related content without adding semantic meaning.

When to use

• Use a Divider to separate related sections of content visually.
• Choose the Horizontal orientation for stacked content and Vertical for side‑by‑side content.
• Use the Default weight for standard separation; select Strong when you need a more pronounced visual break.

When not to use

• Don't use a Divider as the primary way to convey information; use text, icons, or other explicit cues instead.
• Don't rely on a Divider for functional spacing; use layout utilities (margin, padding) for that purpose.

Anatomy / variants

Variant	Description	When to use
Orientation: Horizontal	A thin line that spans the width of its container.	Separate vertically stacked sections.
Orientation: Vertical	A thin line that spans the height of its container.	Separate side‑by‑side columns.
Weight: Default	Standard line thickness.	Typical visual division.
Weight: Strong	Thicker line for higher visual emphasis.	When a stronger visual break is needed.

Accessibility

• Divider is decorative; hide it from assistive technology with aria-hidden="true" or role="presentation".
• If the divider indicates a meaningful grouping, expose it with role="separator" and ensure it does not receive focus.

Changelog

• 2026-06-29 — Initial doc generated from Figma.