Progress indicators

Before a user undertakes a task, it’s important to show them how many steps we will ask them to go through and display where they are in this journey. Similalry, if they are waitig for an update from us, before they can perform a certain action, then we need to indicate that something is happening in the background.

We have three solutions to displaying progress: A step-by-step progress bar with labels, a condensed progress bar and a progress button.

Keep the labels consistent, but concise so the user can undetsand where they are and what is coming next. This type of progress indicator has three states:

• Completed
  
• Current
• Next

Use this type in modals or where there is less space and no reason to use labels. This type of progress indicator has three states:

• Completed
  
• Current
• Next

The progress button is based on the default solid button. It has three states:

• Disabled
  
• In progress
• Enabled