Stepper
Explain where someone is in a staged task and what is finished.
Created & adapted by Insan NurjamanPrimitive + semantic variables foundationCurated public preview
Component model
The horizontal source stepper composes Default, Current, and Finished items. This interactive sequence is synthetic, illustrating those state roles rather than a real verification or payout workflow.
Try the component
Illustrative interaction- 1DetailsCurrent
- 2ReviewDefault
- 3CompleteDefault
Synthetic sequence: 1 of 3. No real workflow is submitted.
Native example only. No live account action, production service, or source-code parity is implied.
Usage
Choose deliberately
- Mark the current step with text as well as appearance.
- Separate completed work from the next available action.
- Use a staged flow only when the task benefits from explicit progress.
Keep the limits visible
Source properties and screenshots document design intent. Validate the supported combinations and interaction behavior in the implementation before treating them as a guarantee.
Read usage guidelines Curated design documentation by Insan Nurjaman. Native examples are illustrative, not a production package or a standards certification.
Explore the story 