Dividers are thin lines that separate content into clear groups. Lumo UI provides both horizontal and vertical dividers.
HorizontalDivider
A horizontal line used to separate content vertically.
modifier
Modifier
default:"Modifier"
Modifier to be applied to the divider
thickness
Dp
default:"DividerDefaults.Thickness (1.dp)"
Thickness of the divider line
color
Color
default:"DividerDefaults.color"
Color of the divider. Defaults to AppTheme.colors.surface
VerticalDivider
A vertical line used to separate content horizontally.
modifier
Modifier
default:"Modifier"
Modifier to be applied to the divider
thickness
Dp
default:"DividerDefaults.Thickness (1.dp)"
Thickness of the divider line
color
Color
default:"DividerDefaults.color"
Color of the divider. Defaults to AppTheme.colors.surface
Usage Examples
Basic Horizontal Divider
Column {
Text("Item 1")
HorizontalDivider()
Text("Item 2")
HorizontalDivider()
Text("Item 3")
}
Horizontal Divider with Custom Styling
HorizontalDivider(
modifier = Modifier.padding(vertical = 8.dp),
thickness = 2.dp,
color = AppTheme.colors.primary
)
Vertical Divider in Row
Row(
modifier = Modifier.height(48.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text("Left")
VerticalDivider(
modifier = Modifier.padding(horizontal = 16.dp)
)
Text("Center")
VerticalDivider(
modifier = Modifier.padding(horizontal = 16.dp)
)
Text("Right")
}
Vertical Divider with Custom Styling
VerticalDivider(
modifier = Modifier.padding(horizontal = 8.dp),
thickness = 2.dp,
color = Color.Gray
)
Full-Width Divider
HorizontalDivider(
modifier = Modifier.fillMaxWidth()
)
Divider in LazyColumn
LazyColumn {
items(items) { item ->
Text(item.title)
HorizontalDivider(
modifier = Modifier.padding(vertical = 4.dp)
)
}
}
Divider with Inset
Column {
ListItem(
headlineContent = { Text("Item 1") },
leadingContent = { Icon(Icons.Default.Person, null) }
)
HorizontalDivider(
modifier = Modifier.padding(start = 56.dp) // Align with content
)
ListItem(
headlineContent = { Text("Item 2") },
leadingContent = { Icon(Icons.Default.Email, null) }
)
}
Thick Divider as Section Separator
Column {
Text("Section 1", style = AppTheme.typography.h2)
// Content
HorizontalDivider(
modifier = Modifier.padding(vertical = 24.dp),
thickness = 4.dp,
color = AppTheme.colors.primary
)
Text("Section 2", style = AppTheme.typography.h2)
// Content
}
Vertical Divider Full Height
Row(modifier = Modifier.height(200.dp)) {
Column(modifier = Modifier.weight(1f)) {
Text("Left content")
}
VerticalDivider(
modifier = Modifier.fillMaxHeight()
)
Column(modifier = Modifier.weight(1f)) {
Text("Right content")
}
}
Styling Options
Thickness Variants
// Thin divider
HorizontalDivider(thickness = 0.5.dp)
// Normal divider (default)
HorizontalDivider(thickness = 1.dp)
// Thick divider
HorizontalDivider(thickness = 4.dp)
Color Variants
// Theme color
HorizontalDivider(color = AppTheme.colors.surface)
// Custom color
HorizontalDivider(color = Color(0xFFE0E0E0))
// Primary color
HorizontalDivider(color = AppTheme.colors.primary)
// Transparent
HorizontalDivider(color = Color.Transparent)
Best Practices
- Spacing: Add padding around dividers for better visual separation
HorizontalDivider(
modifier = Modifier.padding(vertical = 8.dp)
)
- Inset dividers: Align with content when used in lists
HorizontalDivider(
modifier = Modifier.padding(start = iconSize + spacing)
)
-
Thickness: Use default 1dp for most cases, thicker for major section breaks
-
Color contrast: Ensure sufficient contrast with background
-
Avoid overuse: Don’t use dividers between every single item
Implementation Details
Dividers are implemented using Canvas for efficient rendering:
HorizontalDivider: Fills width and draws a horizontal lineVerticalDivider: Fills height and draws a vertical line- Both use
drawLine for rendering the divider line
Source Reference
Divider component implementation: components-lab/src/commonMain/kotlin/com/nomanr/lumo/ui/components/Divider.kt