WideButton

Composable Component

Material Design wide button for TV.

Android
@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,
)

Parameters

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.
interactionSourcea 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.
backgroundthe background to be applied to the WideButton
scaleDefines size of the Button relative to its original size.
glowShadow to be shown behind the Button.
shapeDefines the Button's shape.
contentColorColor to be used for the text 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
contentthe content of the button
Android
@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,
)

Parameters

onClickcalled when this button is clicked
titlethe title content of the button, typically a Text
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.
iconthe leading icon content of the button, typically an Icon
subtitlethe subtitle content of the button, typically a Text
interactionSourcea 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.
backgroundthe background to be applied to the WideButton
scaleDefines size of the Button relative to its original size.
glowShadow to be shown behind the Button.
shapeDefines the Button's shape.
contentColorColor to be used for the text 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

Code Examples

WideButtonSample

@Composable
fun WideButtonSample() {
    WideButton(onClick = {}) { Text("Settings") }
}

WideButtonWithIcon

@Composable
fun WideButtonWithIcon() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") },
    )
}

WideButtonWithIconAndSubtitle

@Composable
fun WideButtonWithIconAndSubtitle() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        subtitle = { Text(text = "Update device preferences") },
        icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") },
    )
}

WideButtonWithSubtitle

@Composable
fun WideButtonWithSubtitle() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        subtitle = { Text(text = "Update device preferences") },
    )
}