Basic Usage - Default
The basic usage of the Stepper component is to display a progress bar with a set of steps. It is used to indicate the current position in a process. By default, we display the default
style.
<Stepper
steps={['Details', 'Organization', "Complete"]}
currentStep={0}
/>
Numbers variant
The numbers
variant displays the step number instead of the default dot.
<Stepper
steps={['Details', 'Organization', "Complete"]}
currentStep={0}
variant="numbers"
/>
Props
The following props may be passed to configure the Stepper component.
steps
- An array of strings that represent the steps in the stepper. You can also pass translation keys to localize the stepper, such ascommon.step1
.currentStep
- The current step in the stepper. This is a zero-based index.variant
- The variant of the stepper. The default isdefault
. The other option isnumbers
.