Pelican Design System
Progress Indicator
Progress Indicator
Progress Indicators show users their place in a multi-step process.
On this page:
Best Practices
- Use the Large Progress Indicator when the progress can be easily divided into segments.
- Use the Small Progress Indicator when the progress is hard to divide into clean segments.
- Use it in conjunction with Back and Forward Buttons.
- Put the current step’s info into the
<title>within the<head>. - Use the Small Progress Indicator when the progress is hard to divide into clean segments.
- Place the buttons at the bottom, but above the footer, of each page in the process.
- Be sure to customize the value in the
aria-label="..."for each project. - Buttons should be side by side at small sizes, when the button labels are short.
- Buttons can be centered at small sizes when the buttons labels are too long for side by side arrangement.
- When button labels are long enough to require centering, ensure that Previous button is atop the Next button.
- To assign equal emphasis to Previous and Next, change
btn-outline-uion the Previous button tobtn-primary. - Consider the guidance in Buttons.
Usage
Large Progress Indicator
See the Pen Progress Indicator Large by LA Gov Design Team (@lagovdesignteam) on CodePen.
Small Progress Indicator
See the Pen Progress Indicator Large by LA Gov Design Team (@lagovdesignteam) on CodePen.