<h2 id="surface-focusable-shape-color-contentcolor-deptheffect-border-interactionsource">surface</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@Composable
public fun Modifier.surface(
    focusable: Boolean = true,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    depthEffect: SurfaceDepthEffect? = null,
    border: BorderStroke? = SurfaceDefaults.border(),
    interactionSource: MutableInteractionSource? = 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 is responsible for:
1) Clipping: a surface clips its children to the shape specified by [shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape)
2) Border: a surface draws an inner [border](/jetpack-compose/androidx.tv/tv-material/classes/Border) to emphasize the boundary of the component.
3) Background: a surface has a background color of [color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color).
4) Depth effect: a surface can have different [DepthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/DepthEffect) shadows for different states, as  specified by [depthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/modifiers/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](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/InteractionSource), whether this surface is [focusable](/jetpack-compose/androidx.compose.foundation/foundation/modifiers/focusable) or not.

This surface is focusable by default - set [focusable](/jetpack-compose/androidx.compose.foundation/foundation/modifiers/focusable) to false for un-interactive / decorative
surfaces. For handling clicks, use the other [surface](/jetpack-compose/androidx.xr.glimmer/glimmer/composable-functions/surface) overload with an `onClick` parameter.

Simple usage:

For custom gesture handling, add the gesture modifier after this [surface](/jetpack-compose/androidx.xr.glimmer/glimmer/composable-functions/surface), and provide a shared
[MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) to enable this surface to handle focus / press states. You should also
pass `false` for [focusable](/jetpack-compose/androidx.compose.foundation/foundation/modifiers/focusable) if that modifier already includes a focus target by default. For
example, to create a toggleable surface:

#### Parameters

| | |
| --- | --- |
| focusable | whether this surface is focusable, true by default. Most surfaces should be focusable to allow navigation between surfaces in a screen. Unfocusable surfaces may be used for decorative only elements, such as surfaces used in a compound component with a separate focusable area. |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape) used to clip this surface, and also used to draw the background and border |
| color | the background [Color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color) for this surface |
| contentColor | the [Color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color) for content inside this surface |
| depthEffect | the [SurfaceDepthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/SurfaceDepthEffect) for this surface, representing the [DepthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/DepthEffect) shadows rendered in different states. |
| border | an optional inner border for this surface |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s for this surface. Note that if `null` is provided, interactions will still happen internally. |

<hr class="docs-overload-divider">

<h2 id="surface-enabled-shape-color-contentcolor-deptheffect-border-interactionsource-onclick">surface</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@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: MutableInteractionSource? = null,
    onClick: () -> Unit,
): 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 is responsible for:
1) Clipping: a surface clips its children to the shape specified by [shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape)
2) Border: a surface draws an inner [border](/jetpack-compose/androidx.tv/tv-material/classes/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](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color).
4) Depth effect: a surface can have different [DepthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/DepthEffect) shadows for different states, as  specified by [depthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/modifiers/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](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/InteractionSource), whether this surface is [enabled](/jetpack-compose/androidx.compose.remote/remote-creation-compose/properties/enabled) or not.

This surface is focusable and handles clicks. For non-clickable surfaces, use the other overload
of [surface](/jetpack-compose/androidx.xr.glimmer/glimmer/composable-functions/surface) instead. For surfaces with custom gesture handling, refer to the sample and guidance
on the other overload of [surface](/jetpack-compose/androidx.xr.glimmer/glimmer/composable-functions/surface).

#### Parameters

| | |
| --- | --- |
| enabled | whether this surface is enabled, true by default. When false, this surface will not respond to user input, and will not be focusable. |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape) used to clip this surface, and also used to draw the background and border |
| color | the background [Color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color) for this surface |
| contentColor | the [Color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color) for content inside this surface |
| depthEffect | the [SurfaceDepthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/SurfaceDepthEffect) for this surface, representing the [DepthEffect](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/DepthEffect) shadows rendered in different states. |
| border | an optional inner border for this surface |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s for this surface. Note that if `null` is provided, interactions will still happen internally. |
| onClick | callback invoked when this surface is clicked |