# TextToggleButton

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButton.composable#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)( checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonColors, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, shapes: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonShapes, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButton.composable#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)` is a filled text toggle button which switches between primary colors and tonal colors depending on `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)` value, and offers a single slot for text. |

## Functions

### TextToggleButton

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/TextToggleButton.kt+function:TextToggleButton) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButton.composable#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)` is a filled text toggle button which switches between primary colors and tonal colors depending on `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)` value, and offers a single slot for text.

Set the size of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButton.composable#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)` with Modifier.`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/touchTargetAwareSize.modifier#(androidx.compose.ui.Modifier).touchTargetAwareSize(androidx.compose.ui.unit.Dp)` to ensure that the background padding will correctly reach the edge of the minimum touch target. The recommended `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButton.composable#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)` sizes are `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#Size()`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#LargeSize()` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#ExtraLargeSize()`. The recommended text styles for each corresponding button size are `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#textStyle()`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#largeTextStyle()` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#extraLargeTextStyle()`.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButton.composable#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)` can be enabled or disabled. A disabled button will not respond to click events. When enabled, the checked and unchecked events are propagated by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)`.

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

```kotlin
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.

```kotlin
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:

```kotlin
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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | Boolean flag indicating whether this toggle button is currently checked. |
| `onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Callback to be invoked when this toggle button is clicked. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the toggle button. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the toggle button. When `false`, this toggle button will not be clickable. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonColors = TextToggleButtonDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonColors` that will be used to resolve the container and content color for this toggle button. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonShapes = TextToggleButtonDefaults.shapes()` | Defines the shape for this toggle button. Defaults to a static shape based on `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#shape()`, but animated versions are available through `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#animatedShapes()` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButtonDefaults#variantAnimatedShapes()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke` for the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TextToggleButton.composable#TextToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.TextToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.TextToggleButtonShapes,androidx.compose.foundation.BorderStroke,kotlin.Function1)`. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The text to be drawn inside the toggle button. |