Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Stepper number

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the StepperNumber component is STEPPER_NUMBER_STYLES.

You can not change the name of the object of tokens.

There are one prop that allow to modify different aspects of the component:

  • Variant: modify the styles of the StepperNumber.

Variants

Variants can modify the styles for the StepperNumber. Additionally, it has two types of dimensions that also modify the styles:

1234
enum StepperNumberDimensionType {
  HORIZONTAL,
  VERTICAL,
}

And StepperNumberDimensionType has this token:

Additionally, the StepperNumber has internal state that affects each element individually. The states are:

12345
enum StepperNumberStateType {
  ACTIVE,
  COMPLETED,
  INACTIVE,
}

The tokens for those internal states are:

Example

StepperNumber theme object example:

12345678910
const STEPPER_NUMBER_STYLES = {
  [VARIANT]: {
    [STEPPER_NUMBER_DIMENSION]: {
      container?: CommonStyleType,
      [STEPPER_NUMBER_STATE]: {
        stepContainer?: CommonStyleType,
        stepCircle?: CommonStyleType,
        stepIndex?: TypographyTypes,
        iconSelected?: IconTypes,
        stepNameContainer?: CommonStyleType & { isLast?: CommonStyleType },
Stepper numberCode API
Stepper numberAccessibility