Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Progress examples · Colored

Danger Progress for React

A progress bar at 25 percent in the destructive color, for a task that is failing or critical.

Framework
UI library

A progress bar in the theme's destructive color, for an upload that keeps failing or a quota that is nearly used up. Pair the color with text that says what is wrong.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the bar colored?

With classes on Progress, since it has no color prop. **:data-[slot=progress-indicator]:bg-destructive colors the fill, which sits inside the track. *:data-[slot=progress-track]:bg-destructive/20 tints the track.

How do I go back to the default colors?

Remove the two color classes. The fill goes back to bg-primary and the track to bg-muted.

Does 25 pick the color?

No. value only sets the amount; the color classes apply at any value. Change them yourself when the state changes, such as when an upload fails.

What is the accessible name?

aria-label on Progress, Upload progress. The demo has no visible label, so without it a screen reader would announce a bar with no name.

Can the color carry the meaning on its own?

No. The color isn't announced, and not everyone can tell colors apart. Say what it means in words beside the bar, such as Upload failed or Storage almost full.

How do I update the 25?

Change value as the work advances. This demo passes a fixed 25.

All 20 progress examples