Composable Component

TextToggleButton

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.

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.largeTextStyle)
    }
}

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")
    }
}