Badges (SwiftUI)

The badge view modifier (SwiftUI Release 3, iOS 15+ and macOS) shows a count or short label on a list row or tab item. Only lists and tabs render badges; on other views the modifier does nothing.

Counts and Strings

Pass an integer and the list draws it at the trailing edge of the row. SwiftUI formats the number for the current locale and hides the badge automatically when the value is zero.

List {
  Text("Group 1")
    .badge(12)

  Text("Group 2")
    .badge(20)
}

A string overload works on tab items. Badges on tabs have little room, so keep the text short. The modifier is inert with nil, which makes conditional badges one expression:

TabView {
  Text("Hello World")
    .tabItem {
      Text("Favorites")
      Image(systemName: "star")
    }
    .badge(count > 0 ? "\(count) stars" : nil)
}

Styled Badges with Text

A third overload accepts a Text view, so every Text modifier applies, and string interpolation can embed an SF Symbol image.

Text("Group 3")
  .badge(
    Text("31 \(Image(systemName: "star"))")
      .foregroundColor(.red)
      .font(.headline)
  )