Progress
Determinate or indeterminate progress indicator.
Add it to your project
Eject the complete progress group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject progressbash
npx toucan eject progressapp.tsx
import { Progress } from '@/components/toucan/progress';Use when
A process duration or completion percentage should be communicated.
Avoid when
The wait has no meaningful progress and is very short.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Progress
Progress
Props type: ProgressProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | undefined | No | Accessible label for the progress bar. |
max | number | 100 | No | Maximum value. Defaults to 100. |
size | "sm" | "md" | "lg" | 'md' | No | Size variant. |
value | number | undefined | No | Current value (0 to max). Omit for indeterminate. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
ProgressProps
Accessibility
- Reports progressbar semantics, bounds, value, and accessible label.
Token families
progress