Timeline Component

A stepper indicates the user’s progress within a set of steps the user needs to complete. It informs which step they are currently on, what steps they have completed, and the next steps remaining.

Timelime Variations

Type Example Description
Vertical
Used whenever there is enough space available to show all the required steps to be taken. Showing all of the steps number, name and descriptions (optional).
Summary
  • Step Name

    Step Description

  • Used when there is limited space available. Indicating in which step is the user is currently on out of how many total steps.

    Guideline

    • Use short and concise label for the step name.
    • Whenever possible, have the step name the same with the page title headers.
    • For vertical stepper, put step description to explain briefly what the user needs to do/expect on the page. The step description is optional.

    When to use

    • To guide users through steps or actions between multiple pages, in order to complete a task.
    • Have three or more steps to be completed.

    Code