surface

surface

@Composable
public fun Modifier.surface(
    enabled: Boolean = true,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    depthEffect: SurfaceDepthEffect? = null,
    border: BorderStroke? = SurfaceDefaults.border(),
    interactionSource: InteractionSource? = null,
): Modifier

A surface is a fundamental building block in Glimmer. A surface represents a distinct visual area or 'physical' boundary for components such as buttons and cards. A surface implements shared visual decoration for Jetpack Compose Glimmer components: 1) Clipping: a surface clips its children to the shape specified by shape 2) Border: a surface draws an inner border to emphasize the boundary of the component. When focused, a surface draws a wider border with a focused highlight on top to indicate the focus state. 3) Background: a surface has a background color of color. 4) Depth effect: a surface can have different DepthEffect shadows for different states, as specified by depthEffect. 5) Content color: a surface provides a contentColor for text and icons inside the surface. By default this is calculated from the provided background color. 6) Interaction states: when focused, a surface displays draws a wider border with a focused highlight on top. When pressed, a surface draws a pressed overlay. This happens for interactions emitted from interactionSource.

Use surface on its own for decorative elements that cannot be interacted with by a user:

In most cases surfaces should be interactive, to allow users to consistently move focus and navigate between components. You can use androidx.compose.foundation.focusable for focus-only surfaces, or androidx.compose.foundation.clickable and other modifiers for surfaces with actions. To ensure the surface correctly reflects the interaction states, provide the same InteractionSource to all modifiers.

For example, to create a clickable surface:

Similarly, to create a focusable surface:

Parameters