Progress

import { Progress } from '@yarcl/react';

Uploading photos0%

Storage used82%

Steps completed3 of 8

Syncing

Start upload

<Progress value={uploaded} max={total} label="Uploading photos" showValue />
<Progress value={3} max={8} label="Steps completed" showValue formatValue={(v, max) => `${v} of ${max}`} />
<Progress label="Syncing" />

Set value for a determinate bar; leave it undefined and the bar slides back and forth until the work is measurable. Values are clamped between 0 and max.

The bar uses color, the track height scales with the size’s icon size, and both corners use radius. Set per-component defaults with components.Progress in the config. The track is a light wash of the text color, so the bar keeps at least 3:1 contrast against it for typical brand colors.

It renders role="progressbar". Determinate bars set aria-valuenow, aria-valuemin and aria-valuemax, and aria-valuetext when formatValue is set; indeterminate bars omit them. The label names the bar; without one, pass aria-label. With reduced motion, the indeterminate bar pulses in place instead of sliding.

Props

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Bar color, from the colors config.
formatValue	(value: number, max: number) => string		Formats the value for the visible text and aria-valuetext.
label	ReactNode		Visible label above the bar. It also names the progress bar for screen readers; without it, pass aria-label or aria-labelledby.
max	number	100	The value that means complete.
radius	'size' | Radiusconfig	config.defaults.radius	Corner radius of the track and bar, from the radii config.
showValue	boolean		Shows the value next to the label, as a percentage unless formatValue is set. Ignored when indeterminate.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Track height, scaled from the size's iconSize in the sizes config. Also sets the label's font size.
value	number		Current value, from 0 to max. Leave undefined for an indeterminate bar that animates until the work is measurable.