ProgressBar | UI components (BETA)

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} /> ); };
Prop Type Description
title String The text that displays above the progress bar.
showPercentage Boolean When set to true, the progress bar will display the completion percentage. Default is false.
value Number The number representing the progress so far. Default is 0.
maxValue Number

The maximum value of the progress bar. Default is 100.
valueDescription String The 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-label String The accessibility label.

Variants

Using the variant prop, you can set the following progress bar colors:

  • success: a green colored bar to indicate movement towards a positive goal or outcome.
    design-guidelines-progress-bars_1
  • warning: a yellow colored bar to indicate movement towards a negative outcome or limitation.
    design-guidelines-progress-bars_2
  • danger: a red colored 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.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.