# Button Styles

[SwiftUI](/ios/swiftui.md) ⟩ [Controls](/ios/swiftui/control.md) ⟩ [Button](/ios/swiftui/control/button.md) ⟩ Styles

{% tabs %}
{% tab title="💾 程式" %}
📗 參考：Sundell ⟩ [Encapsulating SwiftUI view styles](https://www.swiftbysundell.com/articles/encapsulating-swiftui-view-styles/)

```swift
// ⭐️ 1. custom button style
struct PrimaryButtonStyle: ButtonStyle {
    // ⭐️ protocol requirement: makeBody()
    func makeBody(configuration: Configuration) -> some View {
        // ⭐️ button label
        configuration.label
            .foregroundColor(.white)
            .font(.body.bold())
            .padding(10)
            .padding(.horizontal, 20)
            .background(.blue)
            // ⭐️ button state
            .opacity(configuration.isPressed ? 0.5 : 1)
            .cornerRadius(10)
    }
}

// ⭐️ 2. convenience extension
private extension ButtonStyle where Self == PrimaryButtonStyle {
    // ⭐️ ButtonStyle.primary
    static var primary: Self { .init() }
}

// custom view
struct LoginView: View {
    
    @State private var username = ""
    @State private var password = ""
    
    var body: some View {
        VStack(spacing: 15) {
            TextField("Username", text: $username)
            SecureField("Password", text: $password)
            Button("Log in") {}
        }
        .textFieldStyle(.roundedBorder)
        // ⭐️ 3. apply custom button style
        .buttonStyle(.primary)
    }
}
```

![](/files/CuieTHWD6JLr3Fa5QOVq)
{% endtab %}

{% tab title="🔴 主題" %}

* [PrimitiveButtonStyle](/ios/swiftui/control/button/styles/primitivebuttonstyle.md)
* [Button ⟩ custom styles](/ios/swiftui/control/button/styles/custom-styles.md)
  {% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="<https://youtu.be/4AZSLatG2EA>" %}
{% endtab %}

{% tab title="📗 參考" %}

* [ ] Tunde ⟩ [SwiftUI Button Styles, SwiftUI Materials](https://www.youtube.com/watch?v=4AZSLatG2EA)
* [x] AppCoda ⟩ [How To Style SwiftUI Buttons in iOS 15](https://www.appcoda.com/swiftui-buttons-ios-15/)
* [x] Sundell ⟩ [Encapsulating SwiftUI view styles](https://www.swiftbysundell.com/articles/encapsulating-swiftui-view-styles/)
  {% endtab %}

{% tab title="📘 手冊" %}

* SwiftUI ⟩&#x20;
  * View ⟩ [Appearance Modifiers](https://developer.apple.com/documentation/swiftui/view-appearance) ⟩&#x20;
    * [.controlSize(\_:)](https://developer.apple.com/documentation/swiftui/view/controlsize\(_:\)) - size for controls within this view.
  * Controls ⟩ [Button](https://developer.apple.com/documentation/swiftui/button) ⟩
    * [.buttonStyle\<S: ButtonStyle>()](https://developer.apple.com/documentation/swiftui/view/buttonstyle\(_:\)-7qx1)
    * [.buttonStyle\<S: PrimitiveButtonStyle>(\_:)](https://developer.apple.com/documentation/swiftui/view/buttonstyle\(_:\)-66fbx)
    * [.buttonBorderShape(\_:)](https://developer.apple.com/documentation/swiftui/view/buttonbordershape\(_:\)) - border shape.
    * [ButtonStyle](https://developer.apple.com/documentation/swiftui/buttonstyle) (<mark style="color:red;">**protocol**</mark>) - <mark style="color:orange;">**standard**</mark> button interaction behavior.
    * [ButtonBorderShape](https://developer.apple.com/documentation/swiftui/buttonbordershape) (<mark style="color:red;">**struct**</mark>)
    * [ButtonRole](https://developer.apple.com/documentation/swiftui/buttonrole) (<mark style="color:red;">**struct**</mark>) - purpose of a button.
    * [PrimitiveButtonStyle](https://developer.apple.com/documentation/swiftui/primitivebuttonstyle) (<mark style="color:red;">**protocol**</mark>) - <mark style="color:orange;">**custom**</mark> interaction behavior & appearance.
      * .[automatic](https://developer.apple.com/documentation/swiftui/primitivebuttonstyle/automatic), .bordered, .borderedProminent, .borderless, .plain
      * .card (tvOS 14), .link (macOS 10.15)
        {% endtab %}

{% tab title="👥 相關" %}

* [Toggle Styles](/ios/swiftui/control/toggle/toggle-styles.md)
* [Label Styles](/ios/swiftui/control/label/builtin-styles.md)
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/ios/swiftui/control/button/styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.