ClearingNetworkIndicator

stable

Clearing network chip with optional message type and settlement type — gold = high-value RTGS (CHIPS, Fedwire, LVTS), blue = messaging networks (SWIFT, SEPA, CHAPS, TARGET2), green = instant networks (FPS, RTP)

Finance/Storybook ↗

import { ClearingNetworkIndicator } from "@nodus/design-system/finance"

SWIFTMT103RTGSCHIPSRTGSFedwireRTGSSEPApacs.008InstantFPSInstantACHIATBatchInternalInternalCHAPSMT202

Loading demo…

Props

Prop	Type	Default	Description
`network`req	`ClearingNetwork`	—	Clearing network — SWIFT \| SEPA \| ACH \| CHIPS \| Fedwire \| CHAPS \| TARGET2 \| FPS \| BACS \| RTP \| LVTS \| SPEI \| internal
`messageType`	`string`	—	Message type or scheme detail (e.g. "MT103", "pacs.008", "IAT")
`settlementType`	`'RTGS' \| 'DNS' \| 'Instant' \| 'Batch' \| 'Internal'`	—	Settlement mechanism label shown next to the chip (default size only)
`size`	`'compact' \| 'default'`	default	compact = chip only, default = chip + settlement type label
`style`	`CSSProperties`	—	Style override

networkrequired

Type ClearingNetworkDefault —

messageType

Type stringDefault —

Message type or scheme detail (e.g. "MT103", "pacs.008", "IAT")

settlementType

Type 'RTGS' | 'DNS' | 'Instant' | 'Batch' | 'Internal'Default —

Settlement mechanism label shown next to the chip (default size only)

size

Type 'compact' | 'default'Default default

compact = chip only, default = chip + settlement type label

style

Type CSSPropertiesDefault —

Style override

Accessibility

aria-label announces the clearing network plus message type and settlement type when present.
Network identity is carried by the text label, not color alone; color encodes settlement class as a secondary cue.

SWIFTSEPAACHCHIPSFedwireCHAPSTARGET2FPSBACSRTPLVTSSPEIinternalcompactdefaultsemantic type fin

MobileWorks As-Is

Inline chip; use size='compact' in dense mobile rows.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

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

PaymentQueueTable→

High-density payment queue table with bulk-select checkboxes, priority accents, approve/reject/view actions, and pagination — composes PaymentStatusBadge and ClearingNetworkIndicator per row

CorrespondentBankChain→

Correspondent bank chain visualizer for cross-border payment routing with BIC, status, and charges per hop

Was this helpful?