Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Progress Steps

Version 2.2.2GithubStorybook

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'

ProgressStepContent

ProgressStepContent page anchor

element

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

Type
string
Default
'PROGRESS_STEP_CONTENT'

paddingY

Responsive prop of Space tokens for the CSS padding-top and padding-bottom properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 38 more ... | { ...; }
Default
'space40'

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'