ProgressStepper

Alpha component

ProgressStepper component is subject to major changes and is for experimentation purposes only. Not recommended for use in production software.

ProgressStepper can be used to visually represent the division of a process into ordered steps

Import

import { ProgressStepper } from '@contentful/f36-components';
// or
import { ProgressStepper } from '@contentful/f36-progress-stepper';

Examples

Orientation

This component can be displayed in a horizontal or vertical orientation.

Example of ProgressStepper with horizontal orientation.

Example of ProgressStepper with vertical orientation.

Step Styles

This component can be displayed with steps that show numbers or icons.

Example of ProgressStepper with number step styles and displaying the step state options.

Example of ProgressStepper with icon step styles and displaying the step state options.

Labels

Example of ProgressStepper with horizontal orientation with labels.

Example of ProgressStepper with vertical orientation with labels.

Interactive Example

Example of the ProgressStepper with buttons to move between steps.

Props (API reference)

Open in Storybook

ProgressStepper

Name

Type

Default

ariaLabel
required
string

Label to be used on aria-label for the nav element

children
required
ReactNode

activeStep
number

0
className
string

string for additional classNames

margin
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin to one of the corresponding spacing tokens

marginBottom
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-left to one of the corresponding spacing tokens

marginRight
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-right to one of the corresponding spacing tokens

marginTop
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-top to one of the corresponding spacing tokens

orientation
"horizontal"
"vertical"

horizontal
stepStyle
"number"
"icon"

number
testId
string

A [data-test-id] attribute used for testing purposes

ProgressStepper.Step

Name

Type

Default

activeStep
number

Private prop for the ProgressStepper component

className
string

CSS class to be appended to the root element

labelText
string

orientation
"horizontal"
"vertical"

Private prop for the ProgressStepper component

state
"active"
"error"
"warning"
"disabled"
"complete"
"incomplete"

incomplete
stepNumber
number

Private prop for the ProgressStepper component

stepStyle
"number"
"icon"

Private prop for the ProgressStepper component

testId
string

A [data-test-id] attribute used for testing purposes

Content guidelines

  • The progress stepper provides visual feedback to help guide the user through a workflow that involves linear steps
  • Each step has an optional label
  • Label text should be short, clear and concise

Accessibility

  • The ariaLabel prop for the ProgressStepper component is required. Provide a label that describes what the progress is about (e.g. App installation progress).
  • The aria-label provided for the each Step component communicates information about the step's number and type.