New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Tv Material Compose

Button

Android

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].

Last updated:

Installation

dependencies {
   implementation("androidx.tv:tv-material:1.0.0-beta01")
}

Overloads

@Composable
@NonRestartableComposable
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
)

Parameters

namedescription
onClickcalled when this button is clicked
modifierthe [Modifier] to be applied to this button
onLongClickcalled when this button is long clicked (long-pressed).
enabledcontrols 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.
scaleDefines size of the Button relative to its original size.
glowShadow to be shown behind the Button.
shapeDefines the Button's shape.
colorsColor to be used for background and content of the Button
tonalElevationtonal elevation used to apply a color shift to the button to give the it higher emphasis
borderDefines a border around the Button.
contentPaddingthe spacing values to apply internally between the container and the content
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s 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.
contentthe content of the button

Code Examples

ButtonSample

@Composable
@Sampled
fun ButtonSample() {
    Button(onClick = { }) {
        Text("Button")
    }
}

LikeButtonSample

@Composable
@Sampled
fun LikeButtonSample() {
    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")
    }
}