---
title: "ToggleButton"
description: "A Jetpack Compose Glimmer toggle button that changes its appearance depending on the checked value, used for exposing actions to a user."
type: "component"
lastmod: "2026-05-08T01:17:00.895259Z"
---
## API Reference

### ToggleButton

> Source set: Android

```kotlin
@Composable
public 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.animateShape(checked),
    colors: ToggleButtonColors = ToggleButtonDefaults.colors(),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ToggleButtonDefaults.contentPadding(buttonSize),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| checked | a boolean flag indicating whether this toggle button is currently checked. |
| onCheckedChange | A callback to be invoked when this toggle button is clicked, receiving the inverted [checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) value. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of this button. When `false`, this button will not respond to user input. |
| buttonSize | the size variant of this button, represented as a [ButtonSize](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/ButtonSize). Changing [buttonSize](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/ButtonSize) 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 [androidx.compose.foundation.layout.size](/jetpack-compose/androidx.xr.compose/compose/functions/size). For example, setting a 100.dp size using a size modifier will result in the same layout size regardless of [buttonSize](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/ButtonSize), but the provided [buttonSize](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/ButtonSize) will affect other properties such as padding values and the size of icons. |
| leadingIcon | an optional leading icon to be placed before the `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). |
| trailingIcon | an optional trailing icon to be placed after the `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape) of this toggle button. It is recommended to change the shape depending on the [checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) state. [ToggleButtonDefaults](/jetpack-compose/androidx.xr.glimmer/glimmer/objects/ToggleButtonDefaults) provides both animated and non-animated versions, see [ToggleButtonDefaults.animateShape](/jetpack-compose/androidx.xr.glimmer/glimmer/objects/ToggleButtonDefaults) and [ToggleButtonDefaults.shape](/jetpack-compose/androidx.xr.glimmer/glimmer/objects/ToggleButtonDefaults) for more details. |
| colors | the [ToggleButtonColors](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/ToggleButtonColors) that will be used to resolve the container and content colors based on the toggle button state. |
| border | the border to draw around this button. |
| contentPadding | the spacing values to apply internally between the container and the content. |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the main content, typically [Text](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Text), to display inside this button. |

## Code Examples
### LargeToggleButtonSample
```kotlin
@Composable
fun LargeToggleButtonSample() {
    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)
    }
}
```
### ToggleButtonSample
```kotlin
@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}
```
### ToggleButtonWithLeadingIconSample
```kotlin
@Composable
fun ToggleButtonWithLeadingIconSample() {
    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)
    }
}
```
### ToggleButtonWithTrailingIconSample
```kotlin
@Composable
fun ToggleButtonWithTrailingIconSample() {
    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)
    }
}
```