Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Stepper number

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Number of steps indicator for a process taking place in several screens.

import { StepperNumber } from '@kubit-ui-web/react-components'
123456789
<StepperNumber
  variant="DEFAULT"
  completedStepIcon={{ icon: 'ICON_PLACEHOLDER' }}
  orientation="HORIZONTAL"
  currentStep={0}
  horizontalOrientationWidth="5.75rem"
  aria-label="ariaLabel"
  steps={['Step 1', 'Step 2', 'Step 3']}
/>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

123456789
<StepperNumber
  variant="DEFAULT"
  completedStepIcon={{ icon: 'ICON_PLACEHOLDER' }}
  orientation="HORIZONTAL"
  currentStep={0}
  horizontalOrientationWidth="5.75rem"
  aria-label="ariaLabel"
  steps={['Step 1', 'Step 2', 'Step 3']}
/>

Orientation

The component allows the change of orientation, according to need.

12345678910
<StepperNumber
  variant="DEFAULT"
  completedStepIcon={{ icon: 'ICON_CHECK' }}
  orientation="VERTICAL"
  currentStep={1}
  horizontalOrientationWidth="5.75rem"
  aria-label="ariaLabel"
  steps={['Step 1', 'Step 2', 'Step 3']}
/>
<StepperNumber
PaginationStyling API
Stepper numberDesign Spec