TextButton

Component in Wear Material 3 Compose

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]. The recommended text styles for each corresponding button size are [TextButtonDefaults.defaultButtonTextStyle], [TextButtonDefaults.largeButtonTextStyle] and [TextButtonDefaults.smallButtonTextStyle].

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: 2024-09-07 14:23

Installation

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

Overloads

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

Parameters

name	description
onClick	Will be called when the user clicks the button.
modifier	Modifier to be applied to the button.
onLongClick	Called when this button is long clicked (long-pressed). When this callback is set, [onLongClickLabel] should be set as well.
onLongClickLabel	Semantic / accessibility label for the [onLongClick] action.
enabled	Controls the enabled state of the button. When false, this button will not be clickable.
shape	Defines 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.
border	Optional [BorderStroke] that will be used to resolve the text button border in different states. See [ButtonDefaults.outlinedButtonBorder].
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 displayed on the text button, expected to be text or image.

Code Examples

TextButtonSample

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

LargeFilledTonalTextButtonSample

@Composable
fun LargeFilledTonalTextButtonSample() {
    TextButton(
        onClick = { /* Do something */ },
        colors = TextButtonDefaults.filledTonalTextButtonColors(),
        modifier = Modifier.size(TextButtonDefaults.LargeButtonSize)
    ) {
        Text(text = "ABC", style = TextButtonDefaults.largeButtonTextStyle)
    }
}

TextButtonWithOnLongClickSample

@Composable
fun TextButtonWithOnLongClickSample(onLongClick: () -> Unit) {
    TextButton(
        onClick = { /* Do something for onClick*/ },
        onLongClick = onLongClick,
        onLongClickLabel = "Long click"
    ) {
        Text(text = "ABC")
    }
}

TextButtonWithCornerAnimationSample

@Composable
fun TextButtonWithCornerAnimationSample() {
    val interactionSource = remember { MutableInteractionSource() }
    TextButton(
        onClick = { /* Do something */ },
        shape = TextButtonDefaults.animatedShape(interactionSource),
        interactionSource = interactionSource
    ) {
        Text(text = "ABC")
    }
}