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
Priority
Medium
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:
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
Priority
Medium