ba-progress-bar
The progress bar provides a visual indication of how much progress has been made through a task or multi-step process. It is suitable for forms, onboarding flows, or any situation where users need to understand their position and what comes next
Figma
GitHub
Storybook
Live Demo
<ba-progress-bar
total="4"
current="1"
description="Current step description"
next="Description of next step"
></ba-progress-bar>Guidelines
Placing the progress bar directly between ba-header-global and the main content ensures it is one of the first elements users encounter, giving them clear context about their current step and what follows
Using clear and concise text helps users understand their current position in the process and what to expect next. This clarity can reduce confusion and improve the overall user experience.
Labels may wrap to multiple lines on mobile; this is acceptable. However, keeping the text short ensures labels remain readable at smaller widths
Progress indicators should always reflect the user's current state. Instant updates reinforce a sense of momentum and help maintain clarity about where the user is in the flow. If the page is not ready, consider using the ba-loading-skeleton to indicate loading state.
Changing either the current, description or next attributes triggers an accessibility announcement. For this reason, always update current, description, and next together.
The user should never lose their work if they press back or navigate to a previous step in the progress bar. This allows users to review or change information without frustration.
Providing a summary of the information entered in previous steps on the final step allows users to review their inputs before submission. This can help catch errors and ensure accuracy, enhancing user confidence in the process
Accessibility
This can be achieved by updating the url on each step. Users have an expectation that a back link will behave in a predictable way; differences between the browser back button and any navigation on the page could confuse or disorientate users
This ensures that assistive technology users are informed of the change in context and can understand their current position in the process. They are also brought directly to the top of the page where the next step content will be displayed, reducing the need for additional navigation.
The progress bar is designed to indicate progress through a multi-step process, not to show loading or processing status. Using it for loading states can confuse users about its purpose and lead to misunderstandings about their progress in the task.
The required ARIA attributes and live region updates are specifically tailored for step-based progress indication, which does not align with the needs of loading or processing feedback.
Code
Permitted ARIA roles
None
Usage
Basic usage
<ba-progress-bar
total="4"
current="1"
description="Current step description"
next="Description of next step"
></ba-progress-bar>
Dynamically updating progress
The progress bar can be updated dynamically as the user moves through the steps of a process. Make sure that the current, next, and description properties are updated at the same time, as all of them will be announced by screen readers when either current or description changes.
<ba-progress-bar
total="4"
current="1"
description="Current step description"
next="Description of next step"
></ba-progress-bar>
<ba-button id="step-2-button">
Step 2
</ba-button>
<script>
const progressBar = document.querySelector('ba-progress-bar');
function goToStep2() {
progressBar.current = "2";
progressBar.description = "Step 2 description";
progressBar.next = "Description of step 3";
}
document.getElementById('step-2-button').addEventListener('baOnClick', goToStep2);
</script>