Divider
The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability.
Dividers help organize content and improve scannability by separating groups of related elements. Use them sparingly to maintain visual clarity without creating unnecessary noise.
Variants
The Divider component supports three variants: fullWidth (default), inset, and middle.
Full Width
The default variant spans the full width of its container.
Inset
The inset variant adds left padding, useful when aligning with indented list items.
Middle
The middle variant shortens the divider on both sides.
Orientation
Use the orientation prop to render vertical dividers. Vertical dividers are useful for separating items in toolbars or button groups.
Divider with Text
You can center an element between divider lines using children. Use the textAlign prop to align the content.
List Divider
When using the Divider to separate items in a list, render it as an <li> using the component prop.
- Inbox
- Drafts
- Trash
