# ToggleButton

## 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/xr/glimmer/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,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, buttonSize: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonSize, leadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, trailingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonColors, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A Jetpack Compose Glimmer toggle button that changes its appearance depending on the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` value, used for exposing actions to a user. |

## Functions

### ToggleButton

Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/ToggleButton.kt+function:ToggleButton)

```
@Composable
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    buttonSize: ButtonSize = ButtonSize.Medium,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = ToggleButtonDefaults.animatedShape(checked),
    colors: ToggleButtonColors = ToggleButtonDefaults.colors(),
    contentPadding: PaddingValues = ToggleButtonDefaults.contentPadding(buttonSize),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit
```

A Jetpack Compose Glimmer toggle button that changes its appearance depending on the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` value, used for exposing actions to a user. By default, the button transitions its shape and color between states. Unlike `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButton.composable#IconToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.IconToggleButtonColors,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`, its primary content is text.

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
```

A `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` can have optional `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` slots, which are used to provide more context about the action. It is also recommended to vary the icons to visually indicate the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` state.

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(
    checked = checked,
    leadingIcon = {
        Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
    },
    onCheckedChange = { checked = it },
) {
    Text(text)
}
```

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(
    checked = checked,
    trailingIcon = {
        Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
    },
    onCheckedChange = { checked = it },
) {
    Text(text)
}
```

There are multiple button size variants. Providing a different `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonSize` will affect the default values used inside this button, such as the minimum height. Note that you can still provide a size modifier such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)` to change the layout size of this button, `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` affects default values and values internal to the button.

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.ButtonSize
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(
    checked = checked,
    buttonSize = ButtonSize.Large,
    onCheckedChange = { checked = it },
) {
    Text(text)
}
```

Focused and checked background colors can be customized via `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonDefaults#colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` using `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonDefaults#focusedBackgroundColor(androidx.compose.ui.graphics.Color)`, `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonDefaults#checkedBackgroundColor(androidx.compose.ui.graphics.Color)`, and `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonDefaults#focusedCheckedBackgroundColor(androidx.compose.ui.graphics.Color)`:

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton
import androidx.xr.glimmer.ToggleButtonDefaults

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
val focusedBackgroundColor =
    ToggleButtonDefaults.focusedBackgroundColor(baseColor = Color(0xFFE3FF6F))
val checkedBackgroundColor =
    ToggleButtonDefaults.checkedBackgroundColor(baseColor = Color(0xFF34E0A1))
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    colors =
        ToggleButtonDefaults.colors(
            focusedBackgroundColor = focusedBackgroundColor,
            checkedBackgroundColor = checkedBackgroundColor,
        ),
) {
    Text(text)
}
```

| Parameters |
|---|---|
| `checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | a 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` | A callback to be invoked when this toggle button is clicked, receiving the inverted `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` value. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this button. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this button. When `false`, this button will not respond to user input. |
| `buttonSize: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonSize = ButtonSize.Medium` | the size variant of this button, represented as a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonSize`. Changing `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` will affect some default values used by this button, but the final resulting size of the button will still be calculated based on the content of the button and any provided size modifiers such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)`. For example, setting a 100.dp size using a size modifier will result in the same layout size regardless of `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`, but the provided `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` will affect other properties such as padding values and the size of icons. |
| `leadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | an optional leading icon to be placed before the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`. This is typically an `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier)` tinted with the content color resolved from `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` by default. |
| `trailingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | an optional trailing icon to be placed after the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`. This is typically an `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier)` tinted with the content color resolved from `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` by default. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = ToggleButtonDefaults.animatedShape(checked)` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` of this toggle button. It is recommended to change the shape depending on the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.xr.glimmer.ToggleButtonColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` state. `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonDefaults` provides both animated and non-animated versions, see `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonDefaults#animatedShape(kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonDefaults#shape(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape)` for more details. |
| `colors: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonColors = ToggleButtonDefaults.colors()` | the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ToggleButtonColors` that will be used to resolve the container and content colors based on the toggle button state. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ToggleButtonDefaults.contentPadding(buttonSize)` | the spacing values to apply internally between the container and the content. |
| `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 Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the main content, typically `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.foundation.text.TextAutoSize,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)`, to display inside this button. |