← Compose Multiplatform Component in Wear Material 3 Compose
IconButton
Wear Material [IconButton] is a circular, icon-only button with transparent background and no border. It offers a single slot to take icon or image content.
Set the size of the [IconButton] with Modifier.[touchTargetAwareSize] to ensure that the recommended minimum touch target size is available.
The recommended [IconButton] sizes are [IconButtonDefaults.DefaultButtonSize], [IconButtonDefaults.LargeButtonSize], [IconButtonDefaults.SmallButtonSize] and [IconButtonDefaults.ExtraSmallButtonSize].
Use [IconButtonDefaults.iconSizeFor] to determine the icon size for a given [IconButtonDefaults] size, or refer to icon sizes [IconButtonDefaults.SmallIconSize], [IconButtonDefaults.DefaultIconSize], [IconButtonDefaults.LargeButtonSize] directly.
[IconButton] can be enabled or disabled. A disabled button will not respond to click events.
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material3:1.0.0-alpha23")
}
Overloads
@Composable
fun IconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = IconButtonDefaults.shape,
colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
border: BorderStroke? = null,
interactionSource: MutableInteractionSource? = null,
content: @Composable BoxScope.() -> Unit,
)
Parameters
name | description |
---|---|
onClick | Will be called when the user clicks the button. |
modifier | Modifier to be applied to the button. |
enabled | Controls the enabled state of the button. When false , this button will not be clickable. |
shape | Defines the icon button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 design. |
colors | [IconButtonColors] that will be used to resolve the background and icon color for this button in different states. |
border | Optional [BorderStroke] for the icon button border. |
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. |
content | The content displayed on the icon button, expected to be icon or image. |
Code Example
IconButtonSample
@Sampled
@Composable
fun IconButtonSample() {
IconButton(onClick = { /* Do something */ }) {
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = "Favorite icon"
)
}
}