Badges

Badges are small, capsule-shaped elements that are great for showing counts, tags, and other labels.

A simple badge is created like this:

Text {
    Badge("Unread: 500")
        .role(.danger)
}
.font(.title2)

Unread: 500

Each role applies different styling to the badge, as you can see in this example:

for role in Role.allCases {
    if role != .default {
        Text {
            Badge("This badge has the \(role.rawValue) role")
                .role(role)
        }
        .font(.lead)
    }
}

This badge has the primary role

This badge has the secondary role

This badge has the success role

This badge has the danger role

This badge has the warning role

This badge has the info role

This badge has the light role

This badge has the dark role

Badge sizes

Badges automatically adapt to the font of the text element they belong to. For example, here are badges in a range of sizes:

for font in Font.allCases {
    Text {
        Badge("This badge uses the \(font) size")
            .role(.primary)
    }
    .font(font)
}

This badge uses the title1 size

This badge uses the title2 size

This badge uses the title3 size

This badge uses the title4 size

This badge uses the title5 size

This badge uses the title6 size

This badge uses the body size

This badge uses the lead size

Badge variants

Each badge role comes in three variants: .default, .subtle, and subtleBordered. These are shown below:

for style in Badge.BadgeStyle.allCases {
    Text(markdown: "`\(style)` style:")
        .font(.title3)

    for role in Role.allCases {
        if role != .default {
            Text {
                Badge("This badge has the \(style) style and \(role.rawValue) role")
                    .badgeStyle(style)
                    .role(role)
            }
            .font(.lead)
        }
    }

    Spacer(size: 40)
}

default style:

This badge has the default style and primary role

This badge has the default style and secondary role

This badge has the default style and success role

This badge has the default style and danger role

This badge has the default style and warning role

This badge has the default style and info role

This badge has the default style and light role

This badge has the default style and dark role

subtle style:

This badge has the subtle style and primary role

This badge has the subtle style and secondary role

This badge has the subtle style and success role

This badge has the subtle style and danger role

This badge has the subtle style and warning role

This badge has the subtle style and info role

This badge has the subtle style and light role

This badge has the subtle style and dark role

subtleBordered style:

This badge has the subtleBordered style and primary role

This badge has the subtleBordered style and secondary role

This badge has the subtleBordered style and success role

This badge has the subtleBordered style and danger role

This badge has the subtleBordered style and warning role

This badge has the subtleBordered style and info role

This badge has the subtleBordered style and light role

This badge has the subtleBordered style and dark role

Created with Ignite