Features
- Offers neutral and negative variants for different states
- Small size optimized for constrained spaces like tables and cards
- Dimmed styling for de-emphasized or low-priority progress
- Includes accessibility support for assistive technologies to read progress
When to use
At Pleo, we commonly use progress bars to communicate wallet limits, billing amounts and progression of certain processes or tasks.
Options
Neutral
Use the neutral progress bar variant to represent standard progress without any specific signaling. This is the default option and is appropriate for most scenarios where progress simply needs to be shown.
Negative
Use the negative progress bar variant to highlight a critical or potentially problematic state that may lead to negative outcomes for users. This is appropriate for situations such as exceeding a spending limit or having a wallet balance fall below a required threshold.
Dimmed
Use the dimmed (subtle) version of the progress bar to de-emphasize progress. This variant is typically used in scenarios where the data is no longer relevant—for example, when an account is deactivated or when something is suspended or expired.
Small
Use the small progress bar variant when vertical space is limited. This size is commonly used in cards, data tables, and side panels.
Percentage
Provide a percentage value to represent the current level of completion or status.
Accessibility
The progress bar requires an aria-label to provide context for assistive technology to read the
progress of a task.