# 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

```kotlin
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.

## Related components

- [List](https://m3e.ljzapps.app/docs/components/list.md)
- [Card](https://m3e.ljzapps.app/docs/components/card.md)