In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Stepper

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.

Pictures shows an example of a vertical stepper.

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

Behaviours

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

  • Completed: already visited.
  • Current step: currently displayed.
  • Uncompleted: not visited yet.
Picture shows an example of a horizontal stepper.

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.

This picture shows an example of a mobile stepper without label.
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