Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Progress examples · Colored

Warning Progress for React

A progress bar at 50 percent in the warning color, for a task that needs attention.

Framework
UI library

A progress bar in the theme's warning color, for something to watch: a slow upload, storage filling up, a limit getting close.

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-warning colors the fill, which sits inside the track. *:data-[slot=progress-track]:bg-warning/20 tints the track.

How do I use another color?

Swap warning for another theme color in both classes. The other colored examples use destructive, success and info the same way.

Does 50 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 50?

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

All 20 progress examples