SettlementTimeline

stable

Settlement lifecycle timeline with T+N stages and completion indicators

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

Settlement Timeline

Trade Date (T)

2026-03-10

Confirmation (T+0)

2026-03-10

Matching (T+1)

2026-03-11

Settlement (T+2)

2026-03-12

Loading demo…

Props

Prop	Type	Default	Description
`stages`req	`SettlementStage[]`	—	Settlement stages
`label`	`string`	—	Timeline title

stagesrequired

Type SettlementStage[]Default —

Settlement stages

label

Type stringDefault —

Timeline title

MobileStacks / Scroll

Timeline activates horizontal scroll on mobile.

Design Rationale

This component was designed to express:

End-to-end payment lifecycle tracker with step progression and SLA deadline

Settlement batch tracker with batch status, amounts, and counterparty breakdown

Was this helpful?