Divider component

Playground

Change a prop on the right and the preview updates. Switch to Code to copy what you see.

Recipes

Copy-paste patterns for the ways Divider actually gets used — each one a real, self-contained example.

<div>
  <p>First section</p>
  <Divider />
  <p>Second section</p>
</div>

<Divider>OR</Divider>
<Divider labelPlacement="start">Continue with</Divider>

<div className="flex items-center gap-3">
  <span>Edit</span>
  <Divider orientation="vertical" />
  <span>Share</span>
  <Divider orientation="vertical" />
  <span>Delete</span>
</div>

<Divider lineStyle="dashed" />
<Divider lineStyle="dotted" color="primary" />

Horizontal and vertical

orientation defaults to horizontal. A vertical Divider needs an explicit height from its container (flex/grid context) to actually render a visible line — it doesn't invent a height on its own the way a horizontal rule fills its container's width.

<Divider />

<div className="flex h-6 items-center gap-3">
  <span>Profile</span>
  <Divider orientation="vertical" />
  <span>Settings</span>
</div>

Inset variants

variant controls how the line relates to its container's edges: fullWidth (the default) spans edge to edge; inset stops short of one end (useful in a list where the line shouldn't run under a leading icon); middle stops short of both ends.

<Divider variant="inset" />
<Divider variant="middle" />

Line style and color

lineStyle switches between solid (the default), dashed, and dotted. color takes the usual semantic palette, and thickness lets you override the line weight directly when the default doesn't match a specific design need.

<Divider lineStyle="dashed" color="primary" />
<Divider thickness={2} />

Labeled dividers

Pass children and Divider renders as two line segments with the content between them — the standard "OR" pattern between two sign-in options, a date separator in a message list, a small section label inline in a long form. labelPlacement moves the label toward the start, center (default), or end of the line.

<Divider>OR</Divider>
<Divider labelPlacement="start">Yesterday</Divider>

Props

The full public API for Divider. Every prop is stable and intentionally typed.

Accessibility

• •Renders as a semantic separator (not a plain styled <div>), so assistive technology recognizes it as a content boundary rather than an unlabeled decorative element.
• •A labeled Divider's text content is real, readable text — not an image or a background-only visual trick — so it's announced the same way any other inline text would be.

Best practices

• ◆Use a vertical Divider inside a flex row with an explicit height (h-6, h-full, etc.) — without one it collapses to zero height and renders invisibly, which reads as a bug rather than a missing style.
• ◆Reserve variant="inset"/"middle" for list-style contexts where the line needs to visually align with adjacent icons or padding; default to fullWidth everywhere else.
• ◆Keep labeled-divider text very short ("OR", a date, a single section word) — it's a line label, not a heading.
• ◆Prefer Divider over an ad-hoc border-top/border-bottom utility class when the separator carries semantic meaning (separating real sections) rather than being purely decorative spacing.