[Bug]: Badge not picking up fui-Badge classname

Component

Badge

Package version

9.74.5

React version

^18

Environment

N/A – seeing this on Storybook and Stackblitz.

Current Behavior

Expected Behavior

Would expect the outline subtle and ghost subtle badges to not overflow their containers. It seems like the fui-Badge class is missing on those, and thus none of the badge styles are being applied

Reproduction

https://stackblitz.com/edit/p2ubjjvt?file=src%2Findex.tsx

Steps to reproduce

Go to stackblitz link or https://storybooks.fluentui.dev/react/?path=/docs/components-badge-badge--docs#color-and-appearance-1 and you should see the issue.

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Start with the Badge component implementation and reproduce the issue using the provided StackBlitz or Fluent UI Storybook links. Trace how the outline subtle and ghost subtle variants receive their class names. Done means those variants pick up the fui-Badge styles and no longer overflow their containers in the reported examples.