ComponentsOverlays & feedback

Progress

Task progress and quota use — uploads, imports, leave balance, plan limits. Linear and circular, indeterminate, an automatic quota tone, and values formatted for the current locale (42% / %42).

WAI-ARIA progressbar components/progress.tsx, styles/overlays.csstheme · material · accent · density · font

Uploading 4 photos

About 30 seconds left

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Progress, ProgressCircle } from "@vamos-ui/react";

<Progress label="Uploading" value={42} showValue />
<ProgressCircle aria-label="Profile complete" value={72} size="lg" />

Animates transform: scaleX, never width.

Segmented step progress is the Stepper component, not a Progress variant.

Examples

Sizes and states

2 / 4 / 8 px. The accent bar turns success when it completes; a failed task uses tone="danger".

xs · 2px

sm · 4px (default)

md · 8px

Complete (accent turns success)

Failed upload

Indeterminate

value={null} slides a bar and drops aria-valuenow. With reduced motion it shows a static hatched half fill.

Preparing your export

Large exports can take a few minutes.

Quota

tone="auto": over 80% warning, at or over the limit danger. display="fraction" reads "52,400 of 50,000".

Team seats

Media storage (GB)

Emails this month

Upload list (CMS)

xs bars in file rows; each one is named for its file.

hero-winter-menu.jpg2.4 MB
lamb-tandir-close-up.jpg68%
sahlep-bar.png21%
allergen-list.pdfQueued

Circular

sm sits inline next to text; md and lg can show the value or your own content in the centre.

Profile 72% complete

Add a photo and your tax office.

Syncing…

API

Progress

Prop	Type	Default
`value` Current value. null → indeterminate. Values above max are allowed (quota overrun).	`number \| null`	`—`
`max` Upper bound.	`number`	`100`
`tone` auto: > 80% warning, ≥ 100% danger. accent turns success when complete.	`"accent" \| "success" \| "warning" \| "danger" \| "auto"`	`"accent"`
`size` Bar height 2 / 4 / 8 px.	`"xs" \| "sm" \| "md"`	`"sm"`
`label` Visible label, linked with aria-labelledby. Without it pass aria-label.	`ReactNode`	`—`
`showValue` Value at the end of the label row, or your own.	`boolean \| (value, max) => ReactNode`	`false`
`display` How the value reads, visibly and in aria-valuetext: "42%" or "1,240 of 5,000".	`"percent" \| "fraction"`	`"percent"`
`valueText` Override the announced value text.	`string`	`—`
`hint` Small text under the bar, linked with aria-describedby.	`ReactNode`	`—`
`labels` Dictionary namespace "progress".	`{ of?: string; loading?: string }`	`—`

ProgressCircle

Prop	Type	Default
`value / max / tone / display / valueText` Same model.	`as Progress`	`—`
`size` 18 / 40 / 64 px.	`"sm" \| "md" \| "lg"`	`"md"`
`showValue` Value in the centre (md, lg).	`boolean`	`true for lg`
`children` Centre content instead of the value (an icon).	`ReactNode`	`—`
`aria-label` Required accessible name.	`string`	`—`

Pricing table

QR code