---
title: "IconToggleButton"
description: "Wear Material `IconToggleButton` is a filled icon toggle button which switches between primary
colors and tonal colors depending on `checked` value, and offers a single slot for icon or image."
type: "component"
---

<div class='type'>Composable Component</div>



Wear Material `IconToggleButton` is a filled icon toggle button which switches between primary
colors and tonal colors depending on `checked` value, and offers a single slot for icon or image.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconToggleButtonColors = IconToggleButtonDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
    shapes: IconToggleButtonShapes = IconToggleButtonDefaults.shapes(),
    border: BorderStroke? = null,
    content: @Composable BoxScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| checked | Boolean flag indicating whether this toggle button is currently checked. |
| onCheckedChange | Callback to be invoked when this toggle button is clicked. |
| modifier | Modifier to be applied to the toggle button. |
| enabled | Controls the enabled state of the toggle button. When `false`, this toggle button will not be clickable. |
| colors | `IconToggleButtonColors` that will be used to resolve the container and content color for this toggle button. |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s 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. |
| shapes | Defines the shape for this toggle button. Defaults to a static shape based on `IconToggleButtonDefaults.shape`, but animated versions are available through `IconToggleButtonDefaults.animatedShapes` and `IconToggleButtonDefaults.variantAnimatedShapes`. |
| border | Optional `BorderStroke` for the `IconToggleButton`. |
| content | The content to be drawn inside the toggle button. |






## Code Examples
### IconToggleButtonSample
```kotlin
@Composable
fun IconToggleButtonSample() {
    var firstChecked by remember { mutableStateOf(true) }
    var secondChecked by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        IconToggleButton(
            checked = firstChecked,
            onCheckedChange = { firstChecked = !firstChecked },
            shapes = IconToggleButtonDefaults.animatedShapes(),
        ) {
            if (firstChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
        Spacer(modifier = Modifier.width(5.dp))
        IconToggleButton(
            checked = secondChecked,
            onCheckedChange = { secondChecked = !secondChecked },
            shapes = IconToggleButtonDefaults.animatedShapes(),
        ) {
            if (secondChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
    }
}
```
### IconToggleButtonVariantSample
```kotlin
@Composable
fun IconToggleButtonVariantSample() {
    var firstChecked by remember { mutableStateOf(true) }
    var secondChecked by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        IconToggleButton(
            checked = firstChecked,
            onCheckedChange = { firstChecked = !firstChecked },
            shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
        ) {
            if (firstChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
        Spacer(modifier = Modifier.width(5.dp))
        IconToggleButton(
            checked = secondChecked,
            onCheckedChange = { secondChecked = !secondChecked },
            shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
        ) {
            if (secondChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
    }
}
```