Skip to content
Layout

Surface

Elevation, shape, and color for a sheet of content

Surface is the foundational container behind most Material components. It applies a background color, clips to a shape, and raises content with tonal elevation that tints the surface toward the primary color.

Surface demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Elevation, shape & color

Different tonal elevations, shapes, and container colors.

Kotlin
Surface(tonalElevation = 4.dp, shape = RoundedCornerShape(12.dp)) {
    Text("Elevated", Modifier.padding(16.dp))
}
Surface(
    shape = RoundedCornerShape(12.dp),
    color = MaterialTheme.colorScheme.primaryContainer
) {
    Text("Primary container", Modifier.padding(16.dp))
}
Surface(
    shape = RoundedCornerShape(12.dp),
    color = MaterialTheme.colorScheme.secondaryContainer
) {
    Text("Secondary container", Modifier.padding(16.dp))
}