TicketTier

molecules

Single ticket tier — name, description, price, availability indicator, quantity stepper. Disabled when sold out.

ARIA Role: group

Demo

Demo for TicketTier (molecules)

Single ticket tier — name, description, price, availability indicator, quantity stepper. Disabled when sold out.

Props

Prop	Type	Required	Default	Description
`id`	`string`	Yes	`—`
`price`	`number`	Yes	`—`	>=0
`available`	`number`	Yes	`—`	>=0; if 0, tier is sold out
`quantity`	`number`	Yes	`—`	0 to maxPerOrder
`onQuantityChange`	`(qty: number) => void`	Yes	`—`

TypeScript Interface

interface TicketTierProps {
  id: string;
  name: string;
  description?: string;
  price: number;
  currency: string;
  available: number;
  maxPerOrder: number;
  quantity: number;
  onQuantityChange: (qty: number) => void;
  perks?: string[];
  highlighted?: boolean;
}

Assertions (NASA Rule 5)

[type]quantity in [0, maxPerOrder]; available >= 0 (NASA Rule 7)(NASA Rule 7)
[aria]Stepper buttons have aria-label; live region announces availability(WCAG 4.1.3)

Usage

Import

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

Basic

<Tickettier />

With Variants

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