CategoryPill

Implemented

Ticket-category pill (Diamond, Platinum, Silver, Gold, CAT 1/2/3). Distinct from StatusBadge (state) — encodes categorization only. Tints derived via color-mix() from existing CSS variables so dark-mode adapts automatically.

Categorymolecules

Sourcepatterns/molecules/categorypill.html

AI HintStatic ticket-category badge (dot + label). For interactive filtering use FilterChipGroup; for order/fulfilment state use StatusBadge; for season-pass loyalty tiers use SeasonPassBadge (shares platinum/silver/gold names — different domain). Non-interactive by design.

Static ticket-category badge (dot + label) for Diamond, Platinum, Silver, Gold and CAT 1–3. Categorization only — not a state badge and not an interactive filter chip.

CategoryPill

Display molecule (Tier 1)

Renders a rounded-full pill: a decorative color dot (aria-hidden) plus the category label. Colors come from existing brand tokens tinted via color-mix() (ADR-027) — no raw values, and dark mode adapts automatically.

DiamondPlatinumSilverGoldCAT 1CAT 2CAT 3Or VIP

This component supports light and dark mode.

Usage

category is required — the pill always names a concrete category. CategoryPill is a plain <span>: it renders text, it is not focusable, and it carries no aria-pressed or role="radio" semantics. It is not a filter control.

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

<CategoryPill category="gold" />
<CategoryPill category="diamond" label="VIP Diamond" />
<CategoryPill category="cat1" label="CAT 1 — Floor" />

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

StatusBadge

State (confirmed, pending, refunded…)

Static

Order/booking/event lifecycle states.

SeasonPassBadge

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

Static

Membership tier of a season-pass holder.

FilterChipGroup

Selection state of filter options

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

Choosing filter criteria — needs selection state.

CategoryPill

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

Static

Displaying which category a ticket/price belongs to.

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 (Diamond, Platinum, Silver, Gold, CAT 1–CAT 3). The label prop is the localization hook — pass the translated term from your catalog. The component itself has no i18n strings (no interactive/aria copy), so no DS translation keys are needed.

// FR
<CategoryPill category="gold" label="Or VIP" />
<CategoryPill category="diamond" label="Diamant" />

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-blue, --ep-pink, --ep-neutral-500, --ep-border-strong) has a dark override in globals.css.

Accessibility

Static display element — the accessible name comes from the visible label text content (the decorative dot is aria-hidden). There is deliberately no aria-label on the generic span (axe aria-prohibited-attr) and no interactive role: this is not a filter control. Keep it inside the reading order next to the item it categorizes.

Props

Prop

Type

Default

Description

category*

'diamond' | 'platinum' | 'silver' | 'gold' | 'cat1' | 'cat2' | 'cat3'

—

Category key — drives the dot color and the token tint of the pill background/border.

label

string

—

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

className

string

—

Additional CSS classes appended to the pill container.

Props

Preview

CategoryPill

Prop

Type

Required

Default

Description

category

'diamond' | 'platinum' | 'silver' | 'gold' | 'cat1' | 'cat2' | 'cat3'

Required

—

Category key — drives the dot color and the tint background (dark-mode adapts via color-mix()).

label

string

Optional

sentence-case category name

Override the default label — the localization hook (defaults are EN proper nouns; pass e.g. "Or VIP").

className

string

Optional

—

Additional CSS classes.

Quick use:<CategoryPill />

Accessibility

ARIA rolegeneric

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<CategoryPill category="gold" />

Example 2

tsxSnippet

<CategoryPill category="diamond" label="VIP Diamond" />

Anti-patterns

— Do not use for state (paid/refunded) — that is StatusBadge's domain

— Do not wire click handlers onto it — it renders spans, not a control