Expressive icon buttons in Compose

favoritebookmarkvolume_up

Tap: round when off, rounded square and filled when on

IconButton, FilledIconButton, FilledTonalIconButton and OutlinedIconButton take shapes = IconButtonDefaults.shapes() for the press morph, and size with IconButtonDefaults.extraSmallContainerSize() through extraLargeContainerSize().

@Composable
fun AddButton(icon: ImageVector, onClick: () -> Unit) {
    FilledIconButton(
        onClick = onClick,
        shapes = IconButtonDefaults.shapes(),
        modifier = Modifier.size(IconButtonDefaults.mediumContainerSize()),
    ) {
        Icon(icon, contentDescription = "Add", modifier = Modifier.size(IconButtonDefaults.mediumIconSize))
    }
}

For toggles (IconToggleButton and its variants) use IconButtonDefaults.toggleableShapes(). Selection then changes shape as well as color.

Accessibility

Always set contentDescription. Add a tooltip when the icon’s meaning isn’t obvious. Keep the touch target at 48dp or more, even when the visible container is smaller.

Related: buttons · floating toolbar

Want your agent to get this right every time? Install the skill. If this page helped,star the repo on GitHub.