Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

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'

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.