Divider

MD3 divider: a thin outline-variant line that groups content in lists and layouts. Renders a native <hr>, horizontal or vertical.

Horizontal

Above

---

Below

<Divider />

Inset

variant="inset" indents the start by 16dp (e.g. to align with list text); variant="middle-inset" indents both ends.

Item one

---

Item two

---

Item three

Item one

---

Item two

---

Item three

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

Vertical

orientation="vertical" stretches to the height of its flex / grid row.

Bold

---

Italic

---

Underline

<div style={{ display: 'flex', gap: 16 }}>
  <span>Bold</span>
  <Divider orientation="vertical" />
  <span>Italic</span>
</div>

Decorative vs. semantic

Dividers are decorative by default: they are hidden from assistive technology (aria-hidden), matching MD3 and Compose. When the line marks a real thematic break, pass decorative={false} — it is then exposed as a separator (the implicit role of <hr>, plus aria-orientation="vertical" for vertical dividers).

Chapter one ends here.

---

Chapter two begins.

<Divider decorative={false} />

Accessibility

• Decorative by default (aria-hidden), so screen readers don't announce a separator between every list row. Use decorative={false} for a meaningful section break.
• MD3 treats dividers as decorative, so they have no contrast minimum. In forced-colors mode (Windows High Contrast) the line is drawn with the system CanvasText color so it stays visible.

Props

Prop	Type	Default	Description
decorative	boolean	true	Whether the divider is purely decorative. MD3 dividers are decorative elements (Compose draws them without semantics), so by default the divider is hidden from assistive technology (`aria-hidden`). Pass `decorative={false}` for a meaningful thematic break — it is then exposed as a separator (the implicit role of `<hr>`; a vertical divider adds `aria-orientation="vertical"`).
orientation	enum	horizontal	Orientation. A vertical divider stretches to the height of its flex / grid row (`align-self: stretch`).
variant	enum	full-width	Layout variant.