Progress Step

Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle.

Tracker
You must set the icon prop to true for this kit.
This variant takes children just like the default progress step. It is best to use the caption kit for children in this variant.

Default

import React from 'react'

import ProgressStep from 'playbook-ui'
import ProgressStepItem from 'playbook-ui'

const ProgressStepDefault = (props) => (
  <div>
    <ProgressStep
        icon
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>

    <br />
    <br />

    <ProgressStep>
      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
    </ProgressStep>

    <br />
    <br />
  </div>
)

export default ProgressStepDefault

Vertical

import React from 'react'

import ProgressStep from 'playbook-ui'
import ProgressStepItem from 'playbook-ui'

const ProgressStepVertical = (props) => (
  <div>
    <ProgressStep
        icon
        orientation="vertical"
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>

    <br />

    <ProgressStep
        orientation="vertical"
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>

    <br />

    <ProgressStep
        orientation="vertical"
    >
      <ProgressStepItem status="complete">
        {'Child'}
      </ProgressStepItem>
      <ProgressStepItem status="active">
        {'Child'}
      </ProgressStepItem>
      <ProgressStepItem status="inactive">
        {'Child'}
      </ProgressStepItem>
    </ProgressStep>
  </div>
)

export default ProgressStepVertical

Tracker

import React from 'react'

import ProgressStep from 'playbook-ui'
import ProgressStepItem from 'playbook-ui'

import Caption from 'playbook-ui'

const ProgressStepTracker = (props) => (
  <div>
    <br />
    <ProgressStep
        icon
        variant="tracker"
    >
      <ProgressStepItem status="complete">
        <Caption>{'Ordered'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="active">
        <Caption>{'Shipped'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="inactive">
        <Caption>{'Delivered'}</Caption>
      </ProgressStepItem>
    </ProgressStep>

    <br />
    <ProgressStep
        icon
        variant="tracker"
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="hidden" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>
  </div>
)

export default ProgressStepTracker

Using State

import React, { useState } from 'react'

import ProgressStep from 'playbook-ui'
import ProgressStepItem from 'playbook-ui'

import Caption from 'playbook-ui'
import Button from 'playbook-ui'

const ProgressStepTrackerClickEvents = (props) => {
  const [warning, setWarning] = useState(false)
  const showWarning = warning == true
  const WarningIcon = (
    <ProgressStepItem
        icon="exclamation-triangle"
        key={Math.random()}
        status="active"
    >
      <Caption>{'Shipped'}</Caption>
    </ProgressStepItem>
  )
  const CheckedIcon = (
    <ProgressStepItem
        key={Math.random()}
        status="active"
    >
      <Caption>{'Shipped'}</Caption>
    </ProgressStepItem>
  )
  return (
    <div>
      <Button onClick={() => setWarning(!warning)}>{'Toggle State'}</Button>
      <br />
      <br />
      <br />
      <ProgressStep
          icon
          variant="tracker"
      >
        <ProgressStepItem status="complete">
          <Caption>{'Ordered'}</Caption>
        </ProgressStepItem>
        {showWarning ? WarningIcon : CheckedIcon}
        <ProgressStepItem status="inactive">
          <Caption>{'Delivered'}</Caption>
        </ProgressStepItem>
      </ProgressStep>
    </div>
  )
}

export default ProgressStepTrackerClickEvents

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat