Progress
Displays a progress bar indicating completion status.
Import
import { Progress } from "@retents/ui/progress"Usage Guidelines
When to use
- To indicate determinate progress where the percentage of completion is known (e.g., file uploads, multi-step forms, profile completion).
- When users benefit from seeing how far along a process is.
When NOT to use
- For indeterminate loading with no known progress — use Skeleton or a spinner instead.
- For step-based flows — use a stepper pattern where each step is explicitly labeled.
- For inline loading indicators on buttons or small elements — use a spinner icon.
Accessibility
The Progress component uses role="progressbar" automatically via Radix UI. Pass an aria-label if there is no visible label describing what is loading.
Preview
Usage
<Progress value={60} />