IconButton

Component in Material Compose

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: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.material:material:1.8.0-alpha04")
}

Overloads

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

Parameters

name	description
onClick	the lambda to be invoked when this icon is pressed
modifier	optional [Modifier] for this IconButton
enabled	whether or not this IconButton will handle input events and appear enabled for semantics purposes
interactionSource	an 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.
content	the content (icon) to be drawn inside the IconButton. This is typically an [Icon].

Code Example

IconButtonSample

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