SwiftUI Label Code and Examples

SwiftUI’s Label view combines text and icons, offering a customizable, intuitive, and accessible way to present information in interfaces.
Written by

Joash Tubaga

Updated on

May 23 2024

Table of contents

Overview

SwiftUI provides a straightforward way to create and manage labels, which combine text and icons in a highly customizable format. This article explores how to utilize the Label view in SwiftUI, offering a cohesive way to present a text alongside an image, making interfaces more intuitive and accessible.

Code Snippet

Swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Label("Welcome to SwiftUI", systemImage: "star.fill")
                .font(.title)
                .foregroundColor(.blue)
                
            Label("Start Learning", systemImage: "book.closed.fill")
                .font(.subheadline)
                .foregroundColor(.green)
        }
    }
}

Code Explanation

  • Label: Creates a label view that combines a text view with an image view.
  • "Welcome to SwiftUI": The text displayed in the label.
  • systemImage: "star.fill": Specifies the SF Symbols icon to display alongside the text.
  • .font(.title): Sets the font style of the label’s text to title size.
  • .foregroundColor(.blue): Changes the color of the text and icon to blue.
  • The second label follows a similar structure but with different text, system image, and styling to demonstrate versatility.

Using Label in SwiftUI not only enriches the UI with a mix of text and images but also ensures a consistent design that enhances user experience. Its simple implementation allows for quick integrations into any part of your app, supporting a more dynamic and visually appealing interface.



Get started for free

Join over 2,000+ students actively learning with CodeWithChris