> 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/label.md).

# Label

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

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

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

{% tab title="💈範例" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FBNvYGuddsl8VwytMZObn%2Flabels.png?alt=media\&token=dc5fc0de-775b-43c9-a927-a84c009c0a41)

```swift
struct ContentView: View {
    
    // view body
    var body: some View {
        VStack {
            favLabel
            bondLabel
            weatherLabels
        }
    }
    
    // favorites label
    var favLabel: some View {
        Label {
            Text("Favorites")
                .bold()
                .foregroundColor(.green)    // ⭐️ title color
        } icon: {
            Image(systemName: "heart")
                .symbolVariant(.fill)
                .foregroundColor(.pink)     // ⭐️ icon color
        }
    }
    
    // james bond label
    var bondLabel: some View {
        Label {
            // ⭐️ multiple texts
            Text("James Bond")
                .font(.body)
                .foregroundColor(.primary)
            Text("Mr.")
                .font(.subheadline)
                .foregroundColor(.secondary)
        } icon: {
            // ⭐️ custom icon
            Circle()
                .fill(Color.orange)
                .frame(width: 44, height: 44, alignment: .center)
                .overlay(Text("JB"))
        }
    }
    
    var weatherLabels: some View {
        HStack {
            Label("Rain", systemImage: "cloud.rain")
                .foregroundColor(.cyan)
            Label("Snow", systemImage: "snow")
            Label("Sun", systemImage: "sun.max")
                .foregroundColor(.yellow)
        }
        .labelStyle(.iconOnly)    // ⭐️ icon only
    }
}
```

{% endtab %}

{% tab title="🔸 定義" %}

```swift
struct Label<Title: View, Icon: View>
```

{% endtab %}

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

* [ ] Paul ⟩ [How to show text and an icon side by side using Label](https://www.hackingwithswift.com/quick-start/swiftui/how-to-show-text-and-an-icon-side-by-side-using-label)
* [ ] Simple Swfit Guide ⟩ [SwiftUI Label Tutorial](https://www.simpleswiftguide.com/swiftui-label-tutorial-how-to-create-and-use-label-in-swiftui/)
* [ ] Sarun ⟩
  * [ ] [How to change the color of SF Symbols](https://sarunw.com/posts/how-to-change-color-of-sf-symbols/)
  * [ ] [SwiftUI Label: A standard way to label user interface items](https://sarunw.com/posts/swiftui-label-a-standard-way-to-label-user-interface-items/) ⭐️
  *
* [ ] FIVE STARS ⟩ [SwiftUI's Label](https://www.fivestars.blog/articles/label/) - with custom LabelStyle ⭐️&#x20;
  {% 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) ⟩&#x20;
  * [LabelStyle](https://developer.apple.com/documentation/swiftui/labelstyle) (<mark style="color:red;">**protocol**</mark>)
  * [.labelStyle(\_:)](https://developer.apple.com/documentation/swiftui/view/labelstyle\(_:\))
    {% endtab %}

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

* [Button](/ios/swiftui/control/button.md)
* [Toggle](/ios/swiftui/control/toggle.md)
* uses [SF Symbols](/ios/swiftui/control/image/sf-symbols.md).
* used by [TabView](/ios/swiftui/container/presentation/tabview.md) as tab labels.
  {% endtab %}

{% tab title="🗣 討論" %}

* [difference between accent, foreground and tint color?](https://stackoverflow.com/questions/68398048/swiftui-difference-between-accent-foreground-and-tint-color)
  {% endtab %}
  {% endtabs %}