Divider

A one-pixel line that separates content into groups — horizontal or vertical.

import { Divider } from "@brijbyte/md3-react/divider";

@import "@brijbyte/md3-react/divider.css";

Variants

A divider is a thin (1dp) line in the outline-variant color that groups related content — list items, toolbar sections, list columns. Default is a full-width horizontal line; pass orientation="vertical" for a vertical rule that stretches to its flex container's height.

Use insets to align the line with content instead of the container edge: insetStart clears the leading 16dp (e.g. to start past a list item's leading icon), insetEnd the trailing 16dp, and inset both.

Full-width divider

Inset divider (leading 16dp)

Inset both ends

Trailing content

Drafts

Sent

Accessibility

The divider wraps Base UI's Separator, rendering an element with role="separator" and aria-orientation set from orientation. Use one to separate content that is genuinely distinct; for purely decorative spacing, prefer margins so nothing extra is announced.