Last modified: August 22, 2025
The ProgressBar component renders a visual indicator showing a numeric and/or percentage-based representation of progress. The percentage is calculated based on the maximum possible value specified in the component.
design-guidelines-progress-bar
  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}
    />
  );
};
PropTypeDescription
titleStringThe text that displays above the progress bar.
showPercentageBooleanWhen set to true, the progress bar will display the completion percentage. Default is false.
valueNumberThe number representing the progress so far. Default is 0.
maxValueNumberThe maximum value of the progress bar. Default is 100.
valueDescriptionStringThe text that explains the current state of the value property. For example, "150 out of 250".
variant'success' (default) | 'warning' | 'danger'The color to indicate progress sentiment.
aria-labelStringThe accessibility label.

​
Variants

Using the variant prop, you can set the following progress bar colors:
  • 'success': a green bar to indicate movement towards a positive goal or outcome.
design-guidelines-progress-bars_1
  • 'warning': a yellow bar to indicate movement towards a negative outcome or limitation.
design-guidelines-progress-bars_2
  • 'danger': a red bar to indicate movement towards an extremely negative outcome or when a limitation has been reached.
design-guidelines-progress-bars_3

​
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.