Return to Sky UI homepage
Progress Tracker

Overview

View on FigmaView on GitHub

Purpose

The Progress Tracker informs the user about the necessary stages and the current status of ongoing processes. It should only be used for linear processes (i.e. the checkout process) and not for any non-linear journeys like discovery or configuration.

Anatomy

The Progress Tracker component can be broken down into the following elements -

  1. 1
  2. 2

  1. Progress bar

    Connects the various stages of the process and indicates whether a stage is completed, in progress or hasn’t started yet.

  2. Stage title

    Displays the name of the different stages in the process.

Variants & States

  • Appearance: Default, Light
  • Breakpoint: Mobile, Desktop

The Progress Tracker is made up of individual process stage items.

Position: Start, Middle, End
Status: Not started, In progress, Mid-way progress, Completed