OutlinedButton

Material Design outlined button for TV.

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but are not the primary action in an app. Outlined buttons pair well with [Button]s to indicate an alternative, secondary action.

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

Installation

This component is available for Jetpack Compose (Android)

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

Overloads

@Composable
@NonRestartableComposable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    scale: ButtonScale = OutlinedButtonDefaults.scale(),
    glow: ButtonGlow = OutlinedButtonDefaults.glow(),
    shape: ButtonShape = OutlinedButtonDefaults.shape(),
    colors: ButtonColors = OutlinedButtonDefaults.colors(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = OutlinedButtonDefaults.border(),
    contentPadding: PaddingValues = OutlinedButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
)

Parameters

name	description
`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.
`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.
`colors`	Color to be used for background and 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
`interactionSource`	an 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.
`content`	the content of the button

Code Example

OutlinedButtonSample

@Composable
fun OutlinedButtonSample() {
    OutlinedButton(onClick = {}) {
        Text("Outlined Button")
    }
}