Components

Progress bar

A component used to represent the completion of a task or to visualize different states that are relevant to the user.

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.

Show code

<ProgressBar percent={75} aria-label="Progress bar depicting progress of a task" />

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.

Show code

<ProgressBar
    variant="negative"
    percent={95}
    aria-label="Progress bar depicting progress of a task"
/>

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.

Show code

<ProgressBar isDimmed percent={50} aria-label="Progress bar depicting progress of a task" />

Small

Use the small progress bar variant when vertical space is limited. This size is commonly used in cards, data tables, and side panels.

Show code

<Stack space={24} stretch>
    <ProgressBar size="small" percent={25} aria-label="Progress bar depicting progress of a task" />
</Stack>

Percentage

Provide a percentage value to represent the current level of completion or status.

Show code

<Stack space={24} stretch>
    <ProgressBar percent={0} aria-label="Progress bar depicting progress of a task" />
    <ProgressBar percent={25} aria-label="Progress bar depicting progress of a task" />
    <ProgressBar percent={50} aria-label="Progress bar depicting progress of a task" />
    <ProgressBar percent={75} aria-label="Progress bar depicting progress of a task" />
    <ProgressBar percent={100} aria-label="Progress bar depicting progress of a task" />
</Stack>

Accessibility

The progress bar requires an aria-label to provide context for assistive technology to read the progress of a task.

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page