The ProgressBar communicates the status of a long-running process to all users, including those using assistive technology.

Accessibility Features

Semantic Progress: Correctly sets aria-valuenow, aria-valuemin, and aria-valuemax.
Percentage Announcement: Screen readers announce the progress as a percentage or fraction.
Custom Value Text: Use valueText to override the screen reader announcement (e.g. "3 of 5 steps complete").

Usage Example

import { ProgressBar } from '@holmdigital/components'; // Basic <ProgressBar value={65} label="Uploading file..." /> // With custom range and variant <ProgressBar value={3} min={0} max={5} label="Step progress" showValueLabel variant="success" /> // Custom announcement text <ProgressBar value={3} max={5} label="Steps" valueText="Step 3 of 5" />

Props

Props Reference

Prop	Type	Default	Description
value *	number	-	Current progress value.
label *	string	-	Accessible label for the progress bar (aria-label).
min	number	0	Minimum value (aria-valuemin).
max	number	100	Maximum value (aria-valuemax).
showValueLabel	boolean	false	Renders a visible percentage label next to the bar.
valueText	string	-	Overrides the screen reader's value announcement (e.g. '3 of 5 steps complete').
variant	'primary' \| 'success' \| 'warning' \| 'danger'	'primary'	Color variant of the progress bar.
className	string	-	Additional CSS classes for the wrapper element.