Progress Bar

A progress bar is a visual representation of progress toward a goal, metric, or quota. It communicates values like usage, success rates, or completion percentages in a quick and scannable way.

Overview

Resources

Changelog

Source code

Storybook

Figma

Install

yarn add @camp/progress-bar

Props

Prop	Type	Default	Description
`value`	`number`	—
`showValue`	`boolean`	`true`	Whether to show the value of the progress bar.
`appearance`	`"default" \| "success" \| "warning" \| "danger"`	`default`	The appearance of the progress bar.
`ariaLabel`	`string`	—	The aria-label for the progress bar - only needed if the progress bar is standalone.
`themed`	`boolean`	—	Whether the progress bar should include light/dark theme modes - requires theme provider.
`helperText`	`string`	—	Provide optional helper text for the progress bar.
`label`	`string`	—	The label for the progress bar.
`style` †	`CSSProperties`	—
`max`	`number`	—
`asChild`	`boolean`	—
`getValueLabel`	`(value: number, max: number) => string`	—

Generated from @camp/progress-bar@11.7.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Implementation

import React, { useState } from 'react';
import { ProgressBar } from '@camp/progress-bar';
 
function ProgressBarComponent() {
  const [progress] = useState(60);
 
  return <ProgressBar value={progress} />;
}

Variations

Default Appearance

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar value={50} ariaLabel="Default Progress Bar" />;

Success Appearance

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar value={50} appearance="success" ariaLabel="Success Progress Bar" />;

Warning Appearance

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar value={50} appearance="warning" ariaLabel="Warning Progress Bar" />;

Danger Appearance

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar value={50} appearance="danger" ariaLabel="Danger Progress Bar" />;

With Label

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar value={50} label="This is a label" />;

With Helper Text

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar value={50} label="This is a label" helperText="This is helper text" />;

Hide value

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar value={60} ariaLabel="Hidden Value Progress Bar" showValue={false} />;

Themed

import { ProgressBar } from '@camp/progress-bar';
 
<ProgressBar
  value={66}
  label="Progress Bar"
  helperText="This is the progress bar helper text"
  themed
/>;

Accessibility

Aria-label

If a label is not provided, the ariaLabel prop is required to describe the Toggle.