WWAfM Design SystemVersion 0.1.5
View Dashboard

Basics

Progress

Accessible completion indicators built on shadcn and Base UI, using shared WAfM tokens.

Progress playground

Compare percentage progress and the activity table’s count presentation.

Preview size
Assessments completed
x
x
x
x
x

Properties

Unknown progress is distinct from zero completion. The activity count remains readable on both the filled and unfilled parts of the bar.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

Progress
import { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue } from '@wafm/ui/components/progress'

<Progress value={75} aria-label="Completion" />
<Progress value={3} max={4} getAriaValueText={() => '3 of 4 complete'}>
  <ProgressLabel>Assessments</ProgressLabel>
  <ProgressValue />
  <ProgressTrack><ProgressIndicator /></ProgressTrack>
</Progress>
value / min / max
Base UI Progress props: value is a number or null for indeterminate. Bounds default to 0–100. An omitted children prop supplies the default track and indicator.
children / aria-label / getAriaValueText
Explicit children replace the default composition. Provide ProgressLabel or aria-label; use getAriaValueText for count-based completion. Inherits Roboto and semantic tokens.
ProgressTrack / ProgressIndicator
<ProgressTrack className="h-8 rounded-sm">
  <ProgressIndicator />
</ProgressTrack>
Base UI Track / Indicator props
Track clips a proportional indicator controlled by the root. Default track is 8px high. Width transitions and indeterminate animation respect reduced motion.
ProgressLabel / ProgressValue
<ProgressLabel>Assessments</ProgressLabel>
<ProgressValue />
Base UI Label / Value props
Label automatically names the progress root; Value formats the percentage with Base UI. For a count such as 3/4 use the ActivityTableProgress presentation.