Progress Bar - Segmented

Also known as: Step indicator

Examples

Default

View va-segmented-progress-bar default in Storybook

Step Labels

View va-segmented-progress-bar step labels in Storybook

Centered Step Labels

View va-segmented-progress-bar vcentered step labels in Storybook

Counters

View va-segmented-progress-bar counters in Storybook

Small Counters

View va-segmented-progress-bar small counters in Storybook

Centered Counters

View va-segmented-progress-bar centered counters in Storybook

Centered Small Counters

View va-segmented-progress-bar centered small counters in Storybook

Custom Header Level

View va-segmented-progress-bar custom header level in Storybook

Usage

Additional guidance for VA

The Segmented Progress Bar is primarily used in multi-step form flows to show users their progress through the application process.

For additional guidance on using progress bars in form flows, see Form templates and Form accessibility guidelines.

When to consider something else

• Tracking progress over an extended period of time: If the steps in a process span multiple interactions or an extended period of time then use the Process list component.
• Steps can be completed in any order: If steps can be completed in any order consider the Master/Detail screen pattern and provide status as to when each section is complete and when the overall process is complete.
• Checklist: The progress bar is not intended to handle a checklist.

Placement

• The progress bar should appear directly below the h1 title of the process and before the form itself.

Code usage

Accessibility considerations

Related

• Activity progress bar
• Process list

Provide feedback

Share your feedback, report issues, or suggest improvements for the Progress Bar - Segmented component. Your input helps us make the design system better for everyone.

• Get immediate support in #platform-design-system for technical or urgent issues.
• Explore all feedback channels for additional ways to share your input.