Badge
Offer and status badges in three sizes — compact labels for promotions, counts and states.
badges-offersOpen in Figma ↗Use for: a compact offer-status label attached to an eligible card, including a verified discount or limited-time offer.
Not for: standalone headings or unverified promotions.
Choosing: choose type=Discount only when a valid discount is present; choose size according to the host card without resizing the badge.
Rules: keep attached to its host card; do not invent offer claims; use at most one primary offer badge per card.
import SwiftUI import EandTokens // V1.2 badge: sm 16 / md 20 / lg 24 tall, min width 40 / 56 / 64, // radius 6 / 6 / 8 (radius2, radius2, radius3). Optional trailing chevron. struct OfferBadge: View { let text: String var chevron = false var body: some View { HStack(spacing: 0) { Text(text).font(.system(size: EandTypography.badgeMd.size, weight: EandTypography.badgeMd.weight)) if chevron { Image(systemName: "chevron.right").font(.system(size: EandIcon.sm - 2, weight: .bold)) .frame(width: EandIcon.md, height: EandIcon.md) // 12pt glyph box } } .foregroundColor(EandColor.badgeTextOffersNewPlan) .padding(.vertical, EandSpacing.xs) .padding(.leading, EandSpacing.sm) .padding(.trailing, chevron ? 0 : EandSpacing.sm) .frame(minWidth: EandScale.scale56).frame(height: EandScale.scale20) .background(EandColor.badgeSurfaceOffersNewPlan) .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius2)) // md = 6 } }
When to use
- Use
offerfor merchandising labels on cards and products: New, Discount, Mega deals, Limited stock, Best seller, Online exclusive, Sold out and the rest of the published set. - Use
statusfor a short state on a row or card:neutral,positive,warning,danger,disabled, andneutral-inverseon dark surfaces. - Don't use a badge as a control. A selectable or removable label is a Chip; a live status with a dot is a StatusIndicator.
Choosing a size
size | Height | Min width | Radius | Type |
|---|---|---|---|---|
sm | 16 | 40 | 6 | badge/sm |
md | 20 | 56 | 6 | badge/md |
lg | 24 | 64 | 8 | badge/lg |
chevron adds a trailing chevron-right-filled. Every published badge ships with it off.
status="brand" has no Figma counterpart and is kept only until design confirms its removal.
Tier badges (Platinum, Gold, Silver, Bronze) are not built: their gradients have no tokens yet.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
chevron? | boolean | false | Figma .badges-core chevron: a trailing chevron after the label. Every published
badge ships with it off. |
offer? | 'discount' | 'new-card' | 'new-plan' | 'mega-deals' | 'green-friday' | 'limited-stock' | 'validity' | 'limited-time' | 'best-seller' | 'online-exclusive' | 'exclusive-for-emirati' | 'sold-out' | — | |
size? | 'lg' | 'md' | 'sm' | md | |
status? | 'brand' | 'disabled' | 'warning' | 'positive' | 'danger' | 'neutral' | 'neutral-inverse' | neutral |
Design
Figma source: badges-offers — etisalat Consumer App DSL V1.2 · badges-status
- Padding
spacing/2xs×spacing/xsatsm,spacing/xs×spacing/smatmdandlg. - Radius
border-radius/2(6) atsmandmd,border-radius/3(8) atlg; heights and minimum widths bindscale/*. - Colours are
badge/surface/<offer|status>behindbadge/text/<offer|status>.