Progress Steps

Version 2.1.1Github Storybook

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

Installation

yarn add @twilio-paste/progress-steps - or - yarn add @twilio-paste/core

Usage

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

ProgressSteps

element

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

Type: any
Default: 'PROGRESS_STEPS'

orientation

Type: Orientation
Default: 'horizontal'

Inherited props

ProgressStepSeparator

element

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