BookingStatusBadge

Domain

Displays travel booking lifecycle status with semantic colour coding.

Preview

DraftPendingConfirmedPaidCancelledRefundedCompleted

Code

{(['DRAFT', 'PENDING', 'CONFIRMED', 'PAID', 'CANCELLED', 'REFUNDED', 'COMPLETED'] as const).map((s) => (
  <BookingStatusBadge key={s} status={s} />
))}

Preview

PaidPaid

Code

<BookingStatusBadge status="PAID" size="sm" />
<BookingStatusBadge status="PAID" size="md" />

BookingStatusBadge

All statuses

Sizes

Navigation