Components

ProgressIndicator

The ProgressIndicator is a sleek component that enhances user navigation in multi-step processes. It displays a series of dots, highlighting one to indicate the current step.

Figma GitHub

Code examples

<ProgressIndicator 
  numberOfSteps={3}
  activeStep={2}
/>

Guidelines

The ProgressIndicator should be used in contexts where the user navigates through different steps to provide a sense of progress. It can be used in modals or similar situations.

Accessibility

The ProgressIndicator component uses the progressbar role, which allows assistive technologies such as screen readers to identify and announce it as a progress indicator. The aria-valuemin will automatically be set to 1, and aria-maxvalue will be set to the numberOfSteps-prop. This helps assistive technologies to communicate to the user that there are multiple steps, and tell them where in the process they are.

Code