ProgressBar

Alpha

An accessible progress indicator with role='progressbar', status variants, and animation support.

Import

import { ProgressBar } from "@compa11y/react";

Usage

Example.tsx

import { ProgressBar, Text, Heading } from "@compa11y/react";

function Example() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
      <div>
        <Text size="sm" weight="semibold">Upload progress</Text>
        <ProgressBar value={65} showLabel aria-label="Upload progress" />
      </div>

      <div>
        <Text size="sm" weight="semibold">Build complete</Text>
        <ProgressBar value={100} status="success" aria-label="Build status" />
      </div>

      <div>
        <Text size="sm" weight="semibold">Disk usage warning</Text>
        <ProgressBar value={85} status="warning" striped aria-label="Disk usage" />
      </div>

      <div>
        <Text size="sm" weight="semibold">Loading...</Text>
        <ProgressBar aria-label="Loading content" />
      </div>
    </div>
  );
}

Features

role='progressbar' with aria-valuenow, aria-valuemin, aria-valuemax
Status variants: default, success, warning, error
Optional visible label
Striped and animated styles
Indeterminate mode when value is undefined
Screen reader announcements for progress changes

Props

ProgressBar component props
Prop	Type	Default	Description
`value`	`number`	-	Progress value (0–100). Omit for indeterminate
`status`	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`	Visual status variant
`showLabel`	`boolean`	`false`	Shows percentage text
`striped`	`boolean`	`false`	Adds striped pattern
`animated`	`boolean`	`false`	Animates the striped pattern
`aria-label`	`string`	-	Accessible label for the progress bar

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for ProgressBar
Key	Action