ApprovalStepIndicator

stable

Maker/checker approval pipeline with 5-step progression and rejection state

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

Approval Pipeline

Draft

Pending

Approved

Executing

Settled

Maker J. ChenChecker M. Torres

Loading demo…

Props

Prop	Type	Default	Description
`status`req	`ApprovalStep`	—	Current pipeline step
`maker`	`string`	—	Maker name attribution
`checker`	`string`	—	Checker name attribution

statusrequired

Type ApprovalStepDefault —

Current pipeline step

maker

Type stringDefault —

Maker name attribution

checker

Type stringDefault —

Checker name attribution

MobileWorks As-Is

Step indicators work at any width. On very narrow viewports (<320px), the label text may truncate — use the compact variant.

Design Rationale

This component was designed to express:

Compliance/regulatory status indicator for filings, KYC, and attestations

Payment lifecycle tracker with maker/checker pipeline and rejection handling

Was this helpful?