Structure

Label

A standard label, consisting of an icon with a title.

---

Declaration

struct Label<Title, Icon> : View where Title : View, Icon : View

---

Overview

One of the most common and recognizable user interface components is the combination of an icon and a label. This idiom appears across many kinds of apps and shows up in collections, lists, menus of action items, and disclosable lists, just to name a few.

You create a label, in its simplest form, by providing a title and the name of an image, such as an icon from the SF Symbols collection:

struct BoltView: View {
    var body: some View {
        Label("Lightning", systemImage: "bolt.fill")
    }
}

You can also apply styles to labels in several ways. In the case of dynamic changes to the view after device rotation or change to a window size you might want to show only the text portion of the label using the title-only label style:

struct TitleOnlyBoltView: View {
    var body: some View {
        Label("Lightning", systemImage: "bolt.fill")
            .labelStyle(TitleOnlyLabelStyle())
    }
}

Conversely, there's also an icon-only label style:

struct IconOnlyBoltView: View {
    var body: some View {
    Label("Lightning", systemImage: "bolt.fill")
        .labelStyle(IconOnlyLabelStyle())
    }
}

You can also create a customized label style by modifying an existing style; this example adds a red border to the default label style:

struct RedBorderedLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .padding()
            .border(Color.red)
    }
}

struct RedBorderedBoltView: View {
    var body: some View {
        Label("Lightning", systemImage: "bolt.fill")
            .labelStyle(RedBorderedLabelStyle())
    }
}

For more extensive customization or to create a completely new label style, you'll need to adopt the LabelStyle protocol and implement a LabelStyleConfiguration for the new style.

To apply a common label style to a group of labels, apply the style to the view hierarchy that contains the labels:

struct WeatherView: View {
    var body: some View {
        VStack {
            Label("Rain", systemImage: "cloud.rain")
            Label("Snow", systemImage: "snow")
            Label("Sun", systemImage: "sun.max")
        }
        .labelStyle(IconOnlyLabelStyle())
    }
}

It's also possible to make labels using views to compose the label's icon programmatically, rather than using a pre-made image. In this example, the icon portion of the label uses a filled Circle overlaid with the user's initials:

struct CustomPersonView: View {
    var body: some View {
        Label {
            Text("Aaron")
                .font(.body)
                .foregroundColor(.primary)
            Text("GOAT")
                .font(.subheadline)
                .foregroundColor(.secondary)
        } icon: {
            Circle()
                .fill(Color.purple)
                .frame(width: 44, height: 44, alignment: .center)
                .overlay(Text("AG"))
        }
    }
}

Availability

iOS 14.0+

macOS 11.0+

tvOS 14.0+

watchOS 7.0+

Topics

---

Initializer

init(title:icon:) Creates a label with a with a view title and a view icon.

---

Type Alias

Body The type of view representing the body of this view.

---

Instance Property

body The content and behavior of the view.