Components

CircularProgress

Circular determinate progress indicator with center label.

CircularProgress shows determinate progress in a compact ring.

Example

Preview

25%

50%

75%

100%

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

<CircularProgress value={75} label="75%" />;

Prop	Type	Default	Description
value*	number	—	Current progress value, 0 to `max`.
label	string	—	Accessible label / centre caption.
max	number	100	Maximum value. Defaults to 100.
size	number	88	Diameter in pixels.
thickness	number	8	Ring stroke width in pixels.

Progress

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

Meter

Usage/quota bar for dashboards — a single fill or stacked segments with a legend.