Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
Note: be sure to make use of the aria attribute as shown in the example if you want this kit to be web accessible.
import React from 'react' import ProgressPills from '../_progress_pills' const ProgressPillsDefault = (props) => { return ( <> <ProgressPills active={2} aria={{ label: '2 out of 3 steps complete' }} steps={3} {...props} /> </> ) } export default ProgressPillsDefault
import React from 'react' import ProgressPills from '../_progress_pills' const ProgressPillsStatus = (props) => { return ( <> <ProgressPills active={2} aria={{ label: '2 out of 3 steps complete' }} steps={3} title="Status:" value="Orientation" {...props} /> </> ) } export default ProgressPillsStatus