Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Stepper progress

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style stepperProgress is STEPPER_PROGRESS_STYLES.

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

stepperProgress component has one way to modify the styles:

  • Variant: modify the styles of the StepperProgress.

The structure of the STEPPER_PROGRESS_STYLES object is:

Variants

Variants can modify the styles for the StepperProgress.

The tokens used are:

12345678910
const STEPPER_PROGRESS_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType;
    progress?: CommonStyleType & {
      webkitProgressBar?: CommonStyleType;
      webkitProgressValue?: CommonStyleType;
      mozProgressBar?: CommonStyleType;
  };
  helpTextContainer?: CommonStyleType;
  currentStep?: TypographyTypes;

Example

stepperProgress theme object example:

12345678910
const STEPPER_PROGRESS_STYLES = {
  [VARIANT]: {
    currentStep: {
      font_variant: 'font_variant',
      font_weight: 'font_weight',
      color: 'color',
    },
    maxStep: {
      font_variant: 'font_variant',
      font_weight: 'font_weight',
Stepper progressCode API
TabsUsage