Progress Pills

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.

See this kit in action in our sample UI

Default

Code Example

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

Status

Code Example

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

UI Samples using Progress Pills Kit

Get the full picture. See how this kit is used in our samples.

Progress Pills

See this kit in action in our sample UI

UI Samples using Progress Pills Kit

Crm Client List