Divider

A thin horizontal line used to separate content within a layout. Renders a styled div by default; pass as="hr" when the separation is a semantic thematic break that screen readers should announce.

Design guidance

When and how to use this

Use Divider to introduce a visual break between sections of related content within the same layout. Choose colorMode="light" (default) when the divider sits on a light background, and colorMode="dark" when it sits on a dark background-these map to the divider.primary and divider.primaryInvert tokens respectively.

When to consider something else

Reach for spacing (Stack, padding, margin) before reaching for a divider. If you're trying to visually group content, a clear gap is usually preferable to adding a rule. Use Divider only when the separation needs to be explicit.

Import

React

ColorMode

Default for colorMode is light, but you can also specify dark for use on dark backgrounds.