Gavin Wiggins

About   Notes   Photos

---

Label

Written on November 13, 2022

Use a Label to show text and an icon side by side. The icon can be either an SF Symbol or your own image. The label can be scaled with the font modifier. A completely custom label can be created using custom views for the text and icon.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Small and large label:").padding(8)
            Label("Cloudy", systemImage: "cloud.fill")
            Label("Cloudy", systemImage: "cloud.fill").font(.title)

            Text("Show only the title or icon:").padding(8)
            Label("Cloudy", systemImage: "cloud.fill").labelStyle(.titleOnly)
            Label("Cloudy", systemImage: "cloud.fill").labelStyle(.iconOnly)

            Text("Custom label:").padding(8)
            Label {
                Text("My Label").font(.headline)
                    .padding(3)
                    .background(.gray.opacity(0.4))
            } icon: {
                RoundedRectangle(cornerRadius: 8)
                    .fill(.purple)
                    .frame(width: 20, height: 20)
            }
        }
        .frame(width: 400, height: 300)
    }
}