IconButton

Composable Component

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Common

Deprecated Use overload with shape

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters


onClick	called when this icon button is clicked
modifier	the `Modifier` to be applied to this icon button
enabled	controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors	`IconButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.iconButtonVibrantColors`.
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally.
content	the content of this icon button, typically an `Icon`

Common

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = IconButtonDefaults.standardShape,
    content: @Composable () -> Unit,
) =
    IconButtonImpl(
        onClick = onClick,
        modifier = modifier,
        enabled = enabled,
        colors = colors,
        interactionSource = interactionSource,
        shape = shape,
        content = content,
    )

Parameters


onClick	called when this icon button is clicked
modifier	the `Modifier` to be applied to this icon button
enabled	controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors	`IconButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.iconButtonVibrantColors` and `IconButtonDefaults.iconButtonColors` .
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally.
shape	the `Shape` of this icon button.
content	the content of this icon button, typically an `Icon`

Common

@ExperimentalMaterial3ExpressiveApi
@Composable
fun IconButton(
    onClick: () -> Unit,
    shapes: IconButtonShapes,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters


onClick	called when this icon button is clicked
shapes	the `IconButtonShapes` that the icon button will morph between depending on the user's interaction with the icon button.
modifier	the `Modifier` to be applied to this icon button
enabled	controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors	`IconButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.iconButtonVibrantColors` and `IconButtonDefaults.iconButtonColors` .
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally.
content	the content of this icon button, typically an `Icon`

Code Examples

IconButtonSample

@Preview
@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Lock, contentDescription = "Localized description")
    }
}

TintedIconButtonSample

@Preview
@Composable
fun TintedIconButtonSample() {
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(
            rememberVectorPainter(image = Icons.Filled.Lock),
            contentDescription = "Localized description",
            tint = Color.Red,
        )
    }
}

ExtraSmallNarrowSquareIconButtonsSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun ExtraSmallNarrowSquareIconButtonsSample() {
    // Small narrow round icon button
    FilledIconButton(
        onClick = { /* doSomething() */ },
        modifier =
            Modifier.minimumInteractiveComponentSize()
                .size(
                    IconButtonDefaults.extraSmallContainerSize(
                        IconButtonDefaults.IconButtonWidthOption.Narrow
                    )
                ),
        shape = IconButtonDefaults.extraSmallSquareShape,
    ) {
        Icon(
            Icons.Filled.Lock,
            contentDescription = "Localized description",
            modifier = Modifier.size(IconButtonDefaults.extraSmallIconSize),
        )
    }
}

MediumRoundWideIconButtonSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun MediumRoundWideIconButtonSample() {
    IconButton(
        onClick = { /* doSomething() */ },
        modifier =
            Modifier.size(
                IconButtonDefaults.mediumContainerSize(
                    IconButtonDefaults.IconButtonWidthOption.Wide
                )
            ),
        shape = IconButtonDefaults.mediumRoundShape,
    ) {
        Icon(
            Icons.Filled.Lock,
            contentDescription = "Localized description",
            modifier = Modifier.size(IconButtonDefaults.mediumIconSize),
        )
    }
}

IconButtonWithAnimatedShapeSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun IconButtonWithAnimatedShapeSample() {
    IconButton(onClick = { /* doSomething() */ }, shapes = IconButtonDefaults.shapes()) {
        Icon(Icons.Filled.Lock, contentDescription = "Localized description")
    }
}