ProgressBar

Status: stableAccessibility reviewedtenet-ui@0.4.0

Import

import { ProgressBar } from 'tenet-ui';

Also accepts every prop of HTMLAttributes<HTMLDivElement>.

Source: src/components/ProgressBar/ProgressBar.tsx

Usage guidelines

A thin, pill-shaped bar that communicates the progress of a task — a file upload, a multi-step form, a background job.

When to use

• Use ProgressBar when you can express progress as a fraction of a known total (determinate) — pass value (and max if it isn’t 100).
• Use the indeterminate ProgressBar (omit value) when work is underway but its duration is unknown.
• Reach for Spinner instead when the indicator must be compact (inline, inside a button) rather than a full-width bar.

Rules

• Always give it an accessible name. A progressbar has no intrinsic label, so pass aria-label or aria-labelledby. Without one it is announced nameless — an axe failure.
• value is clamped to [0, max]; you don’t have to pre-clamp. max defaults to 100.
• Determinate bars expose aria-valuenow and a human-readable aria-valuetext (e.g. "42%"). Indeterminate bars omit aria-valuenow and run an animated sweep.
• The sweep respects prefers-reduced-motion: under reduced motion it becomes a calm opacity pulse rather than a traveling bar.
• Track is bgColor-muted; the fill uses the variant’s emphasis token. Pick variant for meaning (success when complete, danger for an at-risk quota), not decoration.

Do / Don’t

✅ Determinate with a name and a real total:

<ProgressBar value={file.uploaded} max={file.size} aria-label="Upload progress" />

✅ Indeterminate while the duration is unknown:

<ProgressBar aria-label="Loading report" />

❌ No accessible name (announced nameless):

<ProgressBar value={42} />

❌ Faking indeterminate with value={0} — that’s a real, stalled 0%. Omit value instead.

See also: Spinner and Skeleton; system guideline data-display (loading rules).

Examples

4 stories for ProgressBar — open in Storybook

• Default components-progressbar--default
• Indeterminate components-progressbar--indeterminate
• Variants components-progressbar--variants
• Small components-progressbar--small

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
value	number	—	Current progress, from 0 to max. Values are clamped into range. Omit (or pass undefined) for an INDETERMINATE bar that shows an animated sweep instead of a fixed fill.
max	number	100	Upper bound of the scale. Defaults to 100.
size	'small' | 'medium' ProgressBarSize	medium	Track/fill height from the size scale. Defaults to 'medium'.
variant	'accent' | 'success' | 'danger' ProgressBarVariant	accent	Fill color, mapped to the matching emphasis token. Defaults to 'accent'.

Related components

• Spinner
• Skeleton
• Text