ProgressBar

How far something has got toward a whole: money saved, steps done.

import { Body, Caption, Cluster, ProgressBar, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Cluster justify="between">
    <Body>Kitchen funded</Body>
    <Caption>R 45 000 of R 75 000</Caption>
  </Cluster>
  <ProgressBar value={45000} max={75000} label="Kitchen funded" />
</Stack>

import { ProgressBar } from "@hackcove/ui";

<ProgressBar value={60} label="Kitchen funded" />

import { ProgressBar } from "@hackcove/ui";

<ProgressBar value={3} max={12} label="Months saved" />

import { ProgressBar } from "@hackcove/ui";

<ProgressBar value={0.25} label="Months saved" />

• value is on the scale of max, which is 100 unless you pass one: three of twelve is value={3} max={12}. A fraction such as 0.25 is read as a quarter of one percent. A value past max is held at full.
• label is required and names what the bar measures.
• Say the figures in words beside the bar; the bar draws none.
• tone is accent, positive, warn or negative; size is sm (default), md or lg.
• A share between two parties is a SplitBar; the parts of one whole are a StackedBar.

• A ProgressBar has role="progressbar", aria-label set to label, and aria-valuemin, aria-valuemax and aria-valuenow on a 0 to 100 scale.
• The announced percent is whole, and is never 0 or 100 unless the value truly is.
• The bar draws no text, so the words beside it carry the figures for everyone.