---
title: "Surface"
description: "The `Surface` is a building block component that will be used for any element on TV such as
buttons, cards, navigation, or a simple background etc. This non-interactive Surface is similar
to Compose Material's Surface composable"
type: "component"
---

<div class='type'>Composable Component</div>



The `Surface` is a building block component that will be used for any element on TV such as
buttons, cards, navigation, or a simple background etc. This non-interactive Surface is similar
to Compose Material's Surface composable

<a id='references'></a>

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


```kotlin
@Composable
fun Surface(
    modifier: Modifier = Modifier,
    tonalElevation: Dp = 0.dp,
    shape: Shape = SurfaceDefaults.shape,
    colors: SurfaceColors = SurfaceDefaults.colors(),
    border: Border = SurfaceDefaults.border,
    glow: Glow = SurfaceDefaults.glow,
    content: @Composable (BoxScope.() -> Unit),
)
```


#### Parameters

| | |
| --- | --- |
| modifier | Modifier to be applied to the layout corresponding to the surface |
| tonalElevation | When `colors` is `ColorScheme.surface`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme. |
| shape | Defines the surface's shape. |
| colors | Defines the background & content color to be used in this Surface. See `SurfaceDefaults.colors`. |
| border | Defines a border around the Surface. |
| glow | Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS |
| content | defines the `Composable` content inside the surface |




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


```kotlin
@Composable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    tonalElevation: Dp = 0.dp,
    shape: ClickableSurfaceShape = ClickableSurfaceDefaults.shape(),
    colors: ClickableSurfaceColors = ClickableSurfaceDefaults.colors(),
    scale: ClickableSurfaceScale = ClickableSurfaceDefaults.scale(),
    border: ClickableSurfaceBorder = ClickableSurfaceDefaults.border(),
    glow: ClickableSurfaceGlow = ClickableSurfaceDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable (BoxScope.() -> Unit),
)
```


#### Parameters

| | |
| --- | --- |
| onClick | callback to be called when the surface is clicked. Note: DPad Enter button won't work if this value is null |
| modifier | Modifier to be applied to the layout corresponding to the surface |
| onLongClick | callback to be called when the surface is long clicked (long-pressed). |
| enabled | Controls the enabled state of the surface. When `false`, this Surface will not be clickable. A disabled surface will still be focusable (reason: https://issuetracker.google.com/302955429). If you still want it to not be focusable, consider using the Non-interactive variant of the Surface. |
| tonalElevation | When `colors` is `ColorScheme.surface`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme. |
| shape | Defines the surface's shape. |
| colors | Defines the background & content colors to be used in this surface for different interaction states. See `ClickableSurfaceDefaults.colors`. |
| scale | Defines size of the Surface relative to its original size. |
| border | Defines a border around the Surface. |
| glow | Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | defines the `Composable` content inside the surface |




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


```kotlin
@Composable
fun Surface(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    tonalElevation: Dp = Elevation.Level0,
    shape: SelectableSurfaceShape = SelectableSurfaceDefaults.shape(),
    colors: SelectableSurfaceColors = SelectableSurfaceDefaults.colors(),
    scale: SelectableSurfaceScale = SelectableSurfaceDefaults.scale(),
    border: SelectableSurfaceBorder = SelectableSurfaceDefaults.border(),
    glow: SelectableSurfaceGlow = SelectableSurfaceDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable (BoxScope.() -> Unit),
)
```


#### Parameters

| | |
| --- | --- |
| selected | whether or not this Surface is selected |
| onClick | callback to be invoked when the selectable Surface is clicked. |
| modifier | `Modifier` to be applied to the layout corresponding to the surface |
| onLongClick | callback to be called when the selectable surface is long clicked (long-pressed). |
| enabled | Controls the enabled state of the surface. When `false`, this Surface will not be clickable. A disabled surface will still be focusable (reason: https://issuetracker.google.com/302955429). If you still want it to not be focusable, consider using the Non-interactive variant of the Surface. |
| tonalElevation | When `colors` is `ColorScheme.surface`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme. |
| shape | Defines the surface's shape. |
| colors | Defines the background & content colors to be used in this surface for different interaction states. See `SelectableSurfaceDefaults.colors`. |
| scale | Defines size of the Surface relative to its original size. |
| border | Defines a border around the Surface. |
| glow | Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | defines the `Composable` content inside the surface |