by @alexstyl
✉️ Leave your feedback

← Back to Wear Material 3


Wear Material 3
. Since 1.0.0-alpha04



Community Notes


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:



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,


onClickWill be called when the user clicks the button.
modifierModifier to be applied to the button.
enabledControls the enabled state of the button. When false, this button will not be clickable.
shapeDefines 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.
colorsIconButtonColors that will be used to resolve the background and icon color for this button in different states.
borderOptional BorderStroke for the icon button border.
interactionSourceThe 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.
contentThe content displayed on the icon button, expected to be icon or image
Previous ComponentFilledTonalButton
Next ComponentHorizontalPageIndicator