FilledIconButton
Component in Wear Material 3 Compose
Wear Material [FilledIconButton] is a circular, icon-only button with a colored background and a contrasting content color. It offers a single slot to take an icon or image.
Set the size of the [FilledIconButton] 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 [IconButton] size, or refer to icon sizes [IconButtonDefaults.SmallIconSize], [IconButtonDefaults.DefaultIconSize], [IconButtonDefaults.LargeIconSize] directly.
[FilledIconButton] 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-alpha26")
}
Overloads
@Composable
fun FilledIconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
onLongClick: (() -> Unit)? = null,
onLongClickLabel: String? = null,
enabled: Boolean = true,
shape: Shape = IconButtonDefaults.shape,
colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors(),
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. |
onLongClick | Called when this button is long clicked (long-pressed). When this callback is set, [onLongClickLabel] should be set as well. |
onLongClickLabel | Semantic / accessibility label for the [onLongClick] action. |
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 container and content color for this icon 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
FilledIconButtonSample
@Composable
fun FilledIconButtonSample() {
FilledIconButton(onClick = { /* Do something */ }) {
Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}
}