data-display/DSPromoLabel

DSPromoLabel

data-display
since 1.2.0

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

iOSmacOS

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

PropTypeDefaultDescription
textreqString—Promo text (e.g., '-20%', 'New')
colorColorDSColor.accentBackground color

Examples

Discount badge

Show discount on product card.

swift
ZStack(alignment: .topTrailing) {
    ProductCard(product)
    DSPromoLabel(text: "-20%", color: DSColor.error)
        .padding(DSSpacing.sm)
}

New feature

Highlight new features.

swift
HStack {
    Text("Dark Mode")
    DSPromoLabel(text: "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

BadgeTagStatusLabel