Compose Unstyled 2.0 is out! Check the official announcement blog ->
Compose Component

FilledIconButton

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

FilledIconButton social preview

FilledIconButtonSample

@Preview
@Composable
fun FilledIconButtonSample() {
    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(),
    ) {
        FilledIconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}

FilledIconButtonWithAnimatedShapeSample

@Preview
@Composable
fun FilledIconButtonWithAnimatedShapeSample() {
    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(),
    ) {
        FilledIconButton(onClick = { /* doSomething() */ }, shapes = IconButtonDefaults.shapes()) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}

Last updated: