Go Main page
Go Main page

Web components

cover

components

Stepper progress

v.1.0.0 | Saturn

Usage

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.

PropertyTypeDefaultDescription
currentStep
Required
Number1Current step number, It shouldnt be greater than maximum value of maxSteps
dataTestIdString-Test id
idString-Component Id
initialStepNumber-Initial step of progress bar
maxSteps
Required
Number10Max steps numbers. Max value: 10
prefixAriaLabelObject{ step: 'step'; of: 'of', completed: 'completed' }Prefixes for creating the visual text
variant
Required
StringDEFAULTVariant of stepperProgress component: DEFAULT or ALTERNATIVE
ariaLabelString-Aria label text for progress bar
ctvObject-Object used for update variant styles