# IconToggleButton

## 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/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)( 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, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonColors, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A Jetpack Compose Glimmer icon toggle button that changes its appearance depending on the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#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)` value, and offers a single slot for an icon or image. |

## Functions

### IconToggleButton

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/IconToggleButton.kt+function:IconToggleButton)

```
@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = IconToggleButtonDefaults.animatedShape(checked),
    colors: IconToggleButtonColors = IconToggleButtonDefaults.colors(),
    enabled: Boolean = true,
    contentPadding: PaddingValues = IconToggleButtonDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit
```

A Jetpack Compose Glimmer icon toggle button that changes its appearance depending on the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#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)` value, and offers a single slot for an icon or image. By default, the button transitions its shape and color between states. It is also recommended to vary the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#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)` to visually indicate the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#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)` state.

Icon toggle buttons are used when a compact button is required.

The `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#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)` should typically be 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)`. If using a custom icon, note that the typical size for the internal icon is 32 x 32 dp. The container has an overall minimum size of 48 x 48 dp.

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

var checked by remember { mutableStateOf(false) }
IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    Icon(
        imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
        contentDescription = "Localized description",
    )
}
```

Focused and checked background colors can be customized via `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonDefaults#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/IconToggleButtonDefaults#focusedBackgroundColor(androidx.compose.ui.graphics.Color)`, `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonDefaults#checkedBackgroundColor(androidx.compose.ui.graphics.Color)`, and `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonDefaults#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.Icon
import androidx.xr.glimmer.IconToggleButton
import androidx.xr.glimmer.IconToggleButtonDefaults

var checked by remember { mutableStateOf(false) }
val focusedBackgroundColor =
    IconToggleButtonDefaults.focusedBackgroundColor(baseColor = Color(0xFFE3FF6F))
val checkedBackgroundColor =
    IconToggleButtonDefaults.checkedBackgroundColor(baseColor = Color(0xFF34E0A1))
IconToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    colors =
        IconToggleButtonDefaults.colors(
            focusedBackgroundColor = focusedBackgroundColor,
            checkedBackgroundColor = checkedBackgroundColor,
        ),
) {
    Icon(
        imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
        contentDescription = "Localized description",
    )
}
```

| Parameters |
|---|---|
| `checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | a boolean flag indicating whether this icon 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 button is clicked, receiving the inverted `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#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)` 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 icon toggle button. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = IconToggleButtonDefaults.animatedShape(checked)` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` of this icon toggle button. It is recommended to change the shape depending on the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#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)` state. `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonDefaults` provides both animated and non-animated versions, see `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonDefaults#animatedShape(kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonDefaults#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/IconToggleButtonColors = IconToggleButtonDefaults.colors()` | the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/IconToggleButtonColors` providing color variants for all icon toggle button states. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this icon toggle button. When `false`, this button will not respond to user input. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = IconToggleButtonDefaults.contentPadding` | 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 icon toggle button's appearance or preview it 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this icon toggle button, 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)`. |