---
title: "RemoteIconToggleButton"
description: "Wear Material [RemoteIconToggleButton] 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: "composable"
lastmod: "2026-10-21"
---
## API Reference

### RemoteIconToggleButton

> Source set: Android

```kotlin
@Composable
public fun RemoteIconToggleButton(
    checked: RemoteBoolean,
    onCheckedChange: Action,
    modifier: RemoteModifier = RemoteModifier,
    enabled: RemoteBoolean = true.rb,
    colors: RemoteIconToggleButtonColors = RemoteIconToggleButtonDefaults.colors(),
    shapes: RemoteIconToggleButtonShapes = RemoteIconToggleButtonDefaults.shapes(),
    border: RemoteDp? = null,
    borderColor: RemoteColor? = null,
    content: @Composable @RemoteComposable () -> Unit,
)
```

Wear Material [RemoteIconToggleButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteIconToggleButton/api) 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.

Set the size of the [RemoteIconToggleButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteIconToggleButton/api) with `RemoteModifier.size` to one of the recommended
sizes in `RemoteIconToggleButtonDefaults` (for example `RemoteIconToggleButtonDefaults.Size`),
and size the icon with `RemoteIconToggleButtonDefaults.iconSizeFor`.

[RemoteIconToggleButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteIconToggleButton/api) can be enabled or disabled. A disabled button will not respond to click
events. When enabled, the `onCheckedChange` action is triggered on click, and is typically used
to flip the `checked` state, for example with `valueChange(checked, !checked)`.

Example of a simple [RemoteIconToggleButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteIconToggleButton/api):

Example of a [RemoteIconToggleButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteIconToggleButton/api) that changes shape when checked:

Example of a [RemoteIconToggleButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteIconToggleButton/api) that changes shape when checked and animates its shape when
pressed:

#### Parameters

| | |
| --- | --- |
| checked | Boolean flag indicating whether this toggle button is currently checked. |
| onCheckedChange | [Action](/jetpack-compose/androidx.glance/glance/composable-functions/action) to be performed 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. Note that only constant values are currently supported for [enabled](/jetpack-compose/androidx.compose.remote/remote-creation-compose/properties/enabled) for click handling. |
| colors | `RemoteIconToggleButtonColors` that will be used to resolve the container and content color for this toggle button. |
| shapes | Defines the shapes for this toggle button in the checked and unchecked states, and while pressed. Defaults to a static shape based on [RemoteIconToggleButtonDefaults.shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape). A variant that changes shape when checked is available through `RemoteIconToggleButtonDefaults.variantShapes`, and shapes that animate when pressed are available through `RemoteIconToggleButtonDefaults.animatedShapes` and `RemoteIconToggleButtonDefaults.variantAnimatedShapes`. The press animation is driven by touch events on the player, and is not shown by players that don't dispatch them. |
| border | Optional [RemoteDp](/jetpack-compose/androidx.compose.remote/remote-creation-compose/classes/RemoteDp) border stroke width for this toggle button. |
| borderColor | Optional [RemoteColor](/jetpack-compose/androidx.compose.remote/remote-creation-compose/classes/RemoteColor) for the border of this toggle button. |
| content | The content to be drawn inside the toggle button, expected to be an icon or image. |

## Code Examples

### RemoteIconToggleButtonSample

```kotlin
@Sampled
@RemoteComposable
@Composable
@WearPreviewDevices
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
fun RemoteIconToggleButtonSample(modifier: RemoteModifier = RemoteModifier) {
    val checked = remember { MutableRemoteBoolean(true) }

    RemoteIconToggleButton(
        checked = checked,
        onCheckedChange = valueChange(checked, !checked),
        modifier = modifier,
    ) {
        RemoteIcon(
            imageVector = TestImageVectors.VolumeUp,
            contentDescription = null,
            modifier = RemoteModifier.size(RemoteIconToggleButtonDefaults.DefaultIconSize),
        )
    }
}
```

### RemoteIconToggleButtonVariantSample

```kotlin
@Sampled
@RemoteComposable
@Composable
@WearPreviewDevices
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
fun RemoteIconToggleButtonVariantSample(modifier: RemoteModifier = RemoteModifier) {
    val checked = remember { MutableRemoteBoolean(true) }

    RemoteIconToggleButton(
        checked = checked,
        onCheckedChange = valueChange(checked, !checked),
        modifier = modifier,
        shapes = RemoteIconToggleButtonDefaults.variantShapes(),
    ) {
        RemoteIcon(
            imageVector = TestImageVectors.VolumeUp,
            contentDescription = null,
            modifier = RemoteModifier.size(RemoteIconToggleButtonDefaults.DefaultIconSize),
        )
    }
}
```

### RemoteIconToggleButtonVariantAnimatedSample

```kotlin
@Sampled
@RemoteComposable
@Composable
@WearPreviewDevices
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
fun RemoteIconToggleButtonVariantAnimatedSample(modifier: RemoteModifier = RemoteModifier) {
    val checked = remember { MutableRemoteBoolean(true) }

    RemoteIconToggleButton(
        checked = checked,
        onCheckedChange = valueChange(checked, !checked),
        modifier = modifier,
        shapes = RemoteIconToggleButtonDefaults.variantAnimatedShapes(),
    ) {
        RemoteIcon(
            imageVector = TestImageVectors.VolumeUp,
            contentDescription = null,
            modifier = RemoteModifier.size(RemoteIconToggleButtonDefaults.DefaultIconSize),
        )
    }
}
```