New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material Compose

IconButton

Common

IconButton is a clickable icon, used to represent actions. An IconButton has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines. [content] is centered inside the IconButton.

This component is typically used inside an App Bar for the navigation icon / actions. See App Bar documentation for samples of this.

[content] should typically be an [Icon], using an icon from [androidx.compose.material.icons.Icons]. If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta04")
}

Overloads

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

Parameters

namedescription
onClickthe lambda to be invoked when this icon is pressed
modifieroptional [Modifier] for this IconButton
enabledwhether or not this IconButton will handle input events and appear enabled for semantics purposes
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this IconButton. You can use this to change the IconButton's appearance or preview the IconButton in different states. Note that if null is provided, interactions will still happen internally.
contentthe content (icon) to be drawn inside the IconButton. This is typically an [Icon].

Code Example

IconButtonSample

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