Progress Bar
A progress bar visually showing the percentage of a task completed.
Loading preview
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.
Loading preview
Next example shows different color and layout combinations.
Loading preview