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

OutlinedIconButton

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

OutlinedIconButton social preview

LargeRoundUniformOutlinedIconButtonSample

@Preview
@Composable
fun LargeRoundUniformOutlinedIconButtonSample() {
    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(),
    ) {
        OutlinedIconButton(
            onClick = { /* doSomething() */ },
            modifier = Modifier.size(IconButtonDefaults.largeContainerSize()),
            shape = IconButtonDefaults.largeRoundShape,
        ) {
            Icon(
                Icons.Filled.Lock,
                contentDescription = description,
                modifier = Modifier.size(IconButtonDefaults.largeIconSize),
            )
        }
    }
}

OutlinedIconButtonSample

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

OutlinedIconButtonWithAnimatedShapeSample

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

Last updated: