Badges with List, ToolbarItems, TabView in SwiftUI

Badges with List, ToolbarItems, TabView in SwiftUI

SwiftUI makes adding small, informative badges to your UI elements incredibly straightforward. Badges are perfect for indicating unread messages, new items, pending actions, or status updates without taking up significant screen real estate.

This article will guide you through using the .badge() modifier in SwiftUI, demonstrating its application in List rows, ToolbarItem, TabView items, and other common scenarios with practical code examples.

Badge in a List Row

Badges are commonly used in lists to show unread counts for items like emails, notifications, or messages.

import SwiftUI

struct ListBadgeExample: View {
    var body: some View {
        NavigationView {
            List {
                Text("Inbox")
                    .badge(5) // Displays "5" badge

                Text("Favorites")
                    .badge("New!") // Displays "New!" badge
                    .badgeProminence(.standard)// The prominence to apply to badges.
                
                HStack {
                    Image(systemName: "photo.fill")
                    Text("Photos")
                }
                .badge(23) // Badge on an HStack within the List
                .badgeProminence(.increased)
                
                Text("Settings") // No badge…