ProgressBar

Implemented

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

Categorymolecules

Sourcepatterns/molecules/progressbar.html

AI HintDeterminate progress bar (value/max). The label row shows '{percent}%' beside the label; omitting label hides the row and falls back to English aria-label 'Progress'. For upload rows with cancel/retry use ProgressUpload. Do not assert WCAG 1.4.11 compliance for the gradient fill — non-text contrast is a tracked defect.

Horizontal progress indicator — 6px track, teal→blue gradient fill. ARIA progressbar with valuenow/min/max. Values are clamped to [0, max].

ProgressBar

Molecule — Status & feedback

Default 0–100 scale. Passing label renders the label row with the computed percent; omitting it hides the row and falls back to aria-label="Progress".

Upload42%

This component supports light and dark mode.

ProgressBar — custom scale

Molecule — Status & feedback

max rescales the bar: value={150} max={200} renders a 75% fill. Expose the same scale in aria-valuemax.

Storage (150 / 200 Go)75%

Usage

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

// Default 0-100 scale with a visible label
<ProgressBar value={42} label="Upload" />

// Custom scale — 150 of 200 renders 75%
<ProgressBar value={150} max={200} label="Storage" />

// No label — track still exposes aria-label="Progress" + the value triple
<ProgressBar value={80} />

Accessibility

Track carries role="progressbar" with aria-valuenow, aria-valuemin="0", aria-valuemax (= max) and an accessible name (the label text, or the English fallback "Progress" when no label is passed — localize by always passing label).
Text tokens meet WCAG AA for the label and percent rows. The gradient fill vs the track does not meet WCAG 1.4.11 (3:1 non-text) at one gradient end per theme — tracked defect, fix constrained by the color-token freeze (ADR pending). Do not cite this component as 1.4.11-compliant.
No aria-live: value changes are not announced. For announced upload progress, see ProgressUpload (which adds aria-live="polite").

Prop

Type

Default

Description

value*

number

—

Current value. Clamped to [0, max]; non-finite values clamp to 0.

label

string

—

Visible label (also the accessible name). Optional — omitting it falls back to aria-label="Progress" and hides the percent row.

max

number

100

Upper bound of the scale. Any positive number; the percent shown is value/max × 100.

className

string

—

Additional CSS classes on the root wrapper.

id

string

—

Stable root id (defaults to a useId-generated id). Also prefixes the track id.

Props

Preview

ProgressBar

Prop

Type

Required

Default

Description

value

number

Required

—

Current value; clamped into [0, max]

label

string

Optional

'Progress' (aria-label fallback)

Optional label row + visible percent. Omitting it falls back to an English aria-label 'Progress' — pass one on localized pages.

max

number

Optional

100

Maximum allowed value — aria-valuemax follows it.

Quick use:<ProgressBar />

Accessibility

ARIA roleprogressbar

Usage

Import

tsxSnippet

import { ProgressBar } from "@epasslive/design-system"

Example 1

tsxSnippet

<ProgressBar value={42} label="Upload" />

Example 2

tsxSnippet

<ProgressBar value={3} max={12} />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules