data-display/DSPromoLabel

DSPromoLabel

data-display

since 0.1.0

Promotional label for discounts, new items, or special badges.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Use to highlight promotions, discounts, or special features. Eye-catching accent for marketing content.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
textreq	String	—	Promo text (first, unlabeled argument), e.g. "-20%" or "NEW".
color	Color	DSColor.error	Fill and text tint.
accessibilityLabel	String?	nil	VoiceOver label; falls back to text.

Examples

Discount badge

Show a discount on a product card.

swift

ZStack(alignment: .topTrailing) {
    ProductCard(product)
    DSPromoLabel("-20%")
        .padding(DSSpacing.sm)
}

New feature

Highlight new features.

swift

HStack {
    DSText("Dark Mode", style: .body)
    DSPromoLabel("NEW", color: DSColor.info)
}

Usage Guidelines

Keep text very short (2-4 characters for discounts)
Use bright, attention-grabbing colors
Position in top-right corner of cards or inline with text

Related Components

Badge Tag StatusLabel