> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/control/button/styles.md).

# 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)
    }
}
```

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FvnqRnzPlPqPySysyKDZU%2Floginview.png?alt=media\&token=f4217da7-1284-4c5b-9b79-9f944dbab6f5)
{% 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 %}