TransactionStatusBadge

Domain

Status badge tracking a transaction lifecycle: PENDING, COMPLETED, FAILED, CANCELLED.

All statuses

Preview
PendingCompletedFailedCancelled
Code
{(['PENDING', 'COMPLETED', 'FAILED', 'CANCELLED'] as const).map((s) => (
  <TransactionStatusBadge key={s} status={s} />
))}

Small size

Preview
CompletedPendingFailed
Code
<TransactionStatusBadge status="COMPLETED" size="sm" />
<TransactionStatusBadge status="PENDING" size="sm" />
<TransactionStatusBadge status="FAILED" size="sm" />
Sourcemodules/domains/fintech/transaction/TransactionStatusBadge.tsx