docs / patterns / progress-row

ProgressRow

a labelled progress bar with a value-over-max figure. the bar color keys the row to a category, and any verdict goes in the status slot.

intensity · structuresrsc · client

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

stack inside a Card body with divide-y for a module lista Badge in the status slot when a row needs a verdictnot a disclosure. no chevron, no aria-expanded, no wrapping buttonno traffic-light barColor. status has its own slot

a11y

role="progressbar" with aria-valuenow/min/max · a string label becomes the bar's aria-label, pass one yourself otherwisejest-axe
live demo · try it out
Computer Science
In progress
12 / 30 cr
customize
labelthe row's name
valuecurrent amount
12
maxtarget amount
30
unittrailing figure unit
barColorcategorical key color, not a verdict
statusa slot, usually a Badge
usagecopy
import { ProgressRow } from "@usva-ui/react/patterns/progress-row";
import { Badge } from "@usva-ui/react/primitives/badge";

<ProgressRow
  label="Computer Science"
  value={12}
  max={30}
  unit="cr"
  barColor="#8b5cf6"
  status={<Badge tone="warning">In progress</Badge>}
/>

props

proptypedefaultnotes
labelReactNode—the row's name. doubles as the bar's accessible name when a string.
valuenumber—current amount. clamped, overshoot fills the bar.
maxnumber—target amount. a max of 0 renders an empty bar, not a division by zero.
unitstring—trailing unit on the figures, e.g. "cr".
statusReactNode—a slot, usually a Badge. never derived from the ratio.
barColorstring—categorical key color, any CSS color. it says which row this is, not how it is doing.

get it

bun add @usva-ui/reactcopy
usagecopy
import { ProgressRow } from "@usva-ui/react/patterns/progress-row";
import { Badge } from "@usva-ui/react/primitives/badge";

<ProgressRow
  label="Computer Science"
  value={12}
  max={30}
  unit="cr"
  barColor="#8b5cf6"
  status={<Badge tone="warning">In progress</Badge>}
/>