Progress Bar

Determinate progress indicator showing completion percentage, in sm and md sizes.

Installation

npx asteria-ui add progress-bar

Usage

import { ProgressBar } from "@/components/ui/progress-bar";

<ProgressBar value={60} label="Uploading file" />

label is required, not optional — a progress bar with no description of what's progressing is a real accessibility gap, so it's baked into the type rather than left as something to remember.

Examples

Sizes

API reference

Prop	Type	Default	Description
value	number	—	Current progress value, from 0 to max. Required.
max	number	100	The value that represents 100%.
label	string	—	Describes what is loading (e.g. "Uploading file") — required, since a progress bar with no description of what's progressing is a real accessibility gap.
size	"sm" \| "md" \| "lg"	"sm"	Track height — 4 / 8 / 12px.

Accessibility

Role. role="progressbar", with aria-valuenow/aria-valuemin/ aria-valuemax reflecting the current value.
Accessible name. aria-label from the required label prop.
Non-interactive. A determinate progress display isn't an interactive control, so it correctly has no tabIndex.