Components

Progress

Determinate progress bar with tones, sizes, and value label.

Progress shows determinate completion from 0 to max.

Example

Preview

Uploading30%

import { Progress } from '@officina/ui';

<Progress value={30} label="Uploading" showValue />
<Progress value={80} variant="success" />

Prop	Type	Default	Description
value*	number	—	Current progress value, from 0 to `max`.
ariaLabel	string	—	Accessible name when no visible `label` is provided.
label	string	—	Visible label rendered above the track.
max	number	100	Maximum value. Defaults to 100.
showValue	boolean	—	Show the numeric percentage beside the label.
size	"xs" \| "sm" \| "md" \| "lg" \| null	—
variant	"accent" \| "success" \| "warning" \| "danger" \| null	—

Spinner

Indeterminate loading indicator across five sizes.

CircularProgress

Circular determinate progress indicator with center label.