# ToggleButton

Common/AllAndroid/JVM

## 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/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,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, buttonSize: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonSize, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, icon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonShapes, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonElevation?, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, 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 )` [Material Design toggle button](https://m3.material.io/components/buttons/overview#f8ba981c-a363-4ccd-a332-ee1b0e124e5c) | Cmn |

## Functions

### ToggleButton

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

```
@Composable
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    buttonSize: ToggleButtonSize = ToggleButtonDefaults.size,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(buttonSize),
    colors: ToggleButtonColors = ToggleButtonDefaults.colors(),
    elevation: ToggleButtonElevation? = ToggleButtonDefaults.elevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit
```

[Material Design toggle button](https://m3.material.io/components/buttons/overview#f8ba981c-a363-4ccd-a332-ee1b0e124e5c)

Toggle button is a filled toggleable button that switches between primary and tonal colors depending on `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`'s value. It also morphs between the three shapes provided in `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` depending on the state of the interaction with the toggle button as long as the three shapes provided are `https://developer.android.com/reference/kotlin/androidx/compose/foundation/shape/CornerBasedShape`s. If a shape in `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` isn't a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/shape/CornerBasedShape`, then toggle button will toggle between the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonShapes` according to user interaction.

![Filled toggle button
image](https://developer.android.com/images/reference/androidx/compose/material3/filled-toggle-buttons.png)

This uses a `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonSize` and optional `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` to automatically configure container size, shapes, content padding, icon sizes, icon spacing, and typography.

There are multiple button size variants. Providing a different `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonSize` will affect default values used inside this button, such as the corner shape and padding. 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/compose/material3/ToggleButtonSize` affects default values and values internal to the button.

`https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` with text content sample:

```kotlin
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text("Button") }
```

`https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` with icon and text sample:

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Edit")
}
```

`https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` uses the small button design as default. For a `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` that uses the design for extra small:

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    buttonSize = ToggleButtonSize.ExtraSmall,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}
```

For a `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` that uses the design for medium:

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    buttonSize = ToggleButtonSize.Medium,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}
```

For a `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` that uses the design for large:

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    buttonSize = ToggleButtonSize.Large,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}
```

For a `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButton.composable#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` that uses the design for extra large:

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    buttonSize = ToggleButtonSize.ExtraLarge,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}
```

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    buttonSize = ToggleButtonSize.Small,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}
```

| Parameters |
|---|---|
| `checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether the toggle button is toggled on or off. |
| `onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when the toggle button is clicked. |
| `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 the toggle button. |
| `buttonSize: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonSize = ToggleButtonDefaults.size` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonSize` of this toggle button, controlling its height, padding, and icon sizing. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this toggle button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `icon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional icon to be placed before the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material3.ToggleButtonSize,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.ToggleButtonShapes,androidx.compose.material3.ToggleButtonColors,androidx.compose.material3.ToggleButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonShapes = ToggleButtonDefaults.shapesFor(buttonSize)` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonShapes` that the toggle button will morph between depending on the user's interaction with the toggle button. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonColors = ToggleButtonDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonColors` that will be used to resolve the colors used for this toggle button in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonDefaults#colors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonElevation? = ToggleButtonDefaults.elevation()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonElevation` used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. Additionally, when the container color is `https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme#surface()`, this controls the amount of primary color applied as an overlay. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ToggleButtonDefaults#elevation(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | the border to draw around the container of this toggle button. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null)` | 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 `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. |
| `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 content displayed on the toggle button, expected to be text, icon or image. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` | for a static button that doesn't need to be toggled. |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/IconToggleButton.composable#IconToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.IconToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,kotlin.Function0)` | for a toggleable button where the content is specifically an `https://developer.android.com/reference/kotlin/androidx/compose/material3/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)`. |