Between two groups of controls that do not need headings.
Between the body of a card and its row of actions.
Between groups of items in a long list.
Vertically, between pieces of metadata on one line: an author, a date, a read time.

Use something else when:

Two things are only too close together. That is margin, or a gap on the parent.
The break has a name. Use a heading, which separates and says what comes next.
The two sides are separate cards. The card edges already separate them.
Every row would get one. A line per row turns a list into a grid. Let row padding do it, and keep dividers for the boundaries between groups.

orientation sets the axis, horizontal or vertical, and vertical is a shorthand for it. Pass one of the two, not both.

A vertical divider needs a parent that lays it out. It takes its height from the line of text it sits in, so a bare <Divider vertical /> between two blocks has no height. Put it in a flex row, a Space or a line of text.
For the full height of a taller row, give it h-auto inside a flex row that stretches its items. A fixed height breaks when the row grows.
A vertical divider shows no title. children only render on a horizontal line, and a vertical one logs a warning instead.
Keep one axis per meaning across a view, so a vertical line does not mean a new section in one panel and something else in the next.

children is the title in the middle of the line. It takes any node, so an icon, a Tag or a count works too.

titlePlacement puts it at start, center (the default) or end. These flip in right-to-left layouts.
left and right still work, but stay on the same physical side in both directions. Use start and end unless that is what you want.
Coming from v5, check every orientation. In v5 it placed the title. In v6 it is the axis, and the title moved to titlePlacement. A leftover orientation="left" still works and warns once, so it is easy to miss.
Keep the title to a couple of words. A long one leaves two short stubs that no longer read as one line.

variant sets the line style: solid (the default), dashed, dotted or wave. Use one style per surface. Most of the time that is solid.

dashed and dotted suggest something provisional, or a boundary you can act on like a drop target. Save them for that.
Replace the dashed boolean. It draws the same line as variant="dashed" but logs no warning, so search your code for it.
wave draws a scalloped line, horizontal or vertical. Resize it with --wave-size, --wave-thickness and --wave-curve (0 to 2). An h-* utility stretches it instead.
A vertical wave between words is shorter than one full wave, so halve --wave-size to show a few crests.

size sets the margin above and below the line. The line's thickness and color come from the theme's lineWidth and colorSplit.

large is the default and the roomiest. Step down to medium or small to match the gap the divider sits in.
none removes the margin so the line sits flush, for the edge of a sticky header or a popup footer.
Left unset, it follows componentSize on ConfigProvider. Set it only where one divider should differ from its region.
On a vertical divider, small, medium and large do nothing. Only none applies.

plain shows the title at body weight instead of heading weight. It does nothing without a title.

Use the full weight when the title names a section the reader might scan for.
Use plain for a label on the line: “or” between two sign-in methods, a date in a feed.
Pick one per surface and keep it.
If the title is really a heading, use a heading. A real h2 joins the document outline, and a divider's title does not.

A component that builds its own markup usually draws its own dividers.

A Menu draws its own. Pass { type: "divider" } in items. A <Divider /> placed between menu entries splits a list that screen readers read as one.
The same goes for a dropdown's menu and a list whose rows already have a border. A divider there doubles the line.
Between groups of rows, a divider with a plain title names the group without a heading.
In a toolbar, use vertical dividers between kinds of action, like destructive and ordinary, not between every button.

On This Page