Skip to content

[Feature]: ProgressBar - Support custom bar colors beyond the limited color prop #35974

@spenoff

Description

@spenoff

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

The v9 ProgressBar component's color prop only supports four predefined intent values (brand, success, warning, error). There is no way to customize the bar or track color to use other Fluent design tokens without resorting to CSS variable overrides targeting Fluent's internal class structure, which could break with future Fluent v9 updates.

Use case: In account.microsoft.com (AMC), we migrated from v8's ProgressIndicator which exposed progressBar and progressTrack style slots for color customization. Our internal component library now wraps the v9 ProgressBar and adds barColor and trackColor props that map v8 theme palette names (e.g., themePrimary, neutralLight, redDark) to v9 design tokens (e.g., tokens.colorBrandBackground, tokens.colorNeutralBackground1Pressed), injected via CSS custom properties. This workaround could break with future Fluent v9 updates.

Consumers use these token-based colors for scenarios like:

  • Storage quota bars using theme-aligned colors (themePrimary → colorBrandBackground)
  • Warning/danger states using semantic colors (redDark → colorStatusDangerBackground3, severeWarning → colorStatusWarningBackground1)
  • Neutral/subtle progress indicators (neutralLight → colorNeutralBackground1Pressed)

Proposed solution: Extend the color prop to accept Fluent v9 design token references (or add separate barColor/trackColor props) so consumers can use any token from the theme without CSS hacks. For example:
<ProgressBar color={tokens.colorBrandBackground} /> // or <ProgressBar barColor="colorBrandBackground" trackColor="colorNeutralBackground1Pressed" />

Additional context

v8 ProgressIndicator supported arbitrary colors via styles({ progressBar: { backgroundColor: '...' } })
AMC's internal wrapper currently uses CSS variables as a workaround
The accepted color set includes v8 palette colors and custom semantic colors, all mapped to v9 tokens
Discussed with Fluent team in Office Hours (Oct 2025)

Have you discussed this feature with our team

@Tudor-Popa

Validations

  • Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Medium

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions