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

Install


yarn add @camp/progress-bar

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} />;

Accessibility

Aria-label

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