Components

Progress

Determinate bar showing completion of a task from 0 to 100. Built on Radix Progress. Height 2px + rounded-full with a primary indicator.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Progress value={12} />
<Progress value={42} />
<Progress value={78} />
<Progress value={100} />

When to use

  • Uploads, imports, or any measurable operation.
  • Meters inside cards (rule health, allocation, quota).

When not to use

  • For indeterminate loading — use Skeleton or a spinner.
  • For step-by-step wizards — use tabs or a stepper.

Usage

Do
  • Show the percentage as text alongside the bar for accessibility.
  • Keep the value between 0 and 100.
Don't
  • Don't tint the bar destructive/warning by default — the bar is neutral.