Skip to content

Latest commit

 

History

History
74 lines (56 loc) · 2.69 KB

README.md

File metadata and controls

74 lines (56 loc) · 2.69 KB

Progress

A linear progress bar component for displaying determinate or indeterminate progress.

Usage

import { Progress } from '@components-kit/react';

// With label
<Progress label="Uploading files..." value={50} variantName="default" />

// Determinate progress (50%)
<Progress value={50} aria-label="Upload progress" />

// Indeterminate progress (loading)
<Progress label="Loading content..." variantName="default" />

// Custom range
<Progress label="Steps completed" min={0} max={200} value={75} variantName="default" />

// With variant
<Progress label="Upload complete" value={100} variantName="success" />

// With human-readable value text
<Progress
  label="Steps completed"
  value={3}
  min={0}
  max={10}
  aria-valuetext="Step 3 of 10"
/>

Props

Prop Type Default Description
label ReactNode - Label text displayed above the progress bar
value number | null - Current value. Null/undefined = indeterminate
min number 0 Minimum value
max number 100 Maximum value
variantName VariantFor<"progress"> - Variant name for styling

Also accepts all standard div HTML attributes.

Data Attributes

Attribute Applied On Values Description
data-ck="progress" Root "progress" Component identifier
data-has-label Root true Present when label is provided
data-variant Root string The variant name for styling
data-slot="label" Label "label" Label sub-element
data-ck="progress-track" Track "progress-track" The track (bar background) element
data-state Track "determinate", "indeterminate" Current progress mode
data-value Track number Current value (determinate only)
data-max Track number Maximum value
data-ck="progress-indicator" Indicator "progress-indicator" The fill indicator element

Accessibility

  • Uses role="progressbar" on the track element with full WAI-ARIA support
  • Sets aria-valuemin, aria-valuemax, and aria-valuenow (determinate only)
  • Omits aria-valuenow in indeterminate mode per WAI-ARIA spec
  • When label is provided, aria-labelledby is automatically set on the progressbar
  • Alternatively, provide aria-label or aria-labelledby for an accessible name

Best Practices

  • Provide a visible label or an accessible name via aria-label / aria-labelledby
  • Use aria-valuetext for human-readable descriptions (e.g., "Step 3 of 10")
  • Use indeterminate mode when the completion percentage is unknown
  • Ensure sufficient color contrast for the progress indicator