Status Badge

Primitive and domain-specific status badges. Typed wrappers use StatusBadgePropsExternal and createStatusColorMapper.

All colours (statusBadgeColorVariants)

Every color variant from statusBadgeColorVariants in status-badge/primitives. Single source of truth for badge colours.

neutral50

neutral

orange

blue

green

lime

red

rose

amber

purple

white.bg.green

white.bg.blue

white.bg.orange

white.bg.red

white.bg.purple

white.bg.lime

white.bg.amber

medlo.green

medlo.blue

medlo.orange

medlo.red

medlo.purple

Primitive (untyped) – direct StatusBadge

Use for one-off or untyped statuses. Pass label and color from statusBadgeColorVariants.

Active

Warning

Sent

Error

Neutral

Primitive – spacing, rounding, bordered

Default

Compact full

Bordered

Typed – StatusBadgePropsExternal + createStatusColorMapper

Domain status type, color mapper, and optional label map. Props: status (typed) plus spacing, rounding, bordered, className.

pending

active

done

active

PayoutStatusBadge

Doctor consult payout statuses. Label and color derived from payoutStatusLabels and getPayoutStatusColor inside the component.

In Progress

Awaiting Payment

Paid

ResendEmailStatusBadge

Resend delivery status. Borderless. Label is the status string.

delivered

bounced

queued

scheduled

opened

complained

XeroInvoiceStatusBadge

Xero invoice status with human-readable labels. Handles null (shows neutral).

Draft

Submitted

Authorised

Paid

Voided

Deleted

XeroInvoiceChip

Chip with icon, invoice number, optional status badge and link.

No invoice

INV-001

INV-002

Paid

INV-003

Submitted

View

External color access

Use statusBadgeColorVariants or getXeroInvoiceStatusClasses / getPayoutStatusClasses for custom elements (rows, icons).

Custom row (green)Custom row (amber)