IconButton

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.

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

@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

@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

Code Examples

ExtraSmallNarrowSquareIconButtonsSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun ExtraSmallNarrowSquareIconButtonsSample() {
    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(),
    ) {
        // 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 = description,
                modifier = Modifier.size(IconButtonDefaults.extraSmallIconSize),
            )
        }
    }
}

IconButtonSample

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun IconButtonSample() {
    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(),
    ) {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}

IconButtonWithAnimatedShapeSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun IconButtonWithAnimatedShapeSample() {
    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(),
    ) {
        IconButton(onClick = { /* doSomething() */ }, shapes = IconButtonDefaults.shapes()) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}

MediumRoundWideIconButtonSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun MediumRoundWideIconButtonSample() {
    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(),
    ) {
        IconButton(
            onClick = { /* doSomething() */ },
            modifier =
                Modifier.size(
                    IconButtonDefaults.mediumContainerSize(
                        IconButtonDefaults.IconButtonWidthOption.Wide
                    )
                ),
            shape = IconButtonDefaults.mediumRoundShape,
        ) {
            Icon(
                Icons.Filled.Lock,
                contentDescription = description,
                modifier = Modifier.size(IconButtonDefaults.mediumIconSize),
            )
        }
    }
}

TintedIconButtonSample

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun TintedIconButtonSample() {
    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(),
    ) {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(
                rememberVectorPainter(image = Icons.Filled.Lock),
                contentDescription = description,
                tint = Color.Red,
            )
        }
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled