Design System
Components

Badge

Offer and status badges in three sizes — compact labels for promotions, counts and states.

Figma description · 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.

3 active
New plan20% offBest sellerLimited time
Props
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 offer for 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 status for a short state on a row or card: neutral, positive, warning, danger, disabled, and neutral-inverse on 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

sizeHeightMin widthRadiusType
sm16406badge/sm
md20566badge/md
lg24648badge/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

PropTypeDefaultDescription
chevron?booleanfalseFigma .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/xs at sm, spacing/xs × spacing/sm at md and lg.
  • Radius border-radius/2 (6) at sm and md, border-radius/3 (8) at lg; heights and minimum widths bind scale/*.
  • Colours are badge/surface/<offer|status> behind badge/text/<offer|status>.

On this page