david-swift
def08fdf59
All checks were successful
Gitea Actions Demo / publish (push) Successful in 19s
68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
+++
|
|
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>
|