ProgressBar

molecules

Horizontal progress indicator — 6px height, 3px radius. Fill is teal→blue gradient. ARIA progressbar with valuenow/min/max.

ARIA Role: progressbar

Demo

Demo for ProgressBar (molecules)

Horizontal progress indicator — 6px height, 3px radius. Fill is teal→blue gradient. ARIA progressbar with valuenow/min/max.

Props

PropTypeRequiredDefaultDescription
valuenumberYes—0 to max
labelstringYes—Required — visual percent is not enough for SR

TypeScript Interface

interface ProgressBarProps {
  value: number;
  label?: string;
  max?: number;
}

Assertions (NASA Rule 5)

  • [type]value must be 0-100, label required(NASA Rule 5)
  • [aria]role='progressbar' with aria-valuenow, aria-valuemin='0', aria-valuemax='100', aria-label(WCAG 1.3.1)

Usage

Import

import { Progressbar } from '@epasslive/design-system'

Basic

<Progressbar />

With Variants

<Progressbar variant="primary" size="md" />