Progress

Always labelled, so the bar means something to a screen reader. Use a tone when the value itself is a warning, like a quota close to its limit.

import { Progress } from '@andrewbehma/glass-ui';

Playground

Progress.tsx

import { Progress } from '@andrewbehma/glass-ui';

<div className="w-full max-w-80">
  <Progress label="Uploading assets" hint="14 of 22 files" value={64} />
</div>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Neutral
Ok
Warn
Danger