StatusBadge

Implemented

Semantic status badge with icon slot. Variants: success, warning, error, info, neutral, refunded. Locked icon mapping (Check/Clock/X/Info/Minus/RotateCcw). WCAG 1.4.1: label always required.

Categoryatoms

Sourcesrc/components/atoms/StatusBadge/StatusBadge.tsx

AI HintUse for order/ticket/event lifecycle states. Icon mapping is LOCKED: success=Check, warning=Clock, error=X, info=Info, neutral=Minus, refunded=RotateCcw.

Catalog fallback

Live MDX preview not available for StatusBadge. Showing component catalog metadata instead.

Props

Preview

StatusBadge

Prop

Type

Required

Default

Description

label

string

Required

—

Required label text (WCAG 1.4.1 — never color-only)

variant

Optional

'neutral'

Semantic variant — drives single-hue ep-teal palette

icon

ReactNode

Optional

—

Optional icon slot rendered before the label at h-3 w-3

className

string

Optional

—

Additional CSS classes

Quick use:<StatusBadge />

Accessibility

ARIA rolestatus

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<StatusBadge variant="success" label="Confirmed" />

Example 2

tsxSnippet

<StatusBadge variant="refunded" label="Refunded" />