New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Tv Material Compose

WideButton

Android

Material Design wide button for TV.

Last updated:

Installation

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

Overloads

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

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.
interactionSourcea 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.
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
@Composable
@NonRestartableComposable
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

namedescription
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 [Interaction]s 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
@Sampled
fun WideButtonSample() {
    WideButton(onClick = { }) {
        Text("Settings")
    }
}

WideButtonWithIcon

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

WideButtonWithSubtitle

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

WideButtonWithIconAndSubtitle

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