Divider
React divider for horizontal or vertical separation, with optional inline label, tones, and a decorative mode. Uses the separator role.
Divider separates content, horizontally or vertically. Pass children for an inline label, or decorative when it is purely visual.
When to use
Use Divider to separate sections inside a card, a form, or a toolbar. Add a label for "or" style separators between alternative actions.
Prefer spacing over dividers when the layout already reads well; too many lines add noise.
Examples
Props
Props declared by Divider. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | ||
variant | "solid" | "dashed" | ||
tone | "primary" | "neutral" | "white" | "alpha-white" | SDGA Color axis. neutral (gray-300, default) · primary (SA green) ·
alpha-white (30% white) · white. The white tones are fixed for use on
colored / dark surfaces. Override per-instance via --ddga-divider-color. | |
children | react.ReactNode | Optional label rendered inside a horizontal divider. Ignored when
orientation="vertical". When set, the divider renders as a three-part
flex (line - label - line) instead of a single bar. | |
labelPosition | "center" | "start" | "end" | Where to place the label along the divider. Defaults to center. Ignored
when no label is provided. start and end are logical (LTR/RTL aware). | |
decorative | boolean | If true, the divider is treated as purely decorative and removed from
the accessibility tree (role="none"). Defaults to false. |
Accessibility
Divider renders role="separator" with aria-orientation so assistive technology knows its direction. Pass decorative for purely visual lines to render role="none" and keep them out of the accessibility tree.
A labelled divider reads its label as text.