Skip to contentWolf-Rayet

Progress indicator

A progress indicator shows people which step they are on.

#Default

Use dots for a short set of steps that have no names.

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

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

#Later step

Select a dot to move to that step.

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

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