TextToggleButton

Functions summary

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

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.

Functions

TextToggleButton

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

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.Size, TextToggleButtonDefaults.LargeSize and TextToggleButtonDefaults.ExtraLargeSize. The recommended text styles for each corresponding button size are TextToggleButtonDefaults.textStyle, TextToggleButtonDefaults.largeTextStyle and TextToggleButtonDefaults.extraLargeTextStyle.

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.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextToggleButton
import androidx.wear.compose.material3.TextToggleButtonDefaults

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

A simple text toggle button using the default colors, animated when pressed and with different shapes for the checked and unchecked states.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextToggleButton
import androidx.wear.compose.material3.TextToggleButtonDefaults

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

Example of a large text toggle button:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextButtonDefaults
import androidx.wear.compose.material3.TextToggleButton
import androidx.wear.compose.material3.TextToggleButtonDefaults
import androidx.wear.compose.material3.touchTargetAwareSize

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.largeTextStyle)
}
Parameters
checked: Boolean

Boolean flag indicating whether this toggle button is currently checked.
onCheckedChange: (Boolean) -> Unit

Callback to be invoked when this toggle button is clicked.
modifier: Modifier = Modifier

Modifier to be applied to the toggle button.
enabled: Boolean = true

Controls the enabled state of the toggle button. When false, this toggle button will not be clickable.
colors: TextToggleButtonColors = TextToggleButtonDefaults.colors()

TextToggleButtonColors that will be used to resolve the container and content color for this toggle button.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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: TextToggleButtonShapes = TextToggleButtonDefaults.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: BorderStroke? = null

Optional BorderStroke for the TextToggleButton.
content: @Composable BoxScope.() -> Unit

The text to be drawn inside the toggle button.