---
title: Buttons
description: Button components for primary actions, secondary actions, outlines, destructive actions, and icon-only controls.
---

Use buttons for actions that submit, confirm, cancel, create, delete, or move a user through a workflow.

<UiDemo id="button-default" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/Button.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Size

<UiDemo id="button-sizes" />

### Primary

<UiDemo id="button-primary" />

### Secondary

<UiDemo id="button-secondary" />

### Outlined

<UiDemo id="button-outlined" />

### Ghost

<UiDemo id="button-ghost" />

### Destructive

<UiDemo id="button-destructive" />

### Disabled

<UiDemo id="button-disabled" />

## API Reference

### Button

A component that can be clicked.

```kotlin
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    style: ButtonStyle = ButtonStyle.Default,
    shape: Shape = buttonShapeFor(style),
    buttonSize: ButtonSize = ButtonSize.Default,
    contentPadding: PaddingValues = buttonPaddingFor(buttonSize, style),
    borderWidth: Dp = 1.dp,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    indication: Indication? = buttonIndicationFor(style),
    contentColor: Color = buttonContentColorFor(style),
    content: @Composable RowScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `onClick` | `() -> Unit` | Called when the button is activated. |
| `modifier` | `Modifier` | Modifier applied to the button. |
| `enabled` | `Boolean` | Whether the button can be interacted with. |
| `style` | `ButtonStyle` | Visual style used by the button. |
| `shape` | `Shape` | Shape used for the button container, border, and focus ring. |
| `buttonSize` | `ButtonSize` | Size used for button height, padding, and icon-only button dimensions. |
| `contentPadding` | `PaddingValues` | Padding applied inside the button bounds, around the button content. |
| `borderWidth` | `Dp` | Width of the button border when the selected style draws one. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for focus, press, hover, and indication state. |
| `indication` | `Indication?` |  |
| `contentColor` | `Color` |  |
| `content` | `@Composable RowScope.() -> Unit` | The content to display within the button. |

### IconButton

Variant of [Button] meant for square targets, such as icons.

```kotlin
@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    style: ButtonStyle = ButtonStyle.Default,
    shape: Shape = Theme[shapes][buttonShape],
    buttonSize: ButtonSize = ButtonSize.Default,
    borderWidth: Dp = 1.dp,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    indication: Indication? = buttonIndicationFor(style),
    contentColor: Color = buttonContentColorFor(style),
    content: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `onClick` | `() -> Unit` | Called when the button is activated. |
| `modifier` | `Modifier` | Modifier applied to the button. |
| `enabled` | `Boolean` | Whether the button can be interacted with. |
| `style` | `ButtonStyle` | Visual style used by the button. |
| `shape` | `Shape` | Shape used for the button container, border, and focus ring. |
| `buttonSize` | `ButtonSize` | Size used for button height, padding, and icon-only button dimensions. |
| `borderWidth` | `Dp` | Width of the button border when the selected style draws one. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for focus, press, hover, and indication state. |
| `indication` | `Indication?` |  |
| `contentColor` | `Color` |  |
| `content` | `@Composable () -> Unit` | Composable content displayed inside the button. |

### ButtonStyle

Visual style variants for Button and IconButton.

```kotlin
@JvmInline
value class ButtonStyle internal constructor(@Suppress("unused") private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Default` | The default button style. |
| `Primary` | Use for the primary action on a screen. |
| `Secondary` | Use for secondary actions. |
| `Outlined` | Use for lower-emphasis actions with an outline. |
| `Destructive` | Use for destructive actions. |
| `Ghost` | Use for low-emphasis actions without a container. |

### ButtonSize

Size variants for Button and IconButton.

```kotlin
@JvmInline
value class ButtonSize internal constructor(@Suppress("unused") private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Small` | Small button size. |
| `Regular` | Regular button size. |
| `Large` | Large button size. |
| `Default` | The default button size. |