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.

Summary

Uses Icons

Default

The default Progress Step kit sets orientation to horizontal and can be used with completed, active, and inactive steps as shown here.

icon is a boolean prop that can also be set to true to render icons within the steps indicator. icon is false by default.

import React from 'react'

import { ProgressStep, ProgressStepItem } from 'playbook-ui'

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

    <br />
    <br />

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

    <br />
    <br />

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

export default ProgressStepDefault

Vertical

orientation can also be set to vertical as shown here. By default, this is set to horizontal.

import React from 'react'

import { ProgressStep, 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

The variant prop can be set to tracker to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the icon prop to true for this variant.

This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.

import React from 'react'

import { ProgressStep, ProgressStepItem, 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

Color

The color prop can also be used to set color for the tracker variant. Options for color are primary and info with default being set to primary.

NOTE: The color prop is only available with the tracker variant.

import React from 'react'

import { ProgressStep, ProgressStepItem, Caption } from 'playbook-ui'

const ProgressStepColor = (props) => (
  <div>
    <br />
    <ProgressStep 
        color="info"
        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>
  </div>
)

export default ProgressStepColor

Custom Icon

Custom icons can also be set for individual steps. Simply use the icon prop for the relevant ProgressStepItem/progress_step_item as shown here.

import React from 'react'

import { ProgressStep, ProgressStepItem, Caption } from 'playbook-ui'

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

export default ProgressStepCustomIcon

Using State

import React, { useState } from 'react'

import { ProgressStep, ProgressStepItem, Caption, 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

Github

Connect Chat