📦Label

SwiftUI ⟩ Controls ⟩

struct ContentView: View {
    
    // view body
    var body: some View {
        VStack {
            favLabel
            bondLabel
            weatherLabels
        }
    }
    
    // favorites label
    var favLabel: some View {
        Label {
            Text("Favorites")
                .bold()
                .foregroundColor(.green)    // ⭐️ title color
        } icon: {
            Image(systemName: "heart")
                .symbolVariant(.fill)
                .foregroundColor(.pink)     // ⭐️ icon color
        }
    }
    
    // james bond label
    var bondLabel: some View {
        Label {
            // ⭐️ multiple texts
            Text("James Bond")
                .font(.body)
                .foregroundColor(.primary)
            Text("Mr.")
                .font(.subheadline)
                .foregroundColor(.secondary)
        } icon: {
            // ⭐️ custom icon
            Circle()
                .fill(Color.orange)
                .frame(width: 44, height: 44, alignment: .center)
                .overlay(Text("JB"))
        }
    }
    
    var weatherLabels: some View {
        HStack {
            Label("Rain", systemImage: "cloud.rain")
                .foregroundColor(.cyan)
            Label("Snow", systemImage: "snow")
            Label("Sun", systemImage: "sun.max")
                .foregroundColor(.yellow)
        }
        .labelStyle(.iconOnly)    // ⭐️ icon only
    }
}

struct Label<Title: View, Icon: View>

PreviousImageRenderer NextLabel Styles

Last updated 2 years ago

struct ContentView: View { // view body var body: some View { VStack { favLabel bondLabel weatherLabels } } // favorites label var favLabel: some View { Label { Text("Favorites") .bold() .foregroundColor(.green) // ⭐️ title color } icon: { Image(systemName: "heart") .symbolVariant(.fill) .foregroundColor(.pink) // ⭐️ icon color } } // james bond label var bondLabel: some View { Label { // ⭐️ multiple texts Text("James Bond") .font(.body) .foregroundColor(.primary) Text("Mr.") .font(.subheadline) .foregroundColor(.secondary) } icon: { // ⭐️ custom icon Circle() .fill(Color.orange) .frame(width: 44, height: 44, alignment: .center) .overlay(Text("JB")) } } var weatherLabels: some View { HStack { Label("Rain", systemImage: "cloud.rain") .foregroundColor(.cyan) Label("Snow", systemImage: "snow") Label("Sun", systemImage: "sun.max") .foregroundColor(.yellow) } .labelStyle(.iconOnly) // ⭐️ icon only } }