Skip to content

Progress

How far along a task of known size is. Always labelled. Use null for work whose size isn't known yet.

Sourcecomponents/progress.tsx

Values

Not started
x
Uploading brief.pdf
x
Export complete
x

Sizes, hidden label, indeterminate

Storage used
x
Profile completeness
x
Preparing export
x

Usage

Progress usage
import { Progress } from "@/components/progress";
export function ProgressUsage({ uploaded, total }: { uploaded: number; total: number | null }) {  return <Progress label="Uploading brief.pdf" value={total ? Math.round((uploaded / total) * 100) : null} showValue />;}

When to use

Use when

A task of known size: uploads, exports, setup steps. Always pass label; value={null} while the size is unknown

Don’t use when

Waiting with no measurable progress (use Spinner); decorative meters