Composable Component

FilledTonalIconButton

Icon buttons help people take supplementary actions with a single tap.

FilledTonalIconButton social preview

FilledTonalIconButtonSample

@OptIn(ExperimentalMaterial3Api::class)
@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 { Text(description) } },
        state = rememberTooltipState(),
    ) {
        FilledTonalIconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}

FilledTonalIconButtonWithAnimatedShapeSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@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 { Text(description) } },
        state = rememberTooltipState(),
    ) {
        FilledTonalIconButton(
            onClick = { /* doSomething() */ },
            shapes = IconButtonDefaults.shapes(),
        ) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}