Edit this page
[?] Component size, gzipped: 23kb

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.

Examples

Progress Steps Dotted Usage

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

Progress Steps Numbered Usage

  1. 1
    Create Account
    Here is some step content
  2. 2
    Verify Payment
  3. 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:

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

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

API

ProgressSteps API

overrides object

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

children import

react.Node

current number = 0

Defines the current active step index.

NumberedStep API

title string

The title of the Step.

isCompleted boolean = false

Defines if the step is completed.

isActive boolean = false

Defines if the step is currently active.

isLast boolean = false

Defines if the step is the last item displayed.

overrides object

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Icon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Tail { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Content { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Title { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Description { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

children import

react.Node

step import

The number displayed as the step number

react.Node

Step API

title import

The title of the Step.

react.Node

isCompleted boolean = false

Defines if the step is completed.

isActive boolean = false

Defines if the step is currently active.

isLast boolean = false

Defines if the step is the last item displayed.

overrides object

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Icon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Tail { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Content { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Title { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Description { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

children import

react.Node

Progress Steps exports

You can import this module like so:

import {ProgressSteps} from 'baseui/progress-steps'

It exports the following components or utility functions:

  • ProgressSteps
  • Step
  • NumberedStep
  • StyledProgressSteps
  • StyledStep
  • StyledIcon
  • StyledInnerIcon
  • StyledContent
  • StyledContentTitle
  • StyledContentTail
  • StyledContentDescription
  • StyledNumberStep
  • StyledNumberIcon
  • StyledNumberContentTail