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: