Progress Bar
A progress bar visually showing the percentage of a task completed.
0%
Helper text
Usage
import { ProgressBar } from "@lemonsqueezy/wedges";<ProgressBar value={50} />API Reference
ProgressBar component extends the Radix Progress component and supports all of its props.
| Prop | Value | Default |
|---|---|---|
afterIndicator | ReactNode | / |
asChild | boolean | false |
color | Enum | "primary" |
description | ReactNode | / |
disableAnimation | boolean | false |
disabled | boolean | false |
getValueLabel | function | / |
helperText | ReactNode | / |
indicator | ReactNode | / |
label | ReactNode | / |
max | number | 100 |
tooltip | ReactNode | / |
value | number | null | / |
variant | "default" | "inline" | "default" |
| Data attribute | Value |
|---|---|
[data-max] | The max value |
[data-state] | "complete" | "indeterminate" | "loading" |
[data-value] | The current value |
Accessibility
The ProgressBar component supports all accessibility features of the Radix Progress primitive.
Examples
The following example shows different layout variants.
50%
Helper text
Helper text
50%
Next example shows different color and layout combinations.
50%
27MB of 60MB
100%
60MB of 60MB
Oops, something went wrong
368
211
96
50% (9 sec left)
70%
50%
50% Complete
(650MB/1.12GB) · 17 seconds remaining