IconToggleButton
Component in Wear Material 3 Compose
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
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}
Overloads
@Composable
fun IconToggleButton(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(),
interactionSource: MutableInteractionSource? = null,
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 | [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. |
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. |
Code Example
IconToggleButtonSample
@Composable
fun IconToggleButtonSample() {
var checked by remember { mutableStateOf(true) }
IconToggleButton(checked = checked, onCheckedChange = { checked = !checked }) {
Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}
}