Progress indicator
A progress indicator shows the user where they are along the steps of a journey.Usage
Use a progress indicator to help people keep track of their progress as they step through a task.
This component is typically accompanied by a carousel or another UI device.
Parts
- Current progress: A visual indicator that shows the current step in the journey.
- Steps: A visual indicator that shows all the steps in the sequence.
Accessibility
- Always provide an
ariaLabelthat explains what the indicator represents. For example, "Account setup". The progress number will be appended to the label - "tab" is the default tab ID prefix value. - If interaction is enabled, make sure to reference the
idof associated tabpanel using theariaControlsprop. This way assistive technologies would identify the element whose content is controlled by the progress indicator. - Once an interactive progress indicator is in focus, people can navigate through each step using the left and right arrow keys.
Best practices
Keep the task concise. Use a maximum of seven steps in your journey so that people aren't overwhelmed.
Data Center apps
For all new features, we recommend using Atlassian Design System and other Atlaskit components, (opens new window). For existing code, you can continue to use Atlassian User Interface (AUI), (opens new window).
- Use a progress tracker for more detailed journeys spanning multiple screens.
- For displaying and navigating multiple pages use pagination.