← Back to Wear Material 3
IconToggleButton
Overview
Examples
Community Notes
Video
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
Overloads
IconToggleButton
@Composable
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,
)
Parameters
| Name | Description |
|---|---|
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 | ToggleButtonColors that will be used to resolve the container and content color for this toggle button. |
interactionSource | The 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. |
shape | Defines 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. |
border | Optional BorderStroke for the IconToggleButton. |
content | The content to be drawn inside the toggle button |