Progress

A progress bar shows users how far a task has come. Its indicator fills the track as the value moves from the minimum to the maximum, and a label names the task for users and for assistive technology.

UsageCopy Anchor Link

import { Progress } from "@biem/ui/components/ui/progress";

export function ProgressDefault() {
	return (
		<div className="w-full max-w-sm">
			<Progress value={60} aria-label="Inventory count"/>
		</div>
	);
}

ExamplesCopy Anchor Link

With LabelCopy Anchor Link

Users need to know which task a progress bar measures before its value means anything to them. Placed inside the progress bar, ProgressLabel names that task on screen and gives assistive technology the same name.

With ValueCopy Anchor Link

A bar alone leaves users estimating how much of a task remains. With ProgressValue, the value appears as text as well, by default as a percentage of the range, while assistive technology already receives the same figure from the progress bar itself.

Custom RangeCopy Anchor Link

Many tasks are counted in units of their own, such as the positions of an order or the shelves of a store. Through min and max the progress bar adopts that range, so the application passes the count as it is and the value still appears as a percentage of the whole.

Custom Value TextCopy Anchor Link

Sometimes a percentage hides the figure users actually work with, such as the number of items still open. A function as the children of ProgressValue then shows the value in the words of the task, while assistive technology keeps announcing the formatted value unless getAriaValueText provides the same words.

Formatted ValueCopy Anchor Link

Progress toward a budget or a revenue goal is measured in money rather than in percent. With format, the value appears as a currency amount or in any other unit the task requires, and locale decides how it is written, so users read and assistive technology announces the same figure.

InfoCopy Anchor Link

Some processes run in the background and ask nothing of users, such as an import of new product data. Set to "info", variant presents such progress as information only, so users can follow it without feeling asked to act.

SuccessCopy Anchor Link

A finished task that went as planned, such as a price update that reached every store, lets users move on with confidence. With variant set to "success", the progress bar confirms that outcome, so users need not check the result again.

WarningCopy Anchor Link

Progress can fall behind what a schedule allows, for example a replenishment that must be finished before the store opens. Once variant is set to "warning", the progress bar asks for attention while the task continues, so users can step in before the delay matters.

DestructiveCopy Anchor Link

An interrupted upload leaves work that users have to take up again. With variant set to "destructive", the progress bar marks the task as failed, and since the status shows only through color, the label names the failure in words as well.

CompleteCopy Anchor Link

A task that has ended should read as ended, so users can turn to the next one. As soon as value reaches max, the progress bar is complete, and assistive technology announces the full amount instead of a share of it.

ControlledCopy Anchor Link

Most progress follows work that happens elsewhere in the interface, such as items that users confirm one at a time. The application holds value in its own state and passes every new count to the progress bar, which keeps pace with each step users complete.

API ReferenceCopy Anchor Link

ProgressCopy Anchor Link

ProgressLabelCopy Anchor Link

ProgressValueCopy Anchor Link

ProgressTrackCopy Anchor Link

ProgressTrack is the bar that the indicator fills. Progress renders it itself, after its children.

ProgressIndicatorCopy Anchor Link

ProgressIndicator fills the track up to the current value. Progress renders it itself, inside ProgressTrack.