Feedback and loading
Preview
Show progress, results and loading states without losing the context of a report.
Usage
<Banner tone="warning" title="Data is delayed">
The latest complete hour ends at 14:00 UTC.
</Banner>
<Progress label="Importing rows" value={72} max={100} showValue />
<Progress label="Preparing export" />
<Meter label="Monthly capacity" value={730} max={1000} />
<Skeleton width="100%" height={240} />Use Progress for completion and Meter for a measurement within a range. Omitting a Progress value means indeterminate progress. Skeleton is a visual placeholder; put a meaningful loading status on the surrounding region.
Meter
PropTypeDefaultDescription
valuerequirednumber——
maxrequirednumber——
minnumber0—
labelReactNode——
format(value: number, max: number) => string—Value text, e.g.
(v, max) => \${v} / ${max} GB\``. Defaults to "value / max".thresholdsMeterThresholds | false—Pass
false to keep the meter neutral at any level.Also accepts the props of HTMLAttributes<HTMLDivElement>, spread onto the root element.
Progress
PropTypeDefaultDescription
valuenumber—Omit for an indeterminate bar.
maxnumber100—
labelReactNode——
showValuebooleanfalseShow the percentage (or
formatValue) at the end of the label row.formatValue(value: number, max: number) => string——
tone'signal' | 'positive' | 'warning' | 'negative' | 'ink'ProgressTone'signal'—
Also accepts the props of HTMLAttributes<HTMLDivElement>, spread onto the root element.
Skeleton
PropTypeDefaultDescription
widthnumber | string—CSS width (number = px). Default 100%.
heightnumber | string—CSS height (number = px). Default 12px; ignored with
lines.radiusnumber | string—Corner radius (number = px). Default 4px.
linesnumber—Render a block of text lines; the last one is shorter.
circleboolean—A circle of
width × width.Also accepts the props of HTMLAttributes<HTMLDivElement>, spread onto the root element.
Report an issueBuilt Oct 21, 2026