SeatMapLegend

molecules

Seat map color legend — shows price tiers with colored swatches, availability status, and accessibility icons. Critical UX pattern: seat map visualization.

ARIA Role: list

Demo

Demo for SeatMapLegend (molecules)

Seat map color legend — shows price tiers with colored swatches, availability status, and accessibility icons. Critical UX pattern: seat map visualization.

Props

Prop	Type	Required	Default
`tiers`	`SeatTier[]`	Yes	`—`
`onSelectTier`	`(tierId: string) => void`	Yes	`—`
`selectedTierId`	`string`	No	`—`

TypeScript Interface

interface SeatMapLegendProps {
  tiers: SeatTier[];
  onSelectTier: (tierId: string) => void;
  selectedTierId?: string;
}

Assertions (NASA Rule 5)

[type]tiers array must have at least 1 item(NASA Rule 5)
[aria]Each tier must have aria-label with name and price(WCAG 4.1.2)

Usage

Import

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

Basic

<Seatmaplegend />

With Variants

<Seatmaplegend variant="primary" size="md" />