Component reference
Progress
Explain storage usage with a labelled progress meter.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Progress, Slider } from "@pimolu/react";
function StorageUsage() {
const [used, setUsed] = useState(72);
const variant = used >= 90
? "danger"
: used >= 75
? "warning"
: "primary";
return (
<div className="grid gap-5 min-w-0">
<Progress
label="Storage used"
value={used}
showValue
variant={variant}
formatValue={(value, max) => `${value} Go of ${max} Go`}
valueLabel={`${used} gigabytes used of 100`}
/>
<Slider
label="Simulate usage"
min={0}
max={100}
value={used}
onValueChange={setUsed}
showValue
formatValue={(value) => `${value} Go`}
/>
</div>
);
}
export function DemoExample() {
return (<StorageUsage />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
The size drives the track height and the gap.
Variants
The variant sets the tone of the filled part.
States
Determinate, indeterminate, formatted, clamped.
Usage
Match value/max and the displayed unit; provide explicit text for thresholds.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluProgressProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
value | number | undefined | — | Current value between 0 and `max`. Leave it undefined for an indeterminate progress bar. |
max | number | undefined | 100 | Upper bound. |
size | "sm" | "md" | "lg" | undefined | "md" | Visual size of the track. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Tone of the filled part. |
label | string | undefined | — | Visible label, also used as the accessible name. |
showValue | boolean | undefined | false | Display the current value next to the label. |
formatValue | ((value: number, max: number) => string) | undefined | — | Formats the visible readout, for example (value) => `${value} of 40`. |
valueLabel | string | undefined | — | Overrides the value announced by assistive technology. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
valuenumber | undefinedNo default extracted.
Current value between 0 and `max`. Leave it undefined for an indeterminate progress bar.
maxnumber | undefinedDefault: 100
Upper bound.
size"sm" | "md" | "lg" | undefinedDefault: "md"
Visual size of the track.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Tone of the filled part.
labelstring | undefinedNo default extracted.
Visible label, also used as the accessible name.
showValueboolean | undefinedDefault: false
Display the current value next to the label.
formatValue((value: number, max: number) => string) | undefinedNo default extracted.
Formats the visible readout, for example (value) => `${value} of 40`.
valueLabelstring | undefinedNo default extracted.
Overrides the value announced by assistive technology.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Give the meter a name and do not rely on bar color to explain remaining capacity.