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

Progress pills start at 45px wide if the container allows, but will shrink down to 1px as the container gets smaller. Resize this window to see each pill shrink.

import React from 'react'
import ProgressPills from 'playbook-ui'

const ProgressPillsDefault = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 3 steps complete' }}
                steps={3}
            />
            <ProgressPills
                active={9}
                aria={{ label: '9 out of 18 steps complete' }}
                marginTop="md"
                steps={18}
            />
        </>
    )
}

export default ProgressPillsDefault

Status

import React from 'react'
import ProgressPills from 'playbook-ui'

const ProgressPillsStatus = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 3 steps complete' }}
                steps={3}
                title="Status:"
                value="Orientation"
            />
        </>
    )
}

export default ProgressPillsStatus

Full Container Width

Pass fullWidthPill to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

import React from 'react'
import ProgressPills from 'playbook-ui'

const ProgressPillsFullWidth = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 5 steps complete' }}
                fullWidthPill
                steps={5}
            />
        </>
    )
}

export default ProgressPillsFullWidth

UI Samples using Progress Pills Kit

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

Crm Client List

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