Divider

Divider separates related content while preserving the spacing and visual language of the design system.

Lines and labelsCopy Anchor Link

With no children, Divider renders a semantic separator. A horizontal child becomes a label between two lines; labelPosition can be start, center or end.

<Divider />
<Divider>Or continue with</Divider>
<Divider labelPosition="start">Account</Divider>

The double variant renders two parallel lines. It supports the same horizontal label positions as the other labelled dividers, so the text can be centered or placed toward the start or end.

<Divider variant="double">Section title</Divider>
<Divider variant="double" labelPosition="start">Account</Divider>
<Divider variant="double" labelPosition="end">More options</Divider>

Use contentPadding to add space between the divider and the content around it. The value accepts any CSS length or custom property. For a horizontal divider it adds vertical space above and below the line; for a vertical divider it adds horizontal space on both sides.

<Divider contentPadding="20px" />
<Divider orientation="vertical" contentPadding="16px" />

Variants and orientationCopy Anchor Link

variant is solid, dashed, dotted or double. The double style uses two parallel solid lines and is intended for horizontal or vertical separators. tone is default, muted, strong or primary. size controls the regular line thickness: sm, default or lg. Use orientation="vertical" inside a flex or grid layout; labels are intended for horizontal dividers.

Set decorative when the line is purely visual. It removes separator semantics and marks the element as hidden from assistive technology.

When orientation="vertical", children is not rendered as a label; labels are supported only for horizontal dividers. The component forwards standard div attributes such as id, data-*, aria-label, event handlers and className. Use className or style for additional styling, while contentPadding is the supported way to control the space between the line and surrounding content.

API ReferenceCopy Anchor Link

AccessibilityCopy Anchor Link

By default, Divider renders with role="separator" and exposes its orientation through aria-orientation. Set decorative for a purely visual divider; it then uses aria-hidden="true" and does not expose separator semantics. Horizontal labels are visual content inside the separator and should remain short and descriptive.