Skip to main content

Step progress bar

Step progress bar in Storybook

Examples​

Check out the Usage section for details about how to design a Step progress bar properly, and the different configuration options we provide.

Basic Example​

Displays progress as a series of labelled steps.

<StepProgressBar
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>

Vertical Example​

You can display progress as a vertical list of steps using the isVertical prop.

<StepProgressBar
    isVertical
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>