ProgressIndicator

Progress indicator displays the current step in a multi-step process.

Import

import { ProgressIndicator } from "reshaped";
import type { ProgressIndicatorProps } from "reshaped";

Related components

Pagination

Carousel

Storybook

ProgressIndicator stories

Usage

ProgressIndicator takes a total amount of steps to display and the current activeIndex. It's a controlled component which means you should update it based on your own state. As a simple example, here we update the state based on the forward and back buttons:

<View gap={4}>
  <View direction="row" gap={2} align="center">
    <Button
      onClick={() => {
        setActiveIndex((prev) => Math.max(0, prev - 1));
      }}
    >
      Previous
    </Button>
    <Button
      onClick={() => {
        setActiveIndex((prev) => Math.min(total - 1, prev + 1));
      }}
    >
      Next
    </Button>
  </View>
  <ProgressIndicator total={total} activeIndex={activeIndex} />
</View>

Colors

Use media color when using on top of static dark backgrounds, like black background or on top of the Scrim component.

<View
  backgroundColor="black"
  padding={4}
  borderRadius="medium"
  width={40}
  align="center"
>
  <ProgressIndicator total={10} />
</View>

Accessibility

Use ariaLabel to describe what the indicator is responsible for or link it to another component label using attributes

Progress

Radio