跳转至
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")
    }
}
A view containing a label with the title "Lightning" preceded by a black-filled lightning bolt symbol from the SF symbols collection.

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())
    }
}
A view containing a title only label with the title "Lightning".

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

struct IconOnlyBoltView: View {
    var body: some View {
    Label("Lightning", systemImage: "bolt.fill")
        .labelStyle(IconOnlyLabelStyle())
    }
}
A view containing an icon only label with no visible title and a black-filled lightning bolt symbol from the SF symbols collection.

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())
    }
}
A view containing a bordered label with the title "Lightning" preceded by a black-filled lightning bold symbol from the SF symbols collection surrounded red border with padding between.

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())
    }
}
A view containing a VStack with three icon only labels, each with a different icon from the SF symbols collection: a rain cloud, a snowflake, and a shining sun.

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"))
        }
    }
}
A view containing a label with two text views, "Aaron" with body style font and primary coloring and "Goat" with subheadline style font and secondary coloring; the label icon is a purple-filled circle with a width of 44, hieght of 44, center alignmnet, and an overlay with the text "AG".the former.

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.