Divider
The `Divider` component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy.
The Divider component is a thin, subtle line for separating content in your interface.
Basic Divider
By default, the Divider renders as a full-width horizontal line.
Variants
The Divider supports three variants: fullWidth (default), inset, and middle.
Vertical Divider
Use orientation="vertical" to render a vertical divider. The flexItem prop ensures proper height in flex containers.
Divider with Text
You can render text or other elements within the divider using children. Use textAlign to control alignment.
List Divider
When using dividers in lists, set component="li" to ensure valid HTML structure.
- Inbox
- Drafts
- Trash
Section Separators
Use dividers to separate distinct sections in a layout, combined with proper spacing.
Icon Grouping
Use vertical dividers with the middle variant to group related actions in toolbars.
