WideButton

Functions summary

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

Material Design wide button for TV.
Unit
@NonRestartableComposable
@Composable
WideButton(
    onClick: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    icon: (@Composable () -> Unit)?,
    subtitle: (@Composable () -> Unit)?,
    interactionSource: MutableInteractionSource,
    background: @Composable () -> Unit,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    contentColor: WideButtonContentColor,
    tonalElevation: Dp,
    border: ButtonBorder,
    contentPadding: PaddingValues
)

Material Design wide button for TV.

Functions

WideButton

@NonRestartableComposable
@Composable
fun WideButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource)
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design wide button for TV.

Samples:

import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(onClick = {}) { Text("Settings") }
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.
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

a 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.
background: @Composable () -> Unit = { WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource) }

the background to be applied to the WideButton
scale: ButtonScale = WideButtonDefaults.scale()

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

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

Defines the Button's shape.
contentColor: WideButtonContentColor = WideButtonDefaults.contentColor()

Color to be used for the text 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 = WideButtonDefaults.border()

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

the spacing values to apply internally between the container and the content
content: @Composable RowScope.() -> Unit

the content of the button

WideButton

@NonRestartableComposable
@Composable
fun WideButton(
    onClick: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource)
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding
): Unit

Material Design wide button for TV.

Samples:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Icon
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(
    onClick = {},
    title = { Text("Settings") },
    icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") },
)
 
import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(
    onClick = {},
    title = { Text("Settings") },
    subtitle = { Text(text = "Update device preferences") },
)
 
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Icon
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(
    onClick = {},
    title = { Text("Settings") },
    subtitle = { Text(text = "Update device preferences") },
    icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") },
)
Parameters
onClick: () -> Unit

called when this button is clicked
title: @Composable () -> Unit

the title content of the button, typically a Text
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.
icon: (@Composable () -> Unit)? = null

the leading icon content of the button, typically an Icon
subtitle: (@Composable () -> Unit)? = null

the subtitle content of the button, typically a Text
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

a 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.
background: @Composable () -> Unit = { WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource) }

the background to be applied to the WideButton
scale: ButtonScale = WideButtonDefaults.scale()

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

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

Defines the Button's shape.
contentColor: WideButtonContentColor = WideButtonDefaults.contentColor()

Color to be used for the text 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 = WideButtonDefaults.border()

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

the spacing values to apply internally between the container and the content