Surface is the base component for creating material-like surfaces with shape, color, and elevation. It serves as the foundation for many other Lumo UI components.
Basic Surface
modifier
Modifier
default:"Modifier"
Modifier to be applied to the surface
shape
Shape
default:"RectangleShape"
Shape of the surface
color
Color
default:"AppTheme.colors.surface"
Background color of the surface
contentColor
Color
default:"contentColorFor(color)"
Color for content inside the surface. Automatically derived from background color
Elevation for casting shadow. Higher values create deeper shadows
border
BorderStroke?
default:"null"
Optional border to draw around the surface
content
@Composable () -> Unit
required
Content to be displayed inside the surface
Clickable Surface
For surfaces that respond to clicks:
Callback invoked when the surface is clicked
Controls the enabled state of the surface
interactionSource
MutableInteractionSource
default:"MutableInteractionSource()"
Source of interactions for the surface
Selectable Surface
For surfaces with selection state:
Whether the surface is currently selected
Callback invoked when the surface is clicked
Toggleable Surface
For surfaces with checked/unchecked state:
Whether the surface is currently checked
onCheckedChange
(Boolean) -> Unit
required
Callback invoked when the checked state changes
Usage Examples
Basic Surface
Surface(
modifier = Modifier.fillMaxSize(),
color = AppTheme.colors.surface
) {
Text("Content on surface")
}
Surface with Elevation
Surface(
modifier = Modifier.size(200.dp),
shape = RoundedCornerShape(16.dp),
shadowElevation = 8.dp,
color = AppTheme.colors.background
) {
// Content
}
Clickable Surface
Surface(
onClick = { /* Handle click */ },
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(12.dp),
color = AppTheme.colors.surface
) {
Text("Clickable surface")
}
Surface with Border
Surface(
modifier = Modifier.size(100.dp),
border = BorderStroke(2.dp, Color.Blue),
shape = CircleShape
) {
// Content
}
Selectable Surface
var selected by remember { mutableStateOf(false) }
Surface(
selected = selected,
onClick = { selected = !selected },
modifier = Modifier.fillMaxWidth(),
color = if (selected) {
AppTheme.colors.primary
} else {
AppTheme.colors.surface
}
) {
Text("Selectable surface")
}
Toggleable Surface
var checked by remember { mutableStateOf(false) }
Surface(
checked = checked,
onCheckedChange = { checked = it },
modifier = Modifier.size(100.dp)
) {
Icon(
imageVector = if (checked) Icons.Default.CheckCircle else Icons.Default.Circle,
contentDescription = null
)
}
Styling Options
Shape
Apply various shapes to the surface:
// Rounded corners
Surface(shape = RoundedCornerShape(16.dp)) { }
// Circle
Surface(shape = CircleShape) { }
// Cut corners
Surface(shape = CutCornerShape(8.dp)) { }
// Custom shape
Surface(shape = RoundedCornerShape(
topStart = 16.dp,
topEnd = 16.dp,
bottomStart = 0.dp,
bottomEnd = 0.dp
)) { }
Elevation and Shadow
Control the shadow depth:
// No elevation
Surface(shadowElevation = 0.dp) { }
// Small elevation
Surface(shadowElevation = 2.dp) { }
// Large elevation
Surface(shadowElevation = 16.dp) { }
AppTheme.colors.elevation.
Features
- Automatic Content Color: Automatically provides appropriate content color based on background color
- Ripple Effect: Clickable surfaces include ripple indication
- Accessibility: Proper semantics for screen readers
- Interaction States: Supports hover, press, focus, and drag states
- Composition Integration: Provides LocalContentColor to descendants
Source Reference
Surface component implementation: components-lab/src/commonMain/kotlin/com/nomanr/lumo/ui/components/Surface.kt