david-swift
3606caa51c
All checks were successful
Gitea Actions Demo / publish (push) Successful in 21s
68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
+++
|
|
title = "Button"
|
|
description = "Let the user trigger an event."
|
|
date = 2024-11-15
|
|
[taxonomies]
|
|
tags = ["Aparoksha", "Windows", "Linux", "macOS"]
|
|
+++
|
|
|
|
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>
|