How it works
BadgeProminence is a value type that describes how strongly a badge should draw attention relative to the rest of your interface. SwiftUI uses it to decide whether a badge reads as a high-priority signal, a neutral count, or a muted detail — without you having to hand-tune its color or weight. Reach for it when the same kind of badge needs different emphasis depending on what it represents, such as urgent items versus routine ones.
Attach a badge with badge(_:)
A prominence only matters once a view actually carries a badge, so you first add one. In the example each row applies
.badge(8),.badge(2), and.badge(15)to aTextlabel inside aList, giving SwiftUI something for the prominence to style.Set the emphasis with badgeProminence(_:)
The
badgeProminence(_:)modifier takes aBadgeProminencevalue and applies it to the badge in that part of the view hierarchy. In the example it is chained directly after each.badge(...), as in.badgeProminence(.increased), so each row's count is rendered at its own emphasis level.Choose a level: standard, increased, or decreased
BadgeProminence exposes three constants.
.standardis the default treatment,.increasedpushes the badge to a more attention-grabbing appearance for high-priority content, and.decreasedtones it down for low-priority detail. The example uses all three —.increasedon Recents,.standardon Flagged, and.decreasedon Junk — to show the spread side by side.Let it propagate through the environment
Because badgeProminence(_:) flows down the view hierarchy like other environment-style modifiers, you can set it once on a container to affect every badge beneath it, or override it per view as the example does on each individual
Textrow.
.badgeProminence(.decreased) on the Junk row to .increased and compare it against the Recents row to see how the same modifier shifts a badge between muted and emphasized.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct BadgeProminenceDemo: View {
var body: some View {
List {
Text("Recents")
.badge(8)
.badgeProminence(.increased)
Text("Flagged")
.badge(2)
.badgeProminence(.standard)
Text("Junk")
.badge(15)
.badgeProminence(.decreased)
}
.padding()
}
}