ProgressBar

1. Title: the text that displays above the bar to describe the data it represents.
2. Completion percentage: the percent value of how much progress has been made.
3. Value description: the text that describes the current state of the bar’s value.
4. Variant: the color of the progress bar.

import { ProgressBar } from "@hubspot/ui-extensions";

const Extension = () => {
  return <ProgressBar variant="warning" value={50} maxValue={200} showPercentage={true} />;
};

​

Props

​

Variants

• 'success': a green bar to indicate movement towards a positive goal or outcome.

• 'warning': a yellow bar to indicate movement towards a negative outcome or limitation.

• 'danger': a red bar to indicate movement towards an extremely negative outcome or when a limitation has been reached.

​

Usage examples

• Evaluating the sale of products against a quota or goal.
• Communicating the stage progress of a deal or ticket.
• Monitoring the number of support calls or tickets per customer.

​

Guidelines

• DO: use the showPercentage prop to give the user more information about the status of the progress.
• DON’T: use more than 3-4 progress bars in a single card.

​

Related components

• StepIndicator
• LoadingSpinner
• Statistics