by @alexstyl
✉️ Leave your feedback

← Back to Wear Material 3


Wear Material 3
. Since 1.0.0-alpha08



Community Notes


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.

A simple icon toggle button using the default colors



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


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.
colorsToggleButtonColors that will be used to resolve the container and content color for this toggle button.
interactionSourceThe MutableInteractionSource representing the stream of Interactions for this toggle button. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this ToggleButton in different Interactions.
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
Previous ComponentIconButton
Next ComponentInlineSlider