Divider

A standalone rule between stacked sections or side-by-side items. The line is a rung of the edge ladder (hairline / border / strong) — or any theme color when it must carry emphasis — and thickness / spacing are tokens. Horizontal renders an <hr>; vertical a role="separator".

When to use

✅ Use when…	🚫 Avoid when…
Splitting groups inside a menu, panel or stacked list without wrapping the rows themselves. Separating inline items (`Buy \| Sell`) — `orientation="vertical"`. The "or" / date / section separator — `label`.	Row separators inside `DescriptionList` — use its `dividers`. A framed box — use `borderWidth` on the container. Page-level section breaks with heading semantics — use a heading.

Tone and color

<Divider />                       {/* hairline */}
<Divider tone="strong" />
<Divider color="primary" />       {/* emphasis — color wins over tone */}
<Divider thickness="regular" spacing="medium" />

Vertical

Stretches to the row's height inside a Flex flexDirection="row".

Buy

Sell

<Flex flexDirection="row" gap="small" alignItems="center">
  <Text text="Buy" />
  <Divider orientation="vertical" />
  <Text text="Sell" />
</Flex>

Labeled

Today

<Divider label="or" />

Accessibility

Horizontal is a native <hr> (implicit separator). Vertical carries role="separator" + aria-orientation="vertical". A string label becomes the separator's accessible name.

Properties


Prop	Type	Default	Description
`alignContent`	`"center" \| "start" \| "end" \| "between" \| "around" \| "evenly" \| "stretch"`	—	Packing of wrapped lines / grid tracks on the block axis.
`color`	"main" \| "primary" \| "secondary" \| "tertiary" \| "success" \| "information" \| "warning" \| "danger" \| "primary.dark" \| "primary.action" \| "primary.light" \| "primary.active" \| "secondary.dark" \| "secondary.action" \| "secondary.light" \| "secondary.active" \| "tertiary.dark" \| "tertiary.action" \| "tertiary.light" \| "tertiary.active" \| "success.dark" \| "success.action" \| "success.light" \| "success.active" \| "information.dark" \| "information.action" \| "information.light" \| "information.active" \| "warning.dark" \| "warning.action" \| "warning.light" \| "warning.active" \| "danger.dark" \| "danger.action" \| "danger.light" \| "danger.active" \| "grayscale.0" \| "grayscale.5" \| "grayscale.10" \| "grayscale.20" \| "grayscale.30" \| "grayscale.40" \| "grayscale.50" \| "grayscale.60" \| "grayscale.70" \| "grayscale.80" \| "grayscale.90" \| "grayscale.100" \| "neutral.0" \| "neutral.5" \| "neutral.10" \| "neutral.20" \| "neutral.30" \| "neutral.40" \| "neutral.50" \| "neutral.60" \| "neutral.70" \| "neutral.80" \| "neutral.90" \| "neutral.100" \| "neutral.110" \| "neutral.120" \| "neutral.130" \| "neutral.140" \| "neutral.150" \| "neutral.160" \| "neutral.170" \| "neutral.180" \| "opposite" \| "complementary" \| "baseDark" \| "baseLight" \| "deepDark" \| "deepLight" \| "transparent" \| "muted" \| "surface.canvas" \| "surface.sunken" \| "surface.paper" \| "surface.raised" \| "surface.overlay" \| "surface.scrim" \| "ink.primary" \| "ink.secondary" \| "ink.muted" \| "ink.disabled" \| "edge.strong" \| "edge.hairline" \| "edge.border" \| "wash.hover" \| "wash.pressed" \| "wash.selected"	—	Theme color of the line (`primary`, `danger`, `neutral.40`, …). Wins over `tone` — use it only when the rule must carry emphasis.
`containment`	`string`	—	Containment marker for the `cq` channel: emits `container-type` (+ `container-name` when the string form carries one, e.g. `'inline-size card'`). Apply on the immediate wrapper of the adapting component — NEVER on page-level shells.
`cq`	`Partial<Record<ContainerSizeTypes, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; ... 14 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>>`	—	Container-relative layout styles per `theme.containerSizes` key.
`enableBreakpoint`	`"xs" \| "xl" \| "sm" \| "md" \| "lg"`	—	Forces a breakpoint's prop set to apply regardless of viewport (stories/previews).
`ignoreResponsive`	`boolean`	—	Fully disables the responsive factory (tests / fixed snapshots).
`justifyItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: inline alignment of every item in its cell.
`label`	`ReactNode`	—	Text (or node) centered on the rule — the "or" separator. Horizontal only. A string becomes the accessible name of the separator.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Axis of the rule.
`pageShell`	`boolean`	—	Centers the element and caps the width at `theme.layout.pageMaxWidth`. The page shell of a classic centered layout.
`placeItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: `place-items` shorthand (block + inline).
`spacing`	`SpacingInterface`	`micro`	Breathing room around the rule — vertical margin for a horizontal divider, horizontal margin for a vertical one.
`thickness`	`"none" \| "thin" \| "regular" \| "great" \| "bold"`	`thin`	Line thickness (border-width token).
`tone`	`"strong" \| "hairline" \| "border"`	`hairline`	Line weight from the edge ladder.
`transform`	`string`	—	CSS `transform` value (e.g. `translate(-50%, -33px)`). Never leaks to the DOM as an attribute.
`viewportMedias`	`Partial<Record<keyof BreakPoint<any>, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; container: boolean; ... 13 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>> \| unde...`	—	Viewport-driven layout styles per `theme.breakpoints` key.

Besides the props above, the rule accepts the layout props of a Flex.