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