shadcn.io is not affiliated with official shadcn/ui
Progress examples · Colored
Success Progress for React
A progress bar at 70 percent in the success color, for a task that is going well.
A progress bar in the theme's success color, for healthy progress: uploads going through, tests passing, a goal on track.
Preview
Installation
FAQ
How is the bar colored?
With classes on Progress, since it has no color prop. **:data-[slot=progress-indicator]:bg-success colors the fill, which sits inside the track.
*:data-[slot=progress-track]:bg-success/20 tints the track.
Why the success token and not a palette color?
success 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 70 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.
Related
- Warning ProgressA progress bar at 50 percent in the
- Danger ProgressA progress bar at 25 percent in the
- Complete ProgressA progress bar at 100 percent, filled to
- Badge with Text (Standard)A default badge with a short label for a
- Success with Title AlertA success alert with only a title, for a
- Gradient ProgressA progress bar at 65 percent whose fill