components
Stepper progress
v.1.0.0 | SaturnUsage
import { StepperProgress } from '@kubit-ui-web/react-components'
1
<StepperProgress currentStep={1} maxSteps={10} variant={'DEFAULT'} />Props
Let's delve into the versatility of the stepperProgress component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
currentStep Required | Number | 1 | Current step number, It shouldnt be greater than maximum value of maxSteps |
| dataTestId | String | - | Test id |
| id | String | - | Component Id |
| initialStep | Number | - | Initial step of progress bar |
maxSteps Required | Number | 10 | Max steps numbers. Max value: 10 |
| prefixAriaLabel | Object | { step: 'step'; of: 'of', completed: 'completed' } | Prefixes for creating the visual text |
variant Required | String | DEFAULT | Variant of stepperProgress component: DEFAULT or ALTERNATIVE |
| ariaLabel | String | - | Aria label text for progress bar |
| ctv | Object | - | Object used for update variant styles |