Label is a user interface item in SwiftUI which enables you to display a combination of an image (icon, SF Symbol or other) and a text label in a single UI element. This tutorial shows you how to create and use a Label in SwiftUI.
In it’s simplest form, a Label with SF Symbol and text can be created like this:
Label("SwiftUI Tutorials", systemImage: "book.fill")The result should look like this:
Display a label with title only
Use the labelStyle() modifier to apply a title only style:
Label("SwiftUI Tutorials", systemImage: "book.fill")
.labelStyle(TitleOnlyLabelStyle())Display a label with image only
Use the labelStyle() modifier to apply an image only style:
Label("SwiftUI Tutorials", systemImage: "book.fill")
.labelStyle(IconOnlyLabelStyle())Use your own image in a label
First, make sure to add an image to your Xcode project.
Then, use the image name directly in label’s initializer like this:
Label("SwiftUI Tutorials", systemImage: "my-custom-image")Change the size of a label
You can change the size of the entire label by applying the font() modifier to it by using a pre-existing type property:
Label("SwiftUI Tutorials", systemImage: "book.fill")
.font(.largeTitle)Or pass a desired font size like this:
Label("SwiftUI Tutorials", systemImage: "book.fill")
.font(.system(size: 56.0))Create SwiftUI labels using custom views
A label can also be created using custom title and image closures for more flexibility and control over its appearance.
For example, a label can be created using a custom text view having red color and an image view being blue:
Label {
Text("SwiftUI")
.foregroundColor(Color.red)
} icon: {
Image(systemName: "keyboard")
.foregroundColor(Color.blue)
}The result should look like this:
Use a shape in place of label’s image
Using the above initialization method, a SwiftUI shape can be used in place of label’s image. In this example we’re going to use a Capsule shape:
Label {
Text("SwiftUI")
} icon: {
Capsule().frame(width: 22, height: 44)
}It should look like this:
Fully customize SwiftUI labels
In order to fully customize a label or to create brand new label styles, you’ll need to implement the LabelStyle protocol.
Create new MyCustomLabelStyle struct adopting the LabelStyle protocol which needs to implement the required makeBody() method. A code template for this looks like this:
struct MyCustomLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
// Your custom code here
}
}The above code is just a starting point so let’s explore how this can be applied in multiple examples.
Add a background color to a label
Create new YellowBackgroundLabelStyle which adds some padding around the label and makes its background color yellow:
struct YellowBackgroundLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
Label(configuration)
.padding()
.background(Color.yellow)
}
}Now, apply this new style to your label:
Label("SwiftUI Tutorials", systemImage: "book.fill")
.labelStyle(YellowBackgroundLabelStyle())And the result should look like this:
Create a vertical SwiftUI label
Finally, let’s explore how to re-arrange the elements of the label to make it stack them up vertically. For that purpose, we’re going to implement the view that represents the body of a label as a VStack. You can access individual elements of the label (e.g., icon and title) through the configuration properties of the label and put them inside of the VStack:
struct VerticalLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
VStack {
configuration.icon
configuration.title
}
}
}
Label("SwiftUI Tutorials", systemImage: "book.fill")
.labelStyle(VerticalLabelStyle())
Related tutorials:
Take a look at Apple’s official documentation of Label.