Skip to contentWolf-Rayet

Progress indicator

A progress indicator shows the user where they are along the steps of a journey.

#Default

Use dots for a short journey where the steps have no names.

import { ProgressIndicator } from '@wolf-rayet/react';

<ProgressIndicator total={4} label="Onboarding steps" />

#Part way through

Select a dot to move to that step.

import { ProgressIndicator } from '@wolf-rayet/react';

<ProgressIndicator total={5} defaultSelected={2} label="Setup steps" />