A stepper component is a control component that is usually paired with content. It allows users to navigate a collection of content in a fixed space

Key Points

  • Steppers can control between two and five items
  • Steppers can either step between the first and last item or go through a continuous carousel
  • Steppers have no outer padding and therefore should be spaced as appropriate


Steppers will always be a child component of a larger composition which is trying to display content in a fixed area.

Steppers should always be placed at the bottom of the composition and given enough space to allow a clear hit area of the controls.


Users should be able to navigate to the each item using the stepper controls.

  • Using a cursor they can click on each button or a specific indicator.
  • Using keyboard controls they can navigate to a button or to each indicator.


There are two different ways to display content using stepper/carousel:

1. First to Last

If a user is required to stop at the first or last item in a collection then the corresponding icon button should be disabled.

First to Last Stepper

First to Last Stepper

Buttons are disable on the first and last step

2. Continous Loop

Components that have not end point always display the start and end buttons as active.

Infinite Loop

Infinite Loop