OrderStatusBadge

Domain

Tracks a food order through its full lifecycle with semantic colours.

Preview

PendingAcceptedPreparingReadyPicked UpOn the WayDeliveredCancelledRefunded

Code

{(['PENDING', 'ACCEPTED', 'PREPARING', 'READY', 'PICKED_UP', 'ON_THE_WAY', 'DELIVERED', 'CANCELLED', 'REFUNDED'] as const).map((s) => (
  <OrderStatusBadge key={s} status={s} />
))}

Preview

PreparingDeliveredCancelled

Code

<OrderStatusBadge status="PREPARING" size="sm" />
<OrderStatusBadge status="DELIVERED" size="sm" />
<OrderStatusBadge status="CANCELLED" size="sm" />

OrderStatusBadge

All statuses

Key states

Navigation