Airbus uses cookies (including from third parties) to enhance site navigation and offer you useful features by analysing the site usage. By clicking “accept”, you agree to the use of cookies. For further information, please refer to our cookies policy. Accept


A stepper is an indicator of progress in a several steps process.

General guidelines

Use a stepper when the user needs to be guided through multiple steps (form, setup, configuration, …).

It is a good practice to divide the workflow to reduce the cognitive load and give a global overview to a novice user.


Best practices

  • Highlight the current page number must be always highlighted: users should always know where they currently are and where they can go. 
  • Always use a legend indicating the number of entries (e.g. “Showing 1-30 of 3,500 entries”)
  • Prefer a see more button to a pagination when you have several lists of items (for exampleon a dashboard).
  • Articles and linear contents should never be broken up into multiple screens.
  • Do not use pagination for less than 25 items.
  • On mobile, don’t use overflow pagination.
  • Specify to the development team if the stepper steps are interactive or not. For example, can the users go back directly to step 2 if they are in step 4 ?
Horizontal stepper

Display all the steps in logical progression, from left to right.

You can expand the lines if you need. 

Horizontal stepper are better for responsive purposes.

Vertical stepper

Display all the steps in logical progression, from left to right.

You can expand the lines if you need.

Vertical steppers can allow you to add microcopy below the title of the current steps.

Visual guidelines


Steppers are composed of 3 states of steps, with different styles:

  • Completed: already visited.
  • Current step: currently displayed.
  • Uncompleted: not visited yet.

Mobile usage

In some more simple cases (on mobile, for onboardings, tutorials…) prefer a more discrete option - without the label or using simple progress indicators.

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top