Skip to content
Containment

Divider

Horizontal and vertical thin separating lines

Dividers are thin lines that group content into sections. Use a HorizontalDivider between stacked items and a VerticalDivider inside a fixed-height row to separate side-by-side content.

Divider demos rendered in Compose Playground
Pixel-accurate preview · light theme
2 examples HorizontalVertical

Examples

01

Horizontal

Kotlin
Column {
    Text("Above the line")
    HorizontalDivider()
    Text("Below the line")
}
02

Vertical

A VerticalDivider needs a bounded height from its parent row.

Kotlin
Row(modifier = Modifier.height(24.dp)) {
    Text("Left")
    VerticalDivider()
    Text("Right")
}