# Surface

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/NonRestartableComposable @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.tv.material3.SurfaceColors,androidx.tv.material3.Border,androidx.tv.material3.Glow,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/SurfaceColors, border: https://developer.android.com/reference/kotlin/androidx/tv/material3/Border, glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/Glow, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` The `https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.tv.material3.SurfaceColors,androidx.tv.material3.Border,androidx.tv.material3.Glow,kotlin.Function1)` is a building block component that will be used for any element on TV such as buttons, cards, navigation, or a simple background etc. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.tv.material3.ClickableSurfaceShape,androidx.tv.material3.ClickableSurfaceColors,androidx.tv.material3.ClickableSurfaceScale,androidx.tv.material3.ClickableSurfaceBorder,androidx.tv.material3.ClickableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shape: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceShape, colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceColors, scale: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceScale, border: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceBorder, glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceGlow, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` The `https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.tv.material3.ClickableSurfaceShape,androidx.tv.material3.ClickableSurfaceColors,androidx.tv.material3.ClickableSurfaceScale,androidx.tv.material3.ClickableSurfaceBorder,androidx.tv.material3.ClickableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.SelectableSurfaceShape,androidx.tv.material3.SelectableSurfaceColors,androidx.tv.material3.SelectableSurfaceScale,androidx.tv.material3.SelectableSurfaceBorder,androidx.tv.material3.SelectableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shape: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceShape, colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceColors, scale: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceScale, border: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceBorder, glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceGlow, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` The Surface is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc. |

## Functions

### Surface

Artifact: [androidx.tv:tv-material](https://developer.android.com/jetpack/androidx/releases/tv) [View Source](https://cs.android.com/search?q=file:androidx/tv/material3/Surface.kt+function:Surface)

```
@NonRestartableComposable
@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
): Unit
```

The `https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.tv.material3.SurfaceColors,androidx.tv.material3.Border,androidx.tv.material3.Glow,kotlin.Function1)` 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

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the layout corresponding to the surface |
| `tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | When `https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.tv.material3.SurfaceColors,androidx.tv.material3.Border,androidx.tv.material3.Glow,kotlin.Function1)` is `https://developer.android.com/reference/kotlin/androidx/tv/material3/ColorScheme#surface()`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SurfaceDefaults.shape` | Defines the surface's shape. |
| `colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/SurfaceColors = SurfaceDefaults.colors()` | Defines the background \& content color to be used in this Surface. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/SurfaceDefaults#colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`. |
| `border: https://developer.android.com/reference/kotlin/androidx/tv/material3/Border = SurfaceDefaults.border` | Defines a border around the Surface. |
| `glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/Glow = SurfaceDefaults.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: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` content inside the surface |

### Surface

Artifact: [androidx.tv:tv-material](https://developer.android.com/jetpack/androidx/releases/tv) [View Source](https://cs.android.com/search?q=file:androidx/tv/material3/Surface.kt+function:Surface)

```
@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
): Unit
```

The `https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.tv.material3.ClickableSurfaceShape,androidx.tv.material3.ClickableSurfaceColors,androidx.tv.material3.ClickableSurfaceScale,androidx.tv.material3.ClickableSurfaceBorder,androidx.tv.material3.ClickableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc. This clickable Surface is similar to Compose Material's Surface composable but will have more functionality that will make focus management easier. `https://developer.android.com/reference/kotlin/androidx/tv/material3/Surface.composable#Surface(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.tv.material3.ClickableSurfaceShape,androidx.tv.material3.ClickableSurfaceColors,androidx.tv.material3.ClickableSurfaceScale,androidx.tv.material3.ClickableSurfaceBorder,androidx.tv.material3.ClickableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` will automatically apply the relevant modifier(s) based on the current interaction state.

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to be called when the surface is clicked. Note: DPad Enter button won't work if this value is null |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the layout corresponding to the surface |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | callback to be called when the surface is long clicked (long-pressed). |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | 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: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | When `https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#Surface(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.tv.material3.ClickableSurfaceShape,androidx.tv.material3.ClickableSurfaceColors,androidx.tv.material3.ClickableSurfaceScale,androidx.tv.material3.ClickableSurfaceBorder,androidx.tv.material3.ClickableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is `https://developer.android.com/reference/kotlin/androidx/tv/material3/ColorScheme#surface()`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme. |
| `shape: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceShape = ClickableSurfaceDefaults.shape()` | Defines the surface's shape. |
| `colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceColors = ClickableSurfaceDefaults.colors()` | Defines the background \& content colors to be used in this surface for different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceDefaults#colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`. |
| `scale: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceScale = ClickableSurfaceDefaults.scale()` | Defines size of the Surface relative to its original size. |
| `border: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceBorder = ClickableSurfaceDefaults.border()` | Defines a border around the Surface. |
| `glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/ClickableSurfaceGlow = ClickableSurfaceDefaults.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: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` content inside the surface |

### Surface

Artifact: [androidx.tv:tv-material](https://developer.android.com/jetpack/androidx/releases/tv) [View Source](https://cs.android.com/search?q=file:androidx/tv/material3/Surface.kt+function:Surface)

```
@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
): Unit
```

The Surface is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc.

This version of Surface is responsible for a toggling its selected state as well as everything else that a regular Surface does:

This version of surface will react to the select toggles, calling `https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#Surface(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.SelectableSurfaceShape,androidx.tv.material3.SelectableSurfaceColors,androidx.tv.material3.SelectableSurfaceScale,androidx.tv.material3.SelectableSurfaceBorder,androidx.tv.material3.SelectableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` lambda, updating the `https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#Surface(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.SelectableSurfaceShape,androidx.tv.material3.SelectableSurfaceColors,androidx.tv.material3.SelectableSurfaceScale,androidx.tv.material3.SelectableSurfaceBorder,androidx.tv.material3.SelectableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction` occurs.

To manually retrieve the content color inside a surface, use `https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#LocalContentColor()`.

| Parameters |
|---|---|
| `selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether or not this Surface is selected |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to be invoked when the selectable Surface is clicked. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to the layout corresponding to the surface |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | 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. |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | callback to be called when the selectable surface is long clicked (long-pressed). |
| `tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Elevation.Level0` | When `https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#Surface(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.SelectableSurfaceShape,androidx.tv.material3.SelectableSurfaceColors,androidx.tv.material3.SelectableSurfaceScale,androidx.tv.material3.SelectableSurfaceBorder,androidx.tv.material3.SelectableSurfaceGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is `https://developer.android.com/reference/kotlin/androidx/tv/material3/ColorScheme#surface()`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme. |
| `shape: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceShape = SelectableSurfaceDefaults.shape()` | Defines the surface's shape. |
| `colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceColors = SelectableSurfaceDefaults.colors()` | Defines the background \& content colors to be used in this surface for different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceDefaults#colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`. |
| `scale: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceScale = SelectableSurfaceDefaults.scale()` | Defines size of the Surface relative to its original size. |
| `border: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceBorder = SelectableSurfaceDefaults.border()` | Defines a border around the Surface. |
| `glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/SelectableSurfaceGlow = SelectableSurfaceDefaults.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: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` content inside the surface |