SeasonPassBadge

atoms

Season pass membership badge — shows pass type, validity dates, and member tier. Used in user profile and event pages. Critical UX pattern: season pass.

ARIA Role: img

Demo

ActiveSuccessWarningErrorDefault

Props

Prop	Type	Required	Default
`passType`	`'gold' \| 'silver' \| 'bronze'`	Yes	`—`
`validFrom`	`string`	Yes	`—`
`validTo`	`string`	Yes	`—`
`memberName`	`string`	Yes	`—`

TypeScript Interface

interface SeasonPassBadgeProps {
  passType: 'gold' | 'silver' | 'bronze';
  validFrom: string;
  validTo: string;
  memberName: string;
}

Assertions (NASA Rule 5)

[type]passType must be valid enum value(NASA Rule 5)
[aria]Badge must have aria-label with pass type and member name(WCAG 4.1.2)

Usage

Import

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

Basic

<Seasonpassbadge />

With Variants

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