SeatMapLegend

Implemented

Tier legend for the seat map. One toggle button per price tier with a color swatch, name, formatted price, and (optionally) availability. Sibling organism to SeatMap (the chart surface) and SeatPicker (the capped checkout variant). Real organism; the molecules placeholder twin was de-cataloged. Implements the seat-map family i18n convention (see also SeatMap, SeatPicker) via the SeatMapLegendLocale type.

Categoryorganisms

Sourcecomponents/organisms/SeatMapLegend/SeatMapLegend.tsx

AI HintUse as the price-tier legend for any seat map (one legend chip per tier with color swatch + name + price). Pair with SeatMap (the chart) or SeatPicker (the capped checkout variant); selection state lives in the parent. Locale-driven aria-labels and currency formatting via Intl — pass locale=fr for FR consumers. Empty state (dashed border + emptyLabel) covers the tiers=[] case so screens never see an empty bordered box. Color + text name + price carry the WCAG non-color cue; tier status (available/held/sold/blocked/inaccessible) is NOT this component's surface — that lives on SeatMap.

Tier legend for the seat map — colored swatches per tier with name, price, and availability count.

SeatMapLegend

design-system

Tier legend with one toggle button per price tier. Pair with SeatMap or SeatPicker.

Props

Preview

SeatMapLegend

Prop

Type

Required

Default

Description

tiers

SeatTier[]

Required

—

Price tiers to render, one legend chip each. SeatTier carries id, name, price, optional CSS color (rendered via inline style on the swatch — dynamic value, theme-aware fallback to var(--ep-teal)), optional available count (rendered visibly and in the tier aria-label), optional currency (ISO 4217 code; legacy dollar-sign maps to USD).

onSelectTier

(tierId: string) => void

Required

—

Called with the tier id when a legend chip is clicked. Selection state is a controlled pair with selectedTierId.

selectedTierId

string

Optional

tiers[0]?.id

Currently selected tier. When omitted the FIRST tier is treated as selected (aria-pressed=true) — pass explicitly to control.

ariaLabel

string

Optional

Seat map legend / Légende du plan de salle

Accessible name for the legend <ul>. Defaults to the locale-aware built-in; provide a custom string to override.

locale

SeatMapLegendLocale

Optional

en

Localizes the built-in ariaLabel default, the availability template, and the empty state. Matches the SeatMap/SeatPicker family convention. Type re-exported from the barrel.

emptyLabel

string

Optional

No tiers configured / Aucun tarif configuré

Rendered inside a dashed-border <ul> when tiers is empty. Defaults to the locale-aware built-in; provide a custom string to override.

className

string

Optional

—

Appended to the root <ul> element.

id

string

Optional

seatmap-legend-<useId()>

Root element id (autogenerated when omitted).

Quick use:<SeatMapLegend />

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<SeatMapLegend tiers={tiers} onSelectTier={setTierId} selectedTierId={id} />

Example 2

tsxSnippet

<SeatMapLegend tiers={tiers} onSelectTier={setTierId} locale=fr />

Anti-patterns

— Don't reimplement tier legends inline — use this organism and the seat-map family i18n conventions (locale prop + barrel types).

— Don't import the underlying ul/button directly — pair with SeatMap instead of duplicating the per-tier toggle behavior.

— Don't use the tier color as the sole information channel — text name + price carry the non-color cue; color is a redundant visual cue, not the primary signal.