TicketTier

Deprecated

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

Categorymolecules

Sourcepatterns/molecules/tickettier.html

AI HintUse for grouped UI patterns. Combine atoms into functional units.

Single ticket tier row.

TicketTier

Commerce — Family 7

Single ticket tier row.

Usage

Single ticket tier row. Refer to the DS component index for full prop details.

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

Props

Preview

TicketTier

Prop

Type

Required

Default

Description

id

string

Required

—

No description.

price

number

Required

—

>=0

available

number

Required

—

>=0; if 0, tier is sold out

quantity

number

Required

—

0 to maxPerOrder

onQuantityChange

(qty: number) => void

Required

—

No description.

Quick use:<TicketTier />

Accessibility

ARIA rolegroup

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<TicketTier />

Example 2

tsxSnippet

<TicketTier variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules