Skip to main content

​
Overview

Uploading…60%
Complete100%
Almost full85%
Failed40%
Progress displays a determinate (known value) or indeterminate (loading) progress bar. Semantic color variants communicate the meaning of the progress state.

​
Installation

npm install @araf-ds/core

​
Usage

import { Progress } from "@araf-ds/core"

export default function Example() {
  return <Progress value={60} showLabel />
}

​
Variants

​
Default

<Progress value={60} />

​
With Label

75% uploaded
<Progress value={75} showLabel label="75% uploaded" />

​
Semantic Variants

Complete
Almost full
Failed at 40%
<Progress value={100} variant="success" showLabel label="Complete" />
<Progress value={85} variant="warning" showLabel label="Almost full" />
<Progress value={40} variant="error" showLabel label="Failed at 40%" />

​
Sizes

Small (4px)
Medium (8px)
Large (12px)
<Progress value={60} size="sm" />
<Progress value={60} size="md" />
<Progress value={60} size="lg" />
SizeHeightUse case
Small4pxCompact UI, table cells
Medium8pxDefault — most contexts
Large12pxProminent upload/download indicators

​
API Reference

​
value
number
Progress value from 0 to max. Omit for indeterminate animation.
​
max
number
default:"100"
Maximum value (100 = full).
​
variant
string
default:"default"
Semantic fill color. Values: default · success · warning · error
​
size
string
default:"md"
Bar height. Values: sm · md · lg
​
showLabel
boolean
default:"false"
Displays a percentage label above the bar.
​
label
string
Custom label text. Overrides the auto-generated percentage.
​
className
string
Additional Tailwind classes for custom overrides.

​
Accessibility

  • Progress uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax
  • Indeterminate state (no value) uses aria-valuenow omitted per ARIA spec
  • Label text is referenced via aria-label or aria-labelledby
  • Color alone does not convey meaning — always pair variant colors with a label
  • Do not rely on animation alone for indeterminate state; add an aria-label like “Loading”

​
Do’s & Don’ts

Do

  • Use variant="success" when a task completes successfully
  • Use variant="warning" for high-usage alerts (storage, quota)
  • Always show a label when the progress value matters to the user
  • Use indeterminate mode when the duration is unknown

Don't

  • Don’t use color alone to indicate status — always pair with a label
  • Don’t use Progress for interactive input — use Slider instead
  • Don’t show multiple progress bars for the same task simultaneously
  • Don’t display a Progress bar for actions under 300ms — it creates visual noise