Progress

Feedback · src/components/Progress/Progress.tsx

How far along something measurable is.

Measurable is the condition: use Loader when the share is unknown and there is no honest number to show. An indeterminate Progress says "I am working"; a Progress bar stuck at 90% says something untrue.

The value is clamped into range rather than trusted, so a bad number from upstream cannot draw a bar past its track. When indeterminate, the value attributes are omitted entirely - a progressbar carrying aria-valuenow="0" tells a screen reader nothing is happening.

Import

import { Progress } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
value	number
max	number
label	React.ReactNode	Names what is progressing. Also becomes the accessible name.
ariaLabel	string	Accessible name when there is no visible label.
showValue	boolean	Print the percentage beside the label.
indeterminate	boolean	Something is happening but the share is unknown. Drops the value attributes.
tone	'brand' | 'success' | 'warning' | 'danger'
size	'sm' | 'md'
className	string