Divider
A thin line that groups content in lists and layouts.
- Category: Containment
- API status: Stable
- Compose APIs:
HorizontalDivider,VerticalDivider,DividerDefaults - Interactive page: https://m3e.ljzapps.app/#components/divider
When to use
Use a divider to separate related items inside a surface. Prefer spacing or a change of container color when a divider is not needed. Dividers use the outlineVariant color role.
Playground
The interactive page has a playground with live property controls for this component and generated code.
Examples
Between sections
Column(Modifier.fillMaxWidth()) {
Text("Inbox", style = MaterialTheme.typography.titleMedium)
HorizontalDivider(Modifier.padding(vertical = 12.dp))
Text("Starred", style = MaterialTheme.typography.titleMedium)
}
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
thickness | Dp | DividerDefaults.Thickness | Line thickness. |
color | Color | DividerDefaults.color | Defaults to outlineVariant. |
Guidelines
Do:
- Use sparingly.
- Inset dividers to align with text in lists.
Don't:
- Do not use dividers between every list item in a card.
- Do not use outline as the color.
Accessibility
- Dividers are decorative and are skipped by screen readers. Do not use them to convey meaning.