The List component shows a numbered sequence of steps with clear progress indicators. Each row is independently styled as done, active, or pending, giving users a clear view of where they are in a flow.
Row states
✓Position document in frame
1Hold steady while scanning
1Confirm captured image
Full list
All three states together
A typical 3-step list showing steps 1 done, step 2 active, step 3 pending.
✓Position document in frame2Hold steady while scanning3Confirm captured image
Tokens
TokenRoleLayer
--list-num-doneDone step indicator bgComponent--list-num-activeActive step indicator bgComponent--list-num-pendingPending step indicator bgComponent--list-text-activeActive step text colorComponent--list-text-mutedPending step text colorComponent--list-connectorVertical connector lineComponentComponent tokens
The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.