Progress steps

Progress lists in Base are used to denote staged progress of an action or activity. This list type provides the user with a sense of awareness around progress and the steps remaining.

Progress Steps Dotted Usage

Create Account
Here is some step content
Verify Payment
Add Payment Method

Progress Steps Numbered Usage

1
Create Account
Here is some step content
2
Verify Payment
3
Add Payment Method

Overrides

Additionally, you can fully customize any part of the ProgressSteps through the overrides prop. The ProgressSteps consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Step 1
Content
Step 2
Check
Step 1
2
Step 2
Content

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

ProgressSteps API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

NumberedStep API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Step API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>