---
title: "Button"
description: "Wear Material `Button` that offers a single slot to take any content (text, icon or image)."
type: "component"
---

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



Wear Material `Button` that offers a single slot to take any content (text, icon or image).

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

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


> **Deprecated** This overload is provided for backwards compatibility with Compose for Wear OS 1.0.A newer overload is available with an additional shape parameter.

```kotlin
@Composable
public fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.primaryButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable BoxScope.() -> Unit,
): Unit
```


#### Parameters

| | |
| --- | --- |
| onClick | Will be called when the user clicks the button. |
| modifier | Modifier to be applied to the button. |
| enabled | Controls the enabled state of the button. When `false`, this button will not be clickable. |
| colors | `ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.buttonColors`. |
| interactionSource | The `MutableInteractionSource` representing the stream of `Interaction`s for this Button. You can create and pass in your own remembered `MutableInteractionSource` if you want to observe `Interaction`s and customize the appearance / behavior of this Button in different `Interaction`s. |
| content | The content displayed on the `Button` such as text, icon or image. |




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


```kotlin
@Composable
public fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.primaryButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = CircleShape,
    border: ButtonBorder = ButtonDefaults.buttonBorder(),
    content: @Composable BoxScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | Will be called when the user clicks the button. |
| modifier | Modifier to be applied to the button. |
| enabled | Controls the enabled state of the button. When `false`, this button will not be clickable. |
| colors | `ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.buttonColors`. |
| 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. |
| shape | Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme. |
| border | `ButtonBorder` that will be used to resolve the button border in different states. See `ButtonDefaults.buttonBorder`. |
| content | The content displayed on the `Button` such as text, icon or image. |






## Code Examples
### ButtonWithIcon
```kotlin
@Composable
fun ButtonWithIcon() {
    Button(onClick = { /* Do something */ }, enabled = true) {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier =
                Modifier.size(ButtonDefaults.DefaultIconSize)
                    .wrapContentSize(align = Alignment.Center),
        )
    }
}
```
### ButtonWithText
```kotlin
@Composable
fun ButtonWithText() {
    Button(
        onClick = { /* Do something */ },
        enabled = true,
        modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
    ) {
        Text("Big")
    }
}
```
### LargeButtonWithIcon
```kotlin
@Composable
fun LargeButtonWithIcon() {
    Button(
        onClick = { /* Do something */ },
        enabled = true,
        modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
    ) {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier =
                Modifier.size(ButtonDefaults.LargeIconSize)
                    .wrapContentSize(align = Alignment.Center),
        )
    }
}
```