Progress

Linear progress bar showing completion from 0 to 100; omit value for an indeterminate (empty) track. Built on Radix Progress for accessible semantics.

Uploading swatches

64%

Usage

import { Progress, ProgressCircle } from "@desk/ui/components/progress";

Best practices

Use Progress for determinate 0–100 completion (omit value for an indeterminate track); position in a stepped flow is ProgressDots.
For a ring instead of a bar use ProgressCircle — it needs an explicit label for its role="progressbar" accessible name.

Props

Prop	Type	Default	Description
children	`React.ReactNode`		Optional content rendered centered over the ring (e.g. a percentage).
className	`string`
indicatorClassName	`string`
label(required)	`string`		Accessible label announced by screen readers (required).
max	`number`	`100`	Value that maps to a full ring.
size	`number`	`44`	Ring diameter in pixels.
strokeWidth	`number`	`3`	Ring stroke width in pixels.
trackClassName	`string`
value(required)	`number`		Current progress; clamped to `0..max`.
valueFormatter	`(value: number, max: number) => string`	`rounded percentage of max`	Formats the ring's hover title text.

Also exports

componentProgress

Composition

Used by

FileUploadDropzone