Design System

Foundations

Components

Patterns

FAQs

Design System

Design System

Steps

25.5

The Steps component provides a visual representation of progress

Steps

25.5

The Steps component provides a visual representation of progress

Design Library

React Library

Spec Doc

Overview

The Steps component provides a visual representation of progress through a sequence of connected stages or tasks, helping users understand where they are in a multi-step process.

Usage

  • Use to display progress through a multi-step process or workflow

  • Show the current step and total number of steps

  • Allow navigation between completed steps

  • Provide visual confirmation of completed steps

Anatomy

  1. Step indicators: Visual representations of each step

  2. Step labels: Text describing each step

  3. Current step indicator: Visual highlight of the active step

  4. Connector lines: Visual connections between steps

  5. Progress indicators: Visual representation of completed steps

Variants & Props

  • Horizontal vs. vertical orientation


Substeps

  • Substeps show a list of steps under a parent step

  • A set of substeps are only visible when the parent is selected

Content Guidelines

Steps or steppers are used to handhold the user through a multi-step flow or process. This helps set clear expectations for the user about the scope of the task.

We follow these basic rules while writing content for the steps:

Length

  • Keep step labels short, ideally 2–3 words.

  • Avoid long phrases as this reduces scannability

Casing

  • Use Title Case for step labels

  • Keep proper nouns as is

Punctuation

  • Do not use punctuation at the end of step labels

  • Use hyphens only when they are part of a compound word

Action consistency

  • Either start all step labels with an action word or none of them

  • Avoid mixing action-led and noun-led steps within the same flow

✅ Select Protection Domains | Run Prechecks | Create Categories | Create Protection Policies | Create Recovery Plans | Review

Accessibility

General

Where the user is at in the process and how many steps there are is communicated to screen readers.

Use of Color

Steps use more than color to indicate the status of each step.

Responsiveness

As the screen gets narrower, switch from:

  • Vertical steps to horizontal steps

  • Horizontal steps to steps accordion

Keyboard Navigation

  • [Tab] to navigate into the listbox.

    • Focus on the first selectable step.

    • If a step item is selected, focus on that one.

    • If you tab in, out, and in again, retain focus on the last item that was focused.

  • [↑/↓] or [←/→] choose previous/next step depending on the layout.

  • [Enter] or [space] to select steps.

  • [Tab] focuses on the next component.

  • When focused on steps with tooltips, the tooltip is shown.

Help make this page more useful.

Send Feedback

Help make this page more useful.

Send Feedback

‹ Status Indicator

Table ›