How to add a badge to TabView items and List rows 관련

SwiftUI by Example

---

Back to Home

---

How to add a badge to TabView items and List rows | SwiftUI by Example

---

How to add a badge to TabView items and List rows

Updated for Xcode 15

New in iOS 15

SwiftUI's badge() modifier lets us add numbers and text to tab view items and list rows, with the purpose of drawing the user's attention to some supplementary status information – something like a number over a tab icon to represent an unread message count, for example.

For example, if you wanted to show the number 5 in red over a tab item, you would use this:

TabView {
    Text("Your home screen here")
        .tabItem {
            Label("Home", systemImage: "house")
        }
        .badge(5)
}

Download this as an Xcode project

Some text above a blue label. The label's house icon has a circular red badge in the top right containing the number 5.

Badges work just as well with list rows, and automatically appear as right-aligned text in a secondary color. For example, we could make static list rows similar to the iOS Settings app like this:

List {
    Text("Wi-Fi")
        .badge("LAN Solo")

    Text("Bluetooth")
        .badge("On")
}

Download this as an Xcode project

A list of two rows, containing “Wi-Fi” beside “LAN Solo”, and “Bluetooth” beside “On”.

Similar solutions…

Adding TabView and tabItem() | SwiftUI by Example

---

Adding TabView and tabItem()

SwiftUI tips and tricks | SwiftUI by Example

---

SwiftUI tips and tricks

How to let users move rows in a list | SwiftUI by Example

---

How to let users move rows in a list

How to embed views in a tab bar using TabView | SwiftUI by Example

---

How to embed views in a tab bar using TabView

All SwiftUI property wrappers explained and compared | SwiftUI by Example

---

All SwiftUI property wrappers explained and compared