Progress

A horizontal bar that shows how much of a known, measurable task is complete.

When to use

• Uploads, imports, indexing, and other tasks with a known total.
• Setup or quota completion where a percentage is meaningful.
• Not for unknown durations: use Skeleton or a loading state. Not for plan allowances split by category: use UsageMeter. For compact inline status use ProgressRing.

Usage

import { Progress } from "@/components/iris/progress/progress";

h(Progress, { label: "Building the knowledge graph", value: 64, showValue: true });
h(Progress, { label: "Notes imported", value: 3, max: 9 });

Props

Prop	Type	Default	Description
value	number	0	Current amount, clamped to 0…max.
max	number	100	Total amount.
label	string	—	Visible label above the bar; also the accessible name.
showValue	boolean	false	Shows the rounded percentage beside the label.
…div props			className, id, style, etc.

Notes

• Renders role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and a percentage aria-valuetext.
• The accessible name is label, falling back to "Progress". A passed aria-label is overridden by that fallback, so always give a label when several bars share a page.
• At 100% a check settles in beside the count.
• One spring drives the fill and the counted number, so they always match; reduced motion jumps to the new value.
• Reads --accent (fill), --green, --hover (track), --line, --ink-2, --ink-3.