Progress Tracker

Design Spec

Completed

<ProgressTracker completed currentIndex={3}>
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
</ProgressTracker>

<ProgressTracker completed currentIndex={3}>
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
</ProgressTracker>

Editing

<ProgressTracker currentIndex={1} completed>
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
</ProgressTracker>

<ProgressTracker currentIndex={1} completed>
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
    <ProgressTracker.Step label="Step Title" />
</ProgressTracker>

Linked Steps

Steps can optionally be used as a navigation piece. They should not be used as the only means of getting to individual steps.

<ProgressTracker currentIndex={1}>
    <ProgressTracker.Step label="Step Title" href="https://anvil.servicetitan.com/" />
    <ProgressTracker.Step label="Step Title" href="https://anvil.servicetitan.com/" />
    <ProgressTracker.Step label="Step Title" onClick={() => alert("onClick triggered")} />
</ProgressTracker>

<ProgressTracker currentIndex={1}>
    <ProgressTracker.Step label="Step Title" href="https://anvil.servicetitan.com/" />
    <ProgressTracker.Step label="Step Title" href="https://anvil.servicetitan.com/" />
    <ProgressTracker.Step label="Step Title" onClick={() => alert("onClick triggered")} />
</ProgressTracker>

Since most flows using a Progress Tracker don’t allow users to jump to later steps, future steps generally won’t have links.