# Bug in the ProgressBar component

**URL:** <https://community.hubspot.com/t/bug-in-the-progressbar-component/161891>\
**Category:** UI Extensions\
**Created:** [October 14, 2026, 8:46am UTC](https://community.hubspot.com/t/bug-in-the-progressbar-component/161891 "2026-10-14T08:46:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![inventable-rears8](https://avatars.discourse-cdn.com/v4/letter/i/bcef8e/32.png) [@inventable-rears8](https://community.hubspot.com/u/inventable-rears8)\
**Post date:** [October 14, 2026, 8:46am UTC](https://community.hubspot.com/t/bug-in-the-progressbar-component/161891/1 "2026-10-14T08:46:51Z")

</div>

## Error description

The progress bar component provides faulty visualizations of progress.

The warning variant of a progress bar is red instead of orange. According to the documentation it should be orange. This behaviour can be seen in the “Warning progress bar” of the error reproduction.

The danger variant of a progress bar always shows a fully red bar regardless of `value` and `maxValue`. In the error reproduction below I expect the “Danger progress bar” to have a small orange part to the left and a bigger red part to the right.

## Error reproduction

Code for reproducing the errors:

```auto
<ProgressBar value={5} maxValue={100} variant={"warning"} title="Warning progress bar" />
<ProgressBar value={5} maxValue={100} variant={"danger"} title="Danger progress bar" />

```

What gets displayed in hubspot when the code is ran:

 ![image](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/7/478521c72799aa19969de2407b064f5ae8a62a31.png)

Some context to reproduce the bug: I used `@hubspot/ui-extensions` version `0.17.1` and the visual Progressbar errors occur in local development and when the UI extension is deployed to a hubspot portal

## Expected behaviour

I expected the progress bars from the error reproduction to look similar to those:

 ![image](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/9/29c4ea020844ce36bdc8eb181ae82b920886940f.png)  
This image is taken from the documentation page for the ProgressBar component: [ProgressBar - HubSpot docs](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/progress-bar)

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [October 14, 2026, 11:14am UTC](https://community.hubspot.com/t/bug-in-the-progressbar-component/161891/3 "2026-10-14T11:14:46Z")

</div>

Hi @inventable-rears8, welcome to the HubSpot Community!

Thanks for flagging this with us and for sharing your code, screenshots and the troubleshooting you did!

Your implementation looks correct based on HubSpot’s [ProgressBar documentation](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/standard-components/progress-bar).

According to the docs, **`variant="warning"`** should display an orange/yellow bar, while **`variant="danger"`** should display a red bar, with the filled portion reflecting the `value` and `maxValue` settings.

Since you’re seeing different behavior in both local development and your deployed app and I see that you have a paid subscription, I’d recommend reaching out to our Support Team to investigate this.

When submitting your report, it would be helpful to include:

- **Expected vs. actual behavior:** The color differences and incorrect progress fill, along with your screenshots.

- **Environment:** `@hubspot/ui-extensions` v0.17.1 and your HubSpot Account ID.

- **Steps to reproduce:** Your original `<ProgressBar>` code and confirmation that the issue occurs in both environments.

- Link to this Community topic

Thanks again and feel free to share any updates here, as they could be helpful to others experiencing the same behavior. 😊

Bérangère