Feedback

Progress

A determinate or indeterminate progress bar.

Server safeSource

Import

import { Progress } from '@the_viveksingh/vivek-ui'

Sizes

label supplies the accessible name; without one the bar is announced unnamed.

<Progress value={30} size="sm" label="Small" />
<Progress value={55} size="md" label="Medium" />
<Progress value={80} size="lg" label="Large" />

Tones

<Progress value={72} label="Upload progress" />
<Progress value={92} tone="success" label="Tests passed" />
<Progress value={48} tone="warning" label="Storage used" />
<Progress value={18} tone="danger" label="Budget remaining" />

Indeterminate

Omit value when you cannot know the total. aria-valuenow is left off, which is what tells a screen reader the progress is unknown.

<Progress label="Deploying" />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Progress
Prop	Type	Default	Description
`value`	`number`	—	Current value. Omit for an indeterminate bar.
`max`	`number`	—	—
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`tone`	`'primary' \| 'success' \| 'warning' \| 'danger'`	—	—
`label`	`string`	—	Accessible name, e.g. "Upload progress".

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Progress carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.