+++
title = "Button"
weight = 1
[extra]
section = 1
disclaimer = "These docs are incomplete."
+++

The button is one of the most common user interface elements.
Usually, buttons contain either an icon or a label.
It is not recommended to use both in most cases.

For buttons containing a label, use imperative verbs using header capitalization, such as _Save_ or _Update_.
Labels should be kept short.

## Label

<div class="pattern-images">
{{ image(url="labelGNOME.png", alt="A button with a label on GNOME") }}

{{ image(url="labelWindows.png", alt="A button with a label on Windows") }}
</div>

```swift
Button("Default") {
    print("Default")
}
```

## Icon

<div class="pattern-images">
{{ image(url="iconGNOME.png", alt="A button with an icon on GNOME") }}

{{ image(url="iconWindows.png", alt="A button with an icon on Windows") }}
</div>

```swift
Button(icon: .airplane) {
    print("Action")
}
```

## Label and Icon

<div class="pattern-images">
{{ image(url="labelIconGNOME.png", alt="A button with a label and an icon on GNOME") }}

{{ image(url="labelIconWindows.png", alt="A button with a label and an icon on Windows") }}
</div>

```swift
Button("Icon", icon: .airplane) {
    print("Icon")
}
```

## Guidelines

- <a class="external" href="https://developer.gnome.org/hig/patterns/controls/buttons.html#buttons">GNOME</a>
- <a class="external" href="https://learn.microsoft.com/en-us/windows/apps/design/controls/buttons">Windows</a>

## Documentation

- <a class="external" href="https://aparoksha.aparoksha.dev/documentation/aparoksha/button">Reference Documentation</a>
- <a class="external" href="https://adwaita-swift.aparoksha.dev/documentation/adwaita/button">Native GNOME Implementation</a>
- <a class="external" href="https://winui-swift.aparoksha.dev/documentation/winui_swift/button">Native Windows Implementation</a>