<ProgressTracker currentIndex={2}>
    <ProgressTracker.Step label="Details" />
    <ProgressTracker.Step label="Recipients" />
    <ProgressTracker.Step label="Cadence" />
    <ProgressTracker.Step label="Filter" href="http://google.com"  />
</ProgressTracker>

Edit State

A Progress Tracker can have a completed state where the user can go back and edit individual steps within the flow.

<ProgressTracker currentIndex={1} completed>
    <ProgressTracker.Step label="Details" href="http://google.com" />
    <ProgressTracker.Step label="Recipients" href="http://google.com" />
    <ProgressTracker.Step label="Cadence" href="http://google.com" />
    <ProgressTracker.Step label="Filter" href="http://google.com"  />
</ProgressTracker>

Best Practices

  • If a task needs more than 6 steps, consider simplifying the process or breaking it up into multiple tasks.
  • Use labels that clearly indicate the purpose of the step.
  • Keep labels to a single line of text, be short and concise (1-2 words).

Related Components

  • To indicate the progress of an action without defined user-facing steps, use the Progress Bar component
  • Takeover is often used as a container of the Progress Tracker and its content. Example of complex use case

Importing

import { ProgressTracker } from '@servicetitan/design-system';