Components / status

status · @awesome-ds/react

Progress

Determinate progressbar.

Rules: rule.a11y.wcag-aa

State matrix

0required
partialrequired
100required

Anatomy

  • label
  • progressbar track
  • value fill

Keyboard contract

Read-only progress is not focusable; interactive sliders use another component.

Screen-reader contract

Progressbar exposes label, current value, minimum, and maximum.

Content rules

  • Name the operation.
  • Report meaningful completion rather than fake increments.

Public API

PropTyperequiredDescription
valuenumberrequiredCompletion percentage
labelstringrequiredOperation name

Adaptation contracts

RTL
Align status copy to inline-start and keep number/value semantics locale aware.
High contrast
Expose status with text, shape, or system color rather than authored color alone.
Reduced motion
Stop looping indicators where possible and retain a textual status.

Verification IDs

Progress/value-semantics

Live

Live

Progress: 55%

Copyable example

import { Progress } from "@awesome-ds/react";

<Progress value={40} label="Upload" />