Components / feedback
Progress
Shows how far a task has progressed. Brand for neutral progress, Success on completion, Danger when a task has failed.
import { Progress } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Progress } from '@basiiik/ui';
<Progress label="Uploading report.pdf" />- Example values were filled in for the required prop label: replace them with your own.
- Progress has no interactive states. The Figma Value axis (0 to 100) is the
valueprop; omit it for an indeterminate bar. - Storybook: Feedback/Progress.
Props
| Prop | Type | Notes |
|---|---|---|
tone | "danger" | "brand" | "success" | Default "brand" |
size | "sm" | "md" | Default "md" |
value | number | |
label | ReactNode | |
showValue | boolean | |
aria-label | string | |
aria-labelledby | string |
Other props
| Prop | Type | What it does |
|---|---|---|
max | number | |
valueText | string | Text alternative for the value, e.g. "3 of 5 steps". Overrides the percentage announcement. |
States. Progress has no interactive states. The Figma Value axis (0 to 100) is the value prop; omit it for an indeterminate bar.
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- Known-duration tasks such as uploads and multi-step progress
Do not use it when
- Page content that is still loading (use Skeleton); for a task of unknown length, omit value for an indeterminate bar
Rules for agents
- Every Progress has a name: a visible label, or aria-label
- Pass value (0 to max) when progress can be measured; omit value for an indeterminate bar when it cannot
- Use valueText when a percentage is not meaningful, such as "3 of 5 files"
- Use tone="success" on completion and tone="danger" on failure, together with a text message
- Drive value from real progress; never animate a fake bar
Avoid
- A Progress bar for page content that is loading (use Skeleton)
- A bar that sits at 99% or restarts; switch to indeterminate if the end is unknown
- Showing success or failure by colour alone
- A Progress with no label, so screen reader users do not know what is progressing
Writing the content
- Labels name the task: 'Uploading report.pdf'
- On completion or failure, say so in text: 'Upload complete', 'Upload failed'
- Use sentence case
Accessibility
- aria-valuenow, aria-valuemin, aria-valuemax
- aria-label or aria-labelledby
- Omit aria-valuenow for indeterminate
Colour tokens it reads
color.bg.brand.defaultcolor.bg.danger.defaultcolor.bg.mutedcolor.bg.success.defaultcolor.text.primarycolor.text.secondaryRelated
feedback 30 Figma variants Try it in the live demo