Progress

Interactive

See Progress in Storybook for every variant, with live controls.

A determinate progress bar. When you don't know how far along you are, use Spinner.

import { Progress } from "@kairosis/eidos";

<Progress value={62} showValue />
<Progress value={100} tone="success" />

Props

Prop	Type	Default	Description
value	number	0
max	number	100
tone	"primary" | "secondary" | "success" | "danger"	"primary"
showValue	boolean	false	Mono percentage readout at the right edge
height	number	6	Track height, px
label	string	"Progress"	Accessible name

Guidelines

• Set label to say what is progressing ("Upload progress"). A progressbar with no accessible name is an axe violation, so it defaults to "Progress" rather than being left unnamed — but the default tells a screen-reader user nothing.
• The percentage is clamped to 0–100, so an out-of-range value can't overflow the track.
• Carries role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax.
• Use tone to reflect outcome once complete — success at 100%, danger on failure.
• The readout uses tabular figures, so it doesn't jitter as it counts up.