Feedback / Progress
Progress
Filled with crayon hatching instead of a flat bar. The leading edge is a single heavier stroke.
Server ComponentWCAG AASince v0.1
Syncing offline reports
Units available
Response time target
import { Progress } from "@plop-ui/react";
<Progress label="Syncing offline reports" value={4} max={10} valueText="4 of 10" />
<Progress label="Response time target" value={92} valueText="92% used" tone="tomato" solid />Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| label required | ReactNode | — | What is progressing, e.g. "Syncing offline reports". |
| value required | number | — | — |
| className | string | none | — |
| max | number | 100 | The value that means "done". |
| solid | boolean | false | A solid bar instead of crayon hatching. |
| tone | "ink" | "mint" | "tomato" | ink | Hatching color: `mint` for good news, `tomato` for running out. |
| valueText | string | "<n>%" | Shown on the right and read by screen readers, e.g. "4 of 10". |
Use it well
DoShow the real count next to the bar: "4 of 10".
Don'tUse a progress bar for things that aren't going anywhere. That's a meter.
Accessibility
- role="progressbar" with value, min, max and a readable aria-valuetext.
- Labeled by its visible label.