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`
IconButton
```kotlin
@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` |
IconButton
Common
```kotlin
@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` |
IconButton
Common
```kotlin
@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` |