StatusPill

molecules

Status indicator pill — 11px/600, 20px radius. Variants: confirmed (green), pending (amber), cancelled (red). 6px dot prefix in current color.

ARIA Role: status

Demo

Demo for StatusPill (molecules)

Status indicator pill — 11px/600, 20px radius. Variants: confirmed (green), pending (amber), cancelled (red). 6px dot prefix in current color.

Props

PropTypeRequiredDefaultDescription
statusStatusNameYes—

TypeScript Interface

interface StatusPillProps {
  status: 'confirmed' | 'pending' | 'cancelled' | 'draft' | 'published' | 'sold-out' | 'refunded';
  label?: string;
}

Assertions (NASA Rule 5)

  • [type]status must be a valid StatusName(NASA Rule 5)
  • [aria]data-status attribute mirrors visual variant (machine-readable)(WCAG 1.3.1)

Usage

Import

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

Basic

<Statuspill />

With Variants

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