Airframe GitHub Storybook
Component

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

Airframe

Active
Figma

Web Components

Active
Storybook GitHub

React

Active
Storybook GitHub

React Native

Planned Design Code Accessibility QA

Anatomy

A

Step number

Indicates the user's current position out of the total number of steps in the process
B

Step title

A short description of the current step
C

Next step title

A short description of the step that follows the current one
D

Progress track

A visual bar that fills to represent how far through the process the user has progressed

Design Documentation

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

Live Demo 

<ba-progress-bar
  total="4"
  current="1"
  description="Current step description"
  next="Description of next step"
></ba-progress-bar>

Properties and attributes

Property Attribute Description Type Default
current current Current step number string | undefined '1'
description(required) description Description of current step string undefined
next next Description of next step - will take up space even if not set string | undefined undefined
theme theme ()
Theme to use		 "blue-200" | "midnight-500" | "midnight-700" | undefined undefined
total(required) total Total number of steps string undefined

Permitted ARIA roles

  • None

Slots

No slotted content available for this component.

Parent components

None

Slots

No slotted content available for this component.

Usage

Basic usage

A basic progress bar component showing the user on the first step of a four-step process, with descriptions for the current and next steps:
<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.

A basic progress bar with a button that updates the component to step 2
<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>

Props

Prop Description Type Default
current Current step number string | undefined '1'
description (required) Description of current step string undefined
next Description of next step - will take up space even if not set string | undefined undefined
theme ()
Theme to use		 "blue-200" | "midnight-500" | "midnight-700" | undefined undefined
total (required) Total number of steps string undefined

Permitted ARIA roles

None

Parent components

None

Usage

Basic usage

A basic progress bar component showing the user on the first step of a four-step process, with descriptions for the current and next steps:
<BaProgressBar
  total={4}
  current={1}
  description="Current step description"
  next="Description of next step"
/>

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.

A basic progress bar with a button that updates the component to step 2
export default function ProgressBarExample() {
  const [current, setCurrent] = useState(1)
  const [description, setDescription] = useState("Current step description")
  const [next, setNext] = useState("Description of next step")

  function goToStep2() {
    setCurrent(2)
    setDescription("Step 2 description");
    setNext("Description of step 3");
  }

  return (
    <>
      <BaProgressBar
        total={4}
        current={current}
        description={description}
        next={next}
      />

      <BaButton onBaClick={goToStep2}> Step 2 </BaButton>
    </>
  )
}

React Native documentation coming soon.

Guidelines

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

Further reading:

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.

Keyboard navigation

State: ba-progress-bar is a non-interactive component

⇥ Tab

Focus moves past ba-progress-bar to the next focusable element in the DOM

Usage and accessibility checklist

Use this checklist to confirm the component has been configured and used correctly.

UX checklist

  • ba-progress-bar is placed directly between ba-header-global and the main page content
  • Descriptive text for the current and next steps is clear and concise
  • Progress is updated immediately when the user moves to the next step
  • Users can navigate backwards and forwards between steps without losing entered data
  • A summary of entered information is considered on the final step

Accessibility checklist

  • The browser's back button takes users to the previous step
  • Focus is moved to ba-progress-bar when it is dynamically updated
  • current, description, and next attributes are updated together to ensure accurate announcements
  • ba-progress-bar is not used as a status indicator for loading or processing states

These checks are handled by the component and do not need to be repeated each time it is used.

  • ba-progress-bar is operable using assistive technology
  • Updates to current, description, and next trigger a single accessible announcement
  • Colour contrast for all states in all BAgel themes
  • Animations respect users' reduced motion settings
  • High contrast mode adjustments
Designing Developing Components BAgel helper QA process britishairways.com Careers Cookie policy