---
title: "TextToggleButton"
description: "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."
type: "component"
---

<div class='type'>Composable Component</div>



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.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public 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,
)
```


#### Parameters

| | |
| --- | --- |
| 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
### LargeTextToggleButtonSample
```kotlin
@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
```kotlin
@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
```kotlin
@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")
    }
}
```