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.
Android
@Composable
public fun FilledTonalIconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
onLongClick: (() -> Unit)? = null,
onLongClickLabel: String? = null,
enabled: Boolean = true,
shapes: IconButtonShapes = IconButtonDefaults.shapes(),
colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors(),
border: BorderStroke? = null,
interactionSource: MutableInteractionSource? = null,
content: @Composable BoxScope.() -> Unit,
)Parameters
| 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. |
| shapes | Defines the shape for this button. Defaults to a static shape based on IconButtonDefaults.shape, but animated versions are available through IconButtonDefaults.animatedShapes. |
| 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 Interactions 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 Examples
FilledTonalIconButtonSample
@Composable
fun FilledTonalIconButtonSample() {
FilledTonalIconButton(onClick = { /* Do something */ }) {
Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}
}
