---
title: "IconButton"
description: "Wear Material `IconButton` is a circular, icon-only button with transparent background and no
border. It offers a single slot to take icon or image content."
type: "component"
---

<div class='type'>Composable Component</div>



Wear Material `IconButton` is a circular, icon-only button with transparent background and no
border. It offers a single slot to take icon or image content.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | Will be called when the user clicks the button. |
| modifier | Modifier to be applied to the button. |
| onLongClick | Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well. |
| onLongClickLabel | Semantic / accessibility label for the `onLongClick` action. |
| enabled | Controls the enabled state of the button. When `false`, this button will not be clickable. |
| shapes | Defines the shape for this button. Defaults to a static shape based on `IconButtonDefaults.shape`, but animated versions are available through `IconButtonDefaults.animatedShapes`. |
| colors | `IconButtonColors` that will be used to resolve the background and icon color for this button in different states. |
| border | Optional `BorderStroke` for the icon button border. |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | The content displayed on the icon button, expected to be icon or image. |






## Code Examples
### IconButtonSample
```kotlin
@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* Do something */ }) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }
}
```
### IconButtonWithCornerAnimationSample
```kotlin
@Composable
fun IconButtonWithCornerAnimationSample(
    colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors()
) {
    FilledIconButton(
        onClick = { /* Do something */ },
        shapes = IconButtonDefaults.animatedShapes(),
        colors = colors,
    ) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }
}
```
### IconButtonWithImageSample
```kotlin
@Composable
fun IconButtonWithImageSample(
    painter: Painter,
    enabled: Boolean,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
) {
    IconButton(onClick = { /* Do something */ }, shapes = shapes, enabled = enabled) {
        Image(
            painter = painter,
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier =
                if (enabled) Modifier else Modifier.alpha(IconButtonDefaults.DisabledImageOpacity),
        )
    }
}
```
### IconButtonWithOnLongClickSample
```kotlin
@Composable
fun IconButtonWithOnLongClickSample(onLongClick: () -> Unit) {
    IconButton(
        onClick = { /* Do something for onClick*/ },
        onLongClick = onLongClick,
        onLongClickLabel = "Long click",
    ) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }
}
```