PaymentStatusBadge
Payment lifecycle status badge covering the full payment state machine from pending through settlement — distinct from StatusBadge (compliance), with temporal/agency color semantics for in-flight vs. blocked payments
import { PaymentStatusBadge } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
statusreq | 'pending' | 'authorised' | 'sent' | 'clearing' | 'settled' | 'failed' | 'recalled' | 'on_hold' | 'cancelled' | — | Payment lifecycle status |
label | string | — | Override display label (defaults to status name) |
size | 'compact' | 'default' | default | compact = 11px pill, default = 13px pill |
style | CSSProperties | — | Style override |
statusrequired'pending' | 'authorised' | 'sent' | 'clearing' | 'settled' | 'failed' | 'recalled' | 'on_hold' | 'cancelled'Default —Payment lifecycle status
labelstringDefault —Override display label (defaults to status name)
size'compact' | 'default'Default defaultcompact = 11px pill, default = 13px pill
styleCSSPropertiesDefault —Style override
Accessibility
- Renders role="status" with an aria-label announcing the payment status.
- Status is never color-only: each badge pairs its dot and border color with an uppercase text label.
- The leading dot is aria-hidden decoration; screen readers get the label text.
Inline pill; use size='compact' in dense mobile rows.
This component was designed to express:
Explore Related
Compliance/regulatory status indicator for filings, KYC, and attestations
High-density payment queue table with bulk-select checkboxes, priority accents, approve/reject/view actions, and pagination — composes PaymentStatusBadge and ClearingNetworkIndicator per row
SWIFT / ACH / SEPA payment lifecycle stepper with per-step timestamps, actor labels, and reference IDs