SeasonPassBadge

Implemented

Season-pass loyalty tier badge — tier-colored diamond + label pill (gold/silver/bronze/platinum). Describes WHO the holder is; distinct from CategoryPill (ticket tier) and StatusBadge (lifecycle state). Exported from the barrel; role=img with derived aria-label.

Categoryatoms

Sourcepatterns/atoms/seasonpassbadge.html

AI HintSeason-pass LOYALTY tier badge (diamond + label). Pick by semantics, not shape: SeasonPassBadge = who the holder is (membership); CategoryPill = which tier the ticket is (shares platinum/silver/gold names — different domain); StatusBadge = lifecycle state; Badge = numeric count. Tier colors are 8%/20% color-mix tints of existing tokens (amber/neutral-500/warning-fg/pink) — dark mode adapts automatically, no new tokens.

Season-pass loyalty tier badge — tier-colored diamond + label. Says WHO the holder is (gold/silver/bronze/platinum membership), not which ticket tier it is (CategoryPill) and not a lifecycle state (StatusBadge).

SeasonPassBadge

Display atom (Family 2)

Renders a rounded-full pill: a decorative tier-colored diamond (aria-hidden, rotate-45) plus the label. Colors come from existing tokens tinted via color-mix() (ADR-027) — no raw values, no new tokens, dark mode adapts automatically.

BronzeSilverGoldPlatinumGoldGold

This component supports light and dark mode.

Usage

Import from the barrel and render the tier. tier defaults to gold; label defaults to the capitalized tier name. The component is a static display element — no interactive state.

import { SeasonPassBadge } from '@epasslive/design-system'

<SeasonPassBadge tier="gold" />
<SeasonPassBadge tier="platinum" label="Platine VIP" size="lg" />
<SeasonPassBadge tier="silver" label="Argent" ariaLabel="Membre passe de saison Argent" />

Which pill? (4-way disambiguation)

Four DS components look like "a colored pill with a label". Pick by semantics, not by shape:

Component

Semantics

Interaction

Use for

SeasonPassBadge

Season-pass loyalty tier (gold/silver/bronze/platinum)

Static

Membership tier of a season-pass holder.

StatusBadge

State (confirmed, pending, refunded…)

Static

Order/booking/event lifecycle states.

CategoryPill

Ticket category (diamond/platinum/silver/gold/CAT 1–3)

Static

Displaying which category a ticket/price belongs to.

FilterChipGroup

Selection state of filter options

Interactive (role="group", aria-pressed buttons)

Choosing filter criteria — needs selection state.

Metallic-name trap: platinum/silver/gold exist on both SeasonPassBadge (loyalty tier) and CategoryPill (ticket category). If the value describes who the holder is, use SeasonPassBadge; if it describes which ticket tier this is, use CategoryPill.

Localization

Default labels are English proper nouns rendered from the component (Gold, Silver, Bronze, Platinum). The label prop is the localization hook — pass the translated term from your catalog. The default aria-label is derived from the visible label ("Or VIP season pass member"); override with ariaLabel when the announced phrase needs its own translation.

// FR
<SeasonPassBadge tier="gold" label="Or VIP" ariaLabel="Membre passe de saison Or VIP" />
<SeasonPassBadge tier="platinum" label="Platine" />

Dark mode

Backgrounds and borders are 8%/20% tints computed at runtime via color-mix(in oklab, var(--ep-*) N%, transparent) — when the referenced tokens swap in dark mode, the tints adapt automatically (ADR-027). Every referenced token (--ep-amber, --ep-neutral-500, --ep-semantic-warning-fg, --ep-pink) has a dark override in globals.css. The bronze tier reuses the warning-fg brown as a color VALUE (the diamond is decorative and aria-hidden — no semantic claim).

Accessibility

Non-interactive glyph unit: role="img" with an aria-label announcing the pass type (default "Gold season pass member") — aria-label is prohibited on a generic span (axe aria-prohibited-attr) but allowed on role=img, per the PatternMeta contract. The tier diamond is aria-hidden decoration. Pill text is the inherited body text token on an 8% tint — WCAG AA 4.5:1 in both themes.

Props

Prop

Type

Default

Description

tier

'gold' | 'silver' | 'bronze' | 'platinum'

gold

Loyalty tier — drives the diamond color and the token tint of the pill background/border.

label

string

capitalized tier name

Override the visible label. Localization hook — defaults are English proper nouns (Gold, Silver, Bronze, Platinum). Pass the translated term, e.g. "Or VIP".

size

'sm' | 'md' | 'lg'

md

Badge size preset — scales padding, diamond and text.

ariaLabel

string

—

Override the announced label. Defaults to "<label> season pass member".

Props

Preview

SeasonPassBadge

Prop

Type

Required

Default

Description

tier

'gold' | 'silver' | 'bronze' | 'platinum'

Optional

'gold'

Loyalty tier — drives the decorative diamond color and the color-mix token tint of the pill background/border.

label

string

Optional

capitalized tier name

Visible label text. Localization hook — defaults are English proper nouns (Gold, Silver, Bronze, Platinum); pass the translated term, e.g. "Or VIP".

size

'sm' | 'md' | 'lg'

Optional

'md'

Badge size preset — scales padding, diamond and text (sm 10px / md text-ep-xs / lg text-ep-sm).

ariaLabel

string

Optional

'<label> season pass member'

Override the announced label (WCAG 4.1.2). Default announces the pass type, not just the tier color.

Quick use:<SeasonPassBadge />

Accessibility

ARIA roleimg

Usage

Import

tsxSnippet

import { SeasonPassBadge } from "@epasslive/design-system"

Example 1

tsxSnippet

<SeasonPassBadge tier='gold' label='Season Pass' />

Example 2

tsxSnippet

<SeasonPassBadge tier='silver' size='sm' label='Silver Member' />

Anti-patterns

— Do not use for ticket categories (Diamond/Platinum/CAT 1-3) — use CategoryPill

— Do not use for order/fulfilment state — use StatusBadge

— Avoid raw tier colors — the component already derives tints from tokens