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
        }
    ]}
/>

Usage

Coming soon.

Code

<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
        }
    ]}
/>

Import statement

import { StepProgressBar } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

stepsrequired

Type

[{ title: intlMessageShape, visited: bool, active: bool, disabled: bool, onClick: func }]

Description

Steps data.

className

Type

string

Description

Class to override the progress bar styles.

isVertical

Type

bool

Description

If true, the component is oriented vertically.

Hooks

No hooks are available for StepProgressBar.

Translation keys

ProgressIndicator messages can be used to display details on the users' current progress:

Key	Used for
jutro-components.widgets.progressIndicator.status.completed	Step is completed
jutro-components.widgets.progressIndicator.status.inProgress	Step is in progress
jutro-components.widgets.progressIndicator.progressStep.status.visited	Step has been visited
jutro-components.widgets.progressIndicator.ariaLabel	aria-label formed from combination of progressTitle and progressLabel

Escape Hatches

For more information, see our documentation about escape hatches.

Changelog