Progress
A horizontal progress bar that visually communicates completion status. The value is clamped between 0 and 100, and an optional label displays the current percentage.
Import
import { Progress } from '@wavebooking/aqua-fusion';
Preview
Live PreviewOpen in Storybook (opens in a new tab)
Loading preview...
Usage
<Progress value={65} />
With label
<Progress value={42} showLabel />
Sizes
<Progress value={50} size="sm" />
<Progress value={50} size="md" />
<Progress value={50} size="lg" />
Color variants
<Progress value={100} variant="success" />
<Progress value={60} variant="warning" />
<Progress value={25} variant="error" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | - | Progress value from 0 to 100. Values outside this range are clamped. |
size | 'sm' | 'md' | 'lg' | 'md' | Height of the progress bar. |
variant | 'default' | 'success' | 'warning' | 'error' | 'default' | Color variant of the filled portion. |
showLabel | boolean | false | Show a "Progress" label and percentage value above the bar. |
className | string | - | Additional CSS classes for the outer wrapper. |