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.

Default

<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>

Status

Orientation

<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>

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