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

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



Wear Material `OutlinedIconButton` is a circular, icon-only button with a transparent background,
contrasting icon color and border. It offers a single slot to take an icon or image.

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

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


```kotlin
@Composable
public fun OutlinedIconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
    colors: IconButtonColors = IconButtonDefaults.outlinedIconButtonColors(),
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled),
    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. See `IconButtonDefaults.outlinedIconButtonColors`. |
| border | Optional `BorderStroke` for the icon button border - `ButtonDefaults.outlinedButtonBorder` by default. |
| 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
### OutlinedIconButtonSample
```kotlin
@Composable
fun OutlinedIconButtonSample() {
    OutlinedIconButton(onClick = { /* Do something */ }) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }
}
```