StatusPill

Deprecated

Status indicator pill — 11px/600, 20px radius. Variants: confirmed (green), pending (amber), cancelled (red). 6px dot prefix in current color. Superseded by StatusBadge (atom — broader status palette + accessibility annotations).

Categorymolecules

Sourcepatterns/molecules/statuspill.html

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

Indicateur de statut — 11px/600, rayon 20px. Variantes : confirmed (vert), pending (ambre), cancelled (rouge). Préfixe point 6px dans la couleur courante.

StatusPill

Display molecule (Family 4 — Tier 1)

Static status indicator for orders, bookings, tickets, and event lifecycle states. Always carries text content for screen readers.

Confirm\u00e9En attenteAnnul\u00e9

This component supports light and dark mode.

Usage

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

<StatusPill status="confirmed">Confirmé</StatusPill>
<StatusPill status="pending">En attente</StatusPill>
<StatusPill status="cancelled">Annulé</StatusPill>

Deprecation

Deprecated — superseded by StatusBadge (semantic state with required label + icon slot). Do not use in new code.

Accessibility

StatusPill is a static element. Always include meaningful text content so screen readers can announce the status. The color alone is not a reliable indicator \u2014 the text label carries the meaning.

Props

Prop

Type

Default

Description

status*

'confirmed' | 'pending' | 'cancelled'

—

Semantic status. Drives tone + dot color.

children*

React.ReactNode

—

Visible status label.

size

'sm' | 'md'

md

Height/padding scale.

Props

Preview

StatusPill

Prop

Type

Required

Default

Description

status

'confirmed' | 'pending' | 'cancelled'

Required

—

Semantic status. Drives tone + dot color.

children

React.ReactNode

Required

—

Visible status label.

size

'sm' | 'md'

Optional

'md'

Height/padding scale.

Quick use:<StatusPill />

Accessibility

ARIA rolestatus

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<StatusPill />

Example 2

tsxSnippet

<StatusPill variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules