Skip to main content Red Hat Design System logo Contribute on Github

Progress steps

Overview Style Guidelines

Style

Progress steps contain at least three step indicators. They are positioned on a thin horizontal or vertical line and organized sequentially from left to right or top to bottom.

Progress steps component blueprint

Visual elements

Progress steps display circles or icons that indicate where a user is in the completion process. The appearance of these states change as a user moves through each step of the task.

  • Finished step - A green circle with a check mark indicates a user has completed a previous step.
  • Current step - A bright red circle with a pink border indicates a user is viewing or completing the current step.
  • Error step - A dark red circle with an exclamation mark indicates there is an issue a user should be aware of.
  • Next or Final step - A white circle with a light gray border indicates the next or final step has not been visited yet.
  • Progress bar - A dark gray bar in between Finished and Current steps indicates how much progress a user has made.
Progress steps component visual elements

Text labels

Every step must have a text label indicating what a user has and will accomplish. Each text label should be written clearly and use ideally one word to avoid crowding. If two words need to be used, set them in Sentence case only.

Helpful tip

Always try to write text labels as short as possible. If there are more than three steps, reduce the amount of characters.

Progress steps component text labels

Orientation

Horizontal

The Horizontal orientation can be stretched or squeezed to fit different desktop or tablet layouts, it can also be used on mobile if there are fewer steps with short text labels.

Warning

Do not write text labels with more than two words as space can become crowded when breakpoints get smaller or when text is translated.

Progress steps component horizontal orientation

Vertical

The Vertical orientation can be used on desktop or tablet if the content within needs to be positioned on the right instead of underneath. It can also be used on mobile if the horizontal orientation has more steps or text labels with more words.

Warning

Do not write text labels with more than two words as space can become crowded when breakpoints get smaller or when text is translated.

Progress steps component vertical orientation

Responsive design

Progress steps mostly remain the same on large and small screens. When the horizontal orientation becomes crowded, it will switch to the vertical orientation.

Desktop

Progress steps component responsive design, desktop

Tablet

Progress steps component responsive design, tablet

Mobile

Progress steps component responsive design, mobile

Spacing

Progress steps component spacing
Example Token Description
24 --rh-space-xl 24px spacer

© 2021-2024 Red Hat, Inc. Deploys by Netlify