New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material 3 Compose

TextButton

Android

Wear Material [TextButton] is a circular, text-only button with transparent background and no border. It offers a single slot for text.

Set the size of the [TextButton] with [Modifier.touchTargetAwareSize] to ensure that the recommended minimum touch target size is available. The recommended [TextButton] sizes are [TextButtonDefaults.DefaultButtonSize], [TextButtonDefaults.LargeButtonSize] and [TextButtonDefaults.SmallButtonSize]. [TextButton] uses [Typography.labelMedium] by default and this should be overridden to [Typography.labelLarge] when using [TextButtonDefaults.LargeButtonSize].

The default [TextButton] has no border and a transparent background for low emphasis actions. For actions that require high emphasis, set [colors] to [TextButtonDefaults.filledTextButtonColors]. For a medium-emphasis, outlined [TextButton], set [border] to [ButtonDefaults.outlinedButtonBorder]. For a middle ground between outlined and filled, set [colors] to [TextButtonDefaults.filledTonalTextButtonColors].

[TextButton] can be enabled or disabled. A disabled button will not respond to click events.

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha23")
}

Overloads

@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = TextButtonDefaults.shape,
    colors: TextButtonColors = TextButtonDefaults.textButtonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit,
)

Parameters

namedescription
onClickWill be called when the user clicks the button.
modifierModifier to be applied to the button.
enabledControls the enabled state of the button. When false, this button will not be clickable.
shapeDefines the text button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme.
colors[TextButtonColors] that will be used to resolve the background and content color for this button in different states.
borderOptional [BorderStroke] that will be used to resolve the text button border in different states. See [ButtonDefaults.outlinedButtonBorder].
interactionSourcean 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.
contentThe content displayed on the text button, expected to be text or image.

Code Examples

TextButtonSample

@Sampled
@Composable
fun TextButtonSample() {
    TextButton(onClick = { /* Do something */ }) {
        Text(text = "ABC")
    }
}

LargeFilledTonalTextButtonSample

@Sampled
@Composable
fun LargeFilledTonalTextButtonSample() {
    TextButton(
        onClick = { /* Do something */ },
        colors = TextButtonDefaults.filledTonalTextButtonColors(),
        modifier = Modifier.size(TextButtonDefaults.LargeButtonSize)
    ) {
        // For large TextButton, use [Typography.labelLarge].
        Text(text = "ABC", style = MaterialTheme.typography.labelLarge)
    }
}