surface

ClickableSurfaceSample

@Composable
fun ClickableSurfaceSample() {
    Box(Modifier.surface(onClick = {}).padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a clickable surface")
    }
}

SurfaceSample

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}

ToggleableSurfaceSample

@Composable
fun ToggleableSurfaceSample() {
    var checked by remember { mutableStateOf(false) }
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Disable focus on the surface, since toggleable is already focusable
                focusable = false,
                // Provide the same interaction source here and to toggleable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource,
            )
            .toggleable(
                value = checked,
                interactionSource = interactionSource,
                onValueChange = { checked = it },
            )
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("Checked: $checked")
    }
}