Progress tracker
Progress tracker tracks a users progress throughout a task.
☝️ Research insight: During progress tracker testing, users would attempt to click on a CTA or dashboard tile prior to reaching that stage. They needed extra instruction in these areas, including dates helped users to feel more confident about next steps.
Steps can take a child component which is rendered to the right of the text (can wrap below on mobile devices), this is a pretty useful place to put a button. Supports any icon available from the iconography. If ticked prop is set, the icon is replaced with a tick.
For greater customisation, an iconSize
prop can be passed to ProgressTracker
.
If label
and title
don't satisfy your requirements, you can pass a component as the body
of a Step:
You can adjust the spacing between the steps by passing a stepVerticalSpacing
prop: