TextToggleButton

Component in Wear Material 3 Compose

Wear Material [TextToggleButton] is a filled text toggle button which switches between primary colors and tonal colors depending on [checked] value, and offers a single slot for text.

Set the size of the [TextToggleButton] with Modifier.[touchTargetAwareSize] to ensure that the background padding will correctly reach the edge of the minimum touch target. The recommended [TextToggleButton] sizes are [TextToggleButtonDefaults.DefaultButtonSize], [TextToggleButtonDefaults.LargeButtonSize] and [TextToggleButtonDefaults.ExtraLargeButtonSize]. The recommended text styles for each corresponding button size are [TextToggleButtonDefaults.defaultButtonTextStyle], [TextToggleButtonDefaults.largeButtonTextStyle] and [TextToggleButtonDefaults.extraLargeButtonTextStyle].

[TextToggleButton] can be enabled or disabled. A disabled button will not respond to click events. When enabled, the checked and unchecked events are propagated by [onCheckedChange].

A simple text toggle button using the default colors, animated when pressed.

Last updated: 2024-10-22 13:47

Installation

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

Overloads

@Composable
fun TextToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: TextToggleButtonColors = TextToggleButtonDefaults.textToggleButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shapes: TextToggleButtonShapes = TextToggleButtonDefaults.shapes(),
    border: BorderStroke? = null,
    content: @Composable BoxScope.() -> Unit,
)

Parameters

name	description
checked	Boolean flag indicating whether this toggle button is currently checked.
onCheckedChange	Callback to be invoked when this toggle button is clicked.
modifier	Modifier to be applied to the toggle button.
enabled	Controls the enabled state of the toggle button. When false, this toggle button will not be clickable.
colors	[TextToggleButtonColors] that will be used to resolve the container and content color for this toggle button.
interactionSource	an optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this toggle button. You can use this to change the toggle button's appearance or preview the toggle button in different states. Note that if null is provided, interactions will still happen internally.
shapes	Defines the shape for this toggle button. Defaults to a static shape based on [TextToggleButtonDefaults.shape], but animated versions are available through [TextToggleButtonDefaults.animatedShapes] and [TextToggleButtonDefaults.variantAnimatedShapes].
border	Optional [BorderStroke] for the [TextToggleButton].
content	The text to be drawn inside the toggle button.

Code Examples

TextToggleButtonSample

@Composable
fun TextToggleButtonSample() {
    var checked by remember { mutableStateOf(true) }
    TextToggleButton(
        checked = checked,
        onCheckedChange = { checked = !checked },
        shapes = TextToggleButtonDefaults.animatedShapes(),
    ) {
        Text(text = if (checked) "On" else "Off")
    }
}

TextToggleButtonVariantSample

@Composable
fun TextToggleButtonVariantSample() {
    var checked by remember { mutableStateOf(true) }
    TextToggleButton(
        checked = checked,
        onCheckedChange = { checked = !checked },
        shapes = TextToggleButtonDefaults.variantAnimatedShapes()
    ) {
        Text(text = if (checked) "On" else "Off")
    }
}

LargeTextToggleButtonSample

@Composable
fun LargeTextToggleButtonSample() {
    var checked by remember { mutableStateOf(true) }
    TextToggleButton(
        checked = checked,
        onCheckedChange = { checked = !checked },
        modifier = Modifier.touchTargetAwareSize(TextButtonDefaults.LargeButtonSize),
    ) {
        Text(
            text = if (checked) "On" else "Off",
            style = TextToggleButtonDefaults.largeButtonTextStyle,
        )
    }
}