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.
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
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
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
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