WideButton

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
onClick called when this button is clicked
modifier the Modifier to be applied to this button
onLongClick called when this button is long clicked (long-pressed).
enabled 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 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 the background to be applied to the WideButton
scale Defines size of the Button relative to its original size.
glow Shadow to be shown behind the Button.
shape Defines the Button's shape.
contentColor Color to be used for the text content of the Button
tonalElevation tonal elevation used to apply a color shift to the button to give the it higher emphasis
border Defines a border around the Button.
contentPadding the spacing values to apply internally between the container and the content
content the 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
onClick called when this button is clicked
title the title content of the button, typically a Text
modifier the Modifier to be applied to this button
onLongClick called when this button is long clicked (long-pressed).
enabled 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 the leading icon content of the button, typically an Icon
subtitle the subtitle content of the button, typically a Text
interactionSource 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 the background to be applied to the WideButton
scale Defines size of the Button relative to its original size.
glow Shadow to be shown behind the Button.
shape Defines the Button's shape.
contentColor Color to be used for the text content of the Button
tonalElevation tonal elevation used to apply a color shift to the button to give the it higher emphasis
border Defines a border around the Button.
contentPadding the 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") },
    )
}
View all →
View all →