GitHub icon

Design Spec

Completed

Editing

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.

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

Disabled

Disabled with linked steps

No label Steps

When individual steps are missing, we recommend adding an overall step, customizable to fit the needs of the page.

Example with centered text

Step Count

Progress Trackers can exceed 6+ steps, but is recommended to drop labels beyond this point.

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

Small Variation

A smaller Progress Tracker also exists, which lacks individual labels. This is useful on smaller display scenarios. It can also be used in more compact areas such as in a Modal. By default, text labels are not displayed when the screen size is below a tablet size (768px).

<ProgressTracker currentIndex={1} hideLabels size="small">
	<ProgressTracker.Step label="Step Title" />
	<ProgressTracker.Step label="Step Title" />
	<ProgressTracker.Step label="Step Title" />
	<ProgressTracker.Step label="Step Title" />
	<ProgressTracker.Step label="Step Title" />
	<ProgressTracker.Step label="Step Title" />
	<ProgressTracker.Step label="Step Title" />
	<ProgressTracker.Step label="Step Title" />
</ProgressTracker>

Smaller Display Handling

Progress Trackers, when being shrunk, will first prioritize shrinking the dividers. With no space left, text labels will wrap.

<Stack direction="column" spacing={5}>
	<ProgressTracker currentIndex={1}>
		<ProgressTracker.Step label="Step Title" />
		<ProgressTracker.Step label="Step Title" />
		<ProgressTracker.Step label="Step Title" />
		<ProgressTracker.Step label="Step Title" />
		<ProgressTracker.Step label="Step Title" />
	</ProgressTracker>
	<ProgressTracker currentIndex={1}>
		<ProgressTracker.Step label="Step Title" />
		<ProgressTracker.Step label="Longer title that gets like this" />
		<ProgressTracker.Step label="Step Title" />
		<ProgressTracker.Step label="Step Title" />
		<ProgressTracker.Step label="Longer title that gets like this" />
		<ProgressTracker.Step label="Step Title" />
	</ProgressTracker>
	<div className="w-50">
		<ProgressTracker currentIndex={1}>
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Longer title that gets like this" />
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Longer title that gets like this" />
			<ProgressTracker.Step label="Step Title" />
		</ProgressTracker>
	</div>
	<div className="w-50">
		<ProgressTracker currentIndex={1} hideLabels>
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Longer title that gets like this" />
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Longer title that gets like this" />
			<ProgressTracker.Step label="Step Title" />
		</ProgressTracker>
		<Stack spacing={1} className="m-t-2">
			<BodyText>Step 2 of 6</BodyText>
			<BodyText bold>Longer title that gets like this</BodyText>
		</Stack>
	</div>
	<div className="w-50">
		<ProgressTracker currentIndex={1} hideLabels size="small">
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Longer title that gets like this" />
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Step Title" />
			<ProgressTracker.Step label="Longer title that gets like this" />
			<ProgressTracker.Step label="Step Title" />
		</ProgressTracker>
		<Stack spacing={1} className="m-t-2">
			<BodyText size="small">Step 2 of 6</BodyText>
			<BodyText bold size="small">
				Longer title that gets like this
			</BodyText>
		</Stack>
	</div>
</Stack>

Best Practices

If a task needs more than 6 steps, consider simplifying the process, breaking it up into multiple tasks, or use hidden labels.
Use labels that clearly indicate the purpose of the step. Progress Trackers with hidden labels should still be given labels, visible through Tooltips.
Keep labels to a single line of text, be short and concise (1-2 words).
Never have 2 active steps at once. This includes not having an "editing" and an "active" step at the same time.

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';

Progress Tracker