Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Progress Steps

Version 2.1.1GithubStorybook

Progress Steps can be a presentational or interactive component and shows users an outline of a complex multi-step task.

Installation

Installation page anchor
yarn add @twilio-paste/progress-steps - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {
  ProgressSteps,
  ProgressStepIncomplete,
  ProgressStepComplete,
  ProgressStepCurrent,
  ProgressStepError,
  ProgressStepSeparator,
} from '@twilio-paste/core/progress-steps';

const PopoverExample: React.FC = () => {
  return (
    <ProgressSteps>
      <ProgressStepComplete as="button" onClick={() => {}}>
        Sign up
      </ProgressStepComplete>
      <ProgressStepSeparator />
      <ProgressStepError as="button" onClick={() => {}}>
        Validate email
      </ProgressStepError>
      <ProgressStepSeparator />
      <ProgressStepCurrent as="button" onClick={() => {}}>
        Complete profile
      </ProgressStepCurrent>
      <ProgressStepSeparator />
      <ProgressStepIncomplete as="button" onClick={() => {}}>
        Add friends
      </ProgressStepIncomplete>
      <ProgressStepSeparator />
      <ProgressStepIncomplete as="button" onClick={() => {}} disabled>
        Start event
      </ProgressStepIncomplete>
    </ProgressSteps>
  );
};

Props

Props page anchor

ProgressSteps

ProgressSteps page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PROGRESS_STEPS'

orientation

Type
Orientation
Default
'horizontal'

ProgressStepSeparator

ProgressStepSeparator page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PROGRESS_STEP_SEPARATOR'

ProgressStepComplete

ProgressStepComplete page anchor

as RequiredRequired

Type
"div" | "a" | "button"

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PROGRESS_STEP_COMPLETE'

href

Type
string

i18nCompleteLabel

Accessible title of the ProgressSuccessIcon for screen readers.

Type
string
Default
'Completed'

ProgressStepError

ProgressStepError page anchor

as RequiredRequired

Type
"div" | "a" | "button"

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PROGRESS_STEP_ERROR'

href

Type
string

i18nErrorLabel

Accessible title of the ProgressErrorIcon for screen readers.

Type
string
Default
'Error'

ProgressStepCurrent

ProgressStepCurrent page anchor

as RequiredRequired

Type
"div" | "a" | "button"

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PROGRESS_STEP_CURRENT'

href

Type
string

i18nCurrentLabel

Accessible title of the ProgressCurrentIcon for screen readers.

Type
string
Default
'Current'

ProgressStepIncomplete

ProgressStepIncomplete page anchor

as RequiredRequired

Type
"div" | "a" | "button"

disabled

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PROGRESS_STEP_INCOMPLETE'

href

Type
string

i18nIncompleteLabel

Accessible title of the ProgressIncompleteIcon for screen readers.

Type
string
Default
'Incomplete'