Progress

A determinate progress bar that visualizes completion as a percentage.

Overview

Progress renders a horizontal bar that fills proportionally to the current value relative to max. It uses semantic color variants to communicate the nature of the operation and three sizes to match surrounding content density.

Always provide a value for determinate progress. For indeterminate loading, use Spinner instead.
Use semantic variants (success, danger) to reflect the outcome of the tracked operation.
Set max when the total is not 100 (e.g., steps in a multi-step form).

Accessibility

Renders with role="progressbar" and the correct aria-valuenow, aria-valuemin, and aria-valuemax attributes.
Add an aria-label or aria-labelledby to associate the bar with a visible label for screen readers.

Import

import { Progress } from "@cocso-ui/react";

Default

Progress bars at 25%, 50%, 75%, and 100% completion.

Variant

Six semantic color variants indicate the nature of the tracked operation.

Size

Three sizes control the height of the track: sm, md, and lg. The default is md.

API Reference

Progress

Prop	Type	Default	Description
`value*`	`number`	-	Current progress value. Clamped to the range [0, max].
`max`	`number`	`100`	Maximum value. Set this when tracking steps or items rather than a percentage.
`variant`	`"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info"`	`"primary"`	Controls the fill color to communicate the semantic meaning of the progress.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the height of the progress track.