← Back to Wear Material 3
FilledTonalIconButton
Overview
Examples
Community Notes
Video
Wear Material FilledTonalIconButton is a circular, icon-only button with a muted, colored background and a contrasting icon color. It offers a single slot to take an icon or image.
Set the size of the FilledTonalIconButton with Modifier.touchTargetAwareSize to ensure that the recommended minimum touch target size is available.
The recommended icon button 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.
FilledTonalIconButton can be enabled or disabled. A disabled button will not respond to click events.
TODO(b/261838497) Add Material3 samples and UX guidance links
Example of FilledTonalIconButton:
Overloads
FilledTonalIconButton
@Composable
fun FilledTonalIconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = IconButtonDefaults.shape,
colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors(),
border: BorderStroke? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
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 | The MutableInteractionSource representing the stream of Interactions for this Button. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Button in different Interactions. |
content | The content displayed on the icon button, expected to be icon or image |