New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material 3 Compose

IconToggleButton

Android

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.

Set the size of the [IconToggleButton] with Modifier.[touchTargetAwareSize] to ensure that the background padding will correctly reach the edge of the minimum touch target. The recommended text button sizes are [IconButtonDefaults.DefaultButtonSize], [IconButtonDefaults.LargeButtonSize], [IconButtonDefaults.SmallButtonSize] and [IconButtonDefaults.ExtraSmallButtonSize].

Use [IconButtonDefaults.iconSizeFor] to determine the icon size for a given [IconToggleButton] size, or refer to icon sizes [IconButtonDefaults.SmallIconSize], [IconButtonDefaults.DefaultIconSize], [IconButtonDefaults.LargeIconSize] directly.

[IconToggleButton] can be enabled or disabled. A disabled button will not respond to click events. When enabled, the checked and unchecked events are propagated by [onCheckedChange].

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha23")
}

Overloads

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = IconButtonDefaults.shape,
    border: BorderStroke? = null,
    content: @Composable BoxScope.() -> Unit,
)

Parameters

namedescription
checkedBoolean flag indicating whether this toggle button is currently checked.
onCheckedChangeCallback to be invoked when this toggle button is clicked.
modifierModifier to be applied to the toggle button.
enabledControls the enabled state of the toggle button. When false, this toggle button will not be clickable.
colors[ToggleButtonColors] that will be used to resolve the container and content color for this toggle button.
interactionSourcean 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.
shapeDefines the shape for this toggle button. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material 3 Theme.
borderOptional [BorderStroke] for the [IconToggleButton].
contentThe content to be drawn inside the toggle button.

Code Example

IconToggleButtonSample

@Composable
@Sampled
fun IconToggleButtonSample() {
    var checked by remember { mutableStateOf(true) }
    IconToggleButton(
        checked = checked,
        onCheckedChange = { checked = !checked }
    ) {
        Icon(
            imageVector = Icons.Filled.Favorite,
            contentDescription = "Favorite icon"
        )
    }
}