# Label ⟩ custom styles

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [Controls](https://lochiwei.gitbook.io/ios/swiftui/control) ⟩ [Label](https://lochiwei.gitbook.io/ios/swiftui/control/label) ⟩ 

{% tabs %}
{% tab title="💈範例" %}
👉 SwiftUI ⟩ [Label](https://developer.apple.com/documentation/swiftui/label) 

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FI681SPmfUFth4Vabn9N2%2Flabel%20style%20\(red%20border\).png?alt=media\&token=0d311889-d014-4cf9-a77c-ac3e79462e49)

```swift
struct ContentView: View {
    @State private var isOn = true
    var body: some View {
        Toggle(isOn: $isOn){
            Label("Hello", systemImage: "person")
                // 🌀 .redBorder
                .labelStyle(.redBorder)    
        }
    }
}
```

{% endtab %}

{% tab title="🌀 .redBorder" %}

```swift
// ⭐️ custom label style
struct RedBorderedLabelStyle: LabelStyle {
    // ⭐️ protocol's only requirement
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .padding(4)
            .border(Color.red)
    }
}

// 🌀 .redBorder
//                   ╭───────── ⭐️ important ──────────╮
extension LabelStyle where Self == RedBorderedLabelStyle {
    // extension supports "computed properties" (no "stored properties")
    public static var redBorder: RedBorderedLabelStyle {
        RedBorderedLabelStyle()
    } 
}
```

{% endtab %}

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

* [x] Sarun ⟩ [SwiftUI Label: A standard way to label user interface items](https://sarunw.com/posts/swiftui-label-a-standard-way-to-label-user-interface-items/) ⭐️ (💈範例)
  {% endtab %}

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

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Views and Controls](https://developer.apple.com/documentation/swiftui/views-and-controls) ⟩ [Label](https://developer.apple.com/documentation/swiftui/label) ⟩ 
  * [LabelStyle](https://developer.apple.com/documentation/swiftui/labelstyle) (<mark style="color:red;">**protocol**</mark>) ⟩ [makeBody(configuration:)](https://developer.apple.com/documentation/swiftui/labelstyle/makebody\(configuration:\))
  * [.labelStyle(\_:)](https://developer.apple.com/documentation/swiftui/view/labelstyle\(_:\))
    {% endtab %}

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

* [custom-styles](https://lochiwei.gitbook.io/ios/swiftui/control/button/styles/custom-styles "mention")
  {% 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/label/builtin-styles/custom-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.