Icon buttons help people take supplementary actions with a single tap.
@Preview
@Composable
fun FilledTonalIconButtonSample() {
val description = "Localized description"
// Icon button should have a tooltip associated with it for a11y.
TooltipBox(
positionProvider =
TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
tooltip = {
PlainTooltip(
modifier =
Modifier.semantics {
// TODO(b/496338253): Remove this modifier once bug where tooltip text is
// not announced by a11y screen readers is resolved.
liveRegion = LiveRegionMode.Assertive
paneTitle = description
}
) {
Text(description)
}
},
state = rememberTooltipState(),
) {
FilledTonalIconButton(onClick = { /* doSomething() */ }) {
Icon(Icons.Filled.Lock, contentDescription = description)
}
}
}
@Preview
@Composable
fun FilledTonalIconButtonWithAnimatedShapeSample() {
val description = "Localized description"
// Icon button should have a tooltip associated with it for a11y.
TooltipBox(
positionProvider =
TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
tooltip = {
PlainTooltip(
modifier =
Modifier.semantics {
// TODO(b/496338253): Remove this modifier once bug where tooltip text is
// not announced by a11y screen readers is resolved.
liveRegion = LiveRegionMode.Assertive
paneTitle = description
}
) {
Text(description)
}
},
state = rememberTooltipState(),
) {
FilledTonalIconButton(
onClick = { /* doSomething() */ },
shapes = IconButtonDefaults.shapes(),
) {
Icon(Icons.Filled.Lock, contentDescription = description)
}
}
}