DeliveryStatusBadge

Domain

Shows courier delivery progress from assignment through completion.

Preview

PendingAssignedPicked UpOn the WayDeliveredFailed

Code

{(['PENDING', 'ASSIGNED', 'PICKED_UP', 'ON_THE_WAY', 'DELIVERED', 'FAILED'] as const).map((s) => (
  <DeliveryStatusBadge key={s} status={s} />
))}

Preview

On the WayOn the Way

Code

<DeliveryStatusBadge status="ON_THE_WAY" size="sm" />
<DeliveryStatusBadge status="ON_THE_WAY" size="md" />

Navigation