data-display/DSBadge

DSBadge

data-display

since v1.0

Compact label with 3 visual variants (filled, soft, outline), gradient support, and 3 size options.

iOS 17+macOS 14+watchOS 10+

Purpose

Status indicators, notification counts, and category labels with optional gradient styling.

Variants

Filled

.filled

Solid background. High contrast.

Soft

.soft

Tinted background with matching text. Default.

Outline

.outline

Border only. Lightest visual weight.

Props

Prop	Type	Default	Description
labelreq	String	—	Badge text.
variant	DSBadgeVariant	.soft	Visual style.
color	Color	DSColor.primary	Semantic colour (used if gradient is nil).
gradient	LinearGradient?	nil	Optional gradient (overrides color for filled variant).
icon	String?	nil	Optional leading SF Symbol.
size	DSBadgeSize	.md	Badge size: .sm, .md, or .lg.

Examples

Status badges

Order statuses in a list.

swift

DSBadge("Active", color: DSColor.success)
DSBadge("Pending", color: DSColor.warning)
DSBadge("Cancelled", variant: .outline, color: DSColor.error)

Notification count

Badge with count on navigation item.

swift

HStack {
    Image(systemName: "bell")
    DSBadge("3", variant: .filled, color: DSColor.error, size: .sm)
}

Category badges with gradients

Use DSColor.Category for themed badges.

swift

HStack {
    DSBadge("Chest", category: .category1, icon: "figure.arms.open")
    DSBadge("Back", category: .category2, icon: "figure.walk")
    DSBadge("Legs", category: .category3, icon: "figure.run")
}

Different sizes

Small, medium, and large badges.

swift

VStack(alignment: .leading, spacing: 8) {
    DSBadge("Small", size: .sm)
    DSBadge("Medium", size: .md)
    DSBadge("Large", size: .lg, icon: "star.fill")
}

Composition: Card with badges

Product card with multiple status badges.

swift

DSCard {
    VStack(alignment: .leading, spacing: DSSpacing.sm) {
        HStack {
            Text(product.name)
                .font(.system(size: 16, weight: .semibold))
            Spacer()
            DSBadge("New", variant: .filled, color: DSColor.info)
        }
        
        HStack {
            DSBadge("In Stock", icon: "checkmark", color: DSColor.success)
            DSBadge("Sale", color: DSColor.accent)
        }
    }
}