Button

Functions summary

Unit
@NonRestartableComposable
@Composable
Button(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    colors: ButtonColors,
    tonalElevation: Dp,
    border: ButtonBorder,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable RowScope.() -> Unit
)

Material Design filled button for TV.

Functions

Button

@NonRestartableComposable
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    scale: ButtonScale = ButtonDefaults.scale(),
    glow: ButtonGlow = ButtonDefaults.glow(),
    shape: ButtonShape = ButtonDefaults.shape(),
    colors: ButtonColors = ButtonDefaults.colors(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = ButtonDefaults.border(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design filled button for TV.

Filled buttons are for high emphasis (important, final actions that complete a flow).

Choose the best button for an action based on the amount of emphasis it needs. The more important an action is, the higher emphasis its button should be.

  • See Button for high emphasis (important, final actions that complete a flow).

  • See OutlinedButton for a medium-emphasis button with a border.

The default text style for internal Text components will be set to Typography.labelLarge.

Samples:

import androidx.tv.material3.Button
import androidx.tv.material3.Text

Button(onClick = {}) { Text("Button") }
 
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.ui.Modifier
import androidx.tv.material3.Button
import androidx.tv.material3.ButtonDefaults
import androidx.tv.material3.Icon
import androidx.tv.material3.Text

Button(
    onClick = { /* Do something! */ },
    contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
) {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.IconSize),
    )
    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
    Text("Like")
}
Parameters
onClick: () -> Unit

called when this button is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this button
onLongClick: (() -> Unit)? = null

called when this button is long clicked (long-pressed).
enabled: Boolean = true

controls the enabled state of this button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
scale: ButtonScale = ButtonDefaults.scale()

Defines size of the Button relative to its original size.
glow: ButtonGlow = ButtonDefaults.glow()

Shadow to be shown behind the Button.
shape: ButtonShape = ButtonDefaults.shape()

Defines the Button's shape.
colors: ButtonColors = ButtonDefaults.colors()

Color to be used for background and content of the Button
tonalElevation: Dp = Elevation.Level0

tonal elevation used to apply a color shift to the button to give the it higher emphasis
border: ButtonBorder = ButtonDefaults.border()

Defines a border around the Button.
contentPadding: PaddingValues = ButtonDefaults.ContentPadding

the spacing values to apply internally between the container and the content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable RowScope.() -> Unit

the content of the button