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.