shadcn.io is not affiliated with official shadcn/ui
Progress examples · Colored
Info Progress for React
A progress bar at 60 percent in the info color, for routine work in the background.
A progress bar in the theme's info color, for routine work that needs no attention: a sync, an import, a background job.
Preview
Installation
FAQ
How is the bar colored?
With classes on Progress, since it has no color prop. **:data-[slot=progress-indicator]:bg-info colors the fill, which sits inside the track.
*:data-[slot=progress-track]:bg-info/20 tints the track.
Why the info token and not a palette color?
info is a theme color, so it follows light and dark mode and any theme you switch to. A class like bg-green-500 stays the same everywhere.
Does 60 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, Sync progress. The demo has no visible label, so without it a screen reader would announce a bar with no name.
Related
- Success ProgressA progress bar at 70 percent in the
- Warning ProgressA progress bar at 50 percent in the
- Empty ProgressA progress bar at 0 percent: an empty
- Badge with Text (Standard)A default badge with a short label for a
- Info with Title AlertAn info alert with only a title, for a
- Gradient ProgressA progress bar at 65 percent whose fill