Feedback

Progress

A labeled horizontal progress bar with a percentage readout, exported as ProgressRow from the chart module.

Source: src/components/ui/chart.tsx
Figma: Progress · status (default, success, warning, error, indeterminate). In code, ProgressRow renders the default status; status colors are a className override and there is no indeterminate mode.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { ProgressRow } from "@/components/ui/chart";

Showing a known percentage: quota used, profile completion, upload progress.
Breakdowns where several labeled rows share the same scale, like storage by file type.

When progress cannot be measured, use Spinner.
For a single headline metric in a tight space, CircularProgress may read better.

One labeled bar with its percentage.

ProgressRow has no status prop; the fill is always primary. Recolor it with an arbitrary variant on className.

Wrap the row in a progressbar role so assistive tech can read the value as it changes.

Accepts only the props below (no native attribute spread). The fill is always bg-primary, the label column is a fixed 96px and pct is not clamped.

Prop	Type	Default	Description
label	string	-	Required. Text on the left, in a 96px wide column.
pct	number	-	Required. Fill width and readout, 0 to 100. Clamp it yourself if the source can go out of range.
className	string	-	Merged onto the row. Use [&>div>div]:bg-diff-add (or bg-warning, bg-destructive) to recolor the fill.

ProgressRow is visual only: it has no progressbar role. The label and percentage are plain text that screen readers read in order.
For progress that changes live, wrap it in an element with role="progressbar", aria-label and aria-valuenow, aria-valuemin and aria-valuemax.
Do not use color alone to signal a warning or error state; say it in the label or nearby text.