diff --git a/apps/vr-tests-react-components/src/stories/Badge.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge.stories.tsx
deleted file mode 100644
index ead15d05920ad..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Badge.stories.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import { Badge, BadgeProps } from '@fluentui/react-badge';
-import { CircleRegular } from '@fluentui/react-icons';
-import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-
-type ValueArrays<T> = {
-  [K in keyof T]: T[K][];
-};
-
-const propValues: ValueArrays<Pick<Required<BadgeProps>, 'size' | 'color' | 'appearance' | 'shape'>> = {
-  size: ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'],
-  color: ['brand', 'danger', 'severe', 'warning', 'success', 'important', 'informative', 'subtle'],
-  appearance: ['filled', 'outline', 'tint', 'ghost'],
-  shape: ['circular', 'rounded', 'square'],
-};
-
-const useStyles = makeStyles({
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  badgeContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    ...shorthands.gap('5px'),
-    ...shorthands.padding('5px'),
-  },
-
-  label: {
-    marginLeft: '10px',
-  },
-
-  brandContainer: {
-    backgroundColor: tokens.colorBrandBackgroundStatic,
-  },
-
-  groupSet: {
-    display: 'inline-flex',
-    flexDirection: 'column',
-    ...shorthands.padding(0, tokens.spacingHorizontalL),
-    rowGap: tokens.spacingVerticalL,
-  },
-
-  group: {
-    display: 'inline-flex',
-    flexDirection: 'column',
-    alignItems: 'start',
-    rowGap: tokens.spacingVerticalS,
-  },
-
-  groupLabel: {
-    ...typographyStyles.subtitle2Stronger,
-  },
-
-  row: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    columnGap: tokens.spacingHorizontalS,
-  },
-});
-
-const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appearance'] }> = ({ appearance }) => {
-  const styles = useStyles();
-
-  const badges = new Map<BadgeProps['color'], JSX.Element[]>();
-  badges.set('brand', []);
-  badges.set('danger', []);
-  badges.set('severe', []);
-  badges.set('warning', []);
-  badges.set('success', []);
-  badges.set('important', []);
-  badges.set('informative', []);
-  badges.set('subtle', []);
-
-  propValues.color.forEach(color => {
-    const circularWithText = (
-      <Badge color={color} appearance={appearance}>
-        1
-      </Badge>
-    );
-    const circularWithIcon = <Badge color={color} appearance={appearance} icon={<CircleRegular />} />;
-    const roundedWithIcon = <Badge color={color} appearance={appearance} shape="rounded" icon={<CircleRegular />} />;
-    const roundedWithText = (
-      <Badge color={color} appearance={appearance} shape="rounded">
-        {appearance.toUpperCase()}
-      </Badge>
-    );
-    const roundedWithTextAndIconBefore = (
-      <Badge color={color} appearance={appearance} shape="rounded" icon={<CircleRegular />} iconPosition="before">
-        {appearance.toUpperCase()}
-      </Badge>
-    );
-    const roundedWithTextAndIconAfter = (
-      <Badge color={color} appearance={appearance} shape="rounded" icon={<CircleRegular />} iconPosition="after">
-        {appearance.toUpperCase()}
-      </Badge>
-    );
-
-    badges
-      .get(color)!
-      .push(
-        circularWithText,
-        circularWithIcon,
-        roundedWithIcon,
-        roundedWithText,
-        roundedWithTextAndIconAfter,
-        roundedWithTextAndIconBefore,
-      );
-  });
-
-  return (
-    <div>
-      {Array.from(badges.keys()).map((color: BadgeProps['color'], i) => (
-        <div key={i} className={styles.container}>
-          <div
-            className={mergeClasses(
-              styles.badgeContainer,
-              color === 'subtle' && appearance === 'outline' && styles.brandContainer,
-              color === 'subtle' && appearance === 'ghost' && styles.brandContainer,
-            )}
-          >
-            {badges.get(color)}
-          </div>
-          <div className={styles.label}>{color}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const BadgeSampleRow: React.FC<BadgeProps> = props => {
-  const styles = useStyles();
-
-  // Text content is not supported for tiny and extra-small
-  if (props.size === 'tiny' || props.size === 'extra-small') {
-    return (
-      <div className={styles.row}>
-        <Badge {...props} icon={props.size === 'tiny' ? null : <CircleRegular />} />
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.row}>
-      <Badge {...props}>1</Badge>
-      <Badge {...props} icon={<CircleRegular />} />
-      <Badge {...props}>BADGE</Badge>
-      <Badge {...props} icon={<CircleRegular />}>
-        BADGE
-      </Badge>
-      <Badge {...props} icon={<CircleRegular />} iconPosition="after">
-        BADGE
-      </Badge>
-      {props.children}
-    </div>
-  );
-};
-
-const badgeStories = storiesOf('Badge Converged', module);
-
-// appearance stories
-propValues.appearance.forEach(appearance => {
-  badgeStories.addStory(appearance, () => <BadgeAppearanceTemplate appearance={appearance} />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
-});
-
-// size stories
-propValues.size.forEach(size =>
-  badgeStories.addStory(
-    `size: ${size}`,
-    () => {
-      const styles = useStyles();
-      return (
-        <div className={styles.groupSet}>
-          {propValues.appearance.map(appearance =>
-            // tiny + ghost is not supported
-            size === 'tiny' && appearance === 'ghost' ? null : (
-              <div key={appearance} className={styles.group}>
-                <span className={styles.groupLabel}>appearance: {appearance}</span>
-                {propValues.shape.map(shape => (
-                  <BadgeSampleRow key={shape} shape={shape} appearance={appearance} size={size} />
-                ))}
-              </div>
-            ),
-          )}
-        </div>
-      );
-    },
-    { includeRtl: true },
-  ),
-);
diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx
new file mode 100644
index 0000000000000..e782b07cce547
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Badge, BadgeProps } from '@fluentui/react-badge';
+import { CircleRegular } from '@fluentui/react-icons';
+import { mergeClasses } from '@griffel/react';
+import { propValues, useStyles } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+
+const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appearance'] }> = ({ appearance }) => {
+  const styles = useStyles();
+
+  const badges = new Map<BadgeProps['color'], JSX.Element[]>();
+  badges.set('brand', []);
+  badges.set('danger', []);
+  badges.set('severe', []);
+  badges.set('warning', []);
+  badges.set('success', []);
+  badges.set('important', []);
+  badges.set('informative', []);
+  badges.set('subtle', []);
+
+  propValues.color.forEach(color => {
+    const circularWithText = (
+      <Badge color={color} appearance={appearance}>
+        1
+      </Badge>
+    );
+    const circularWithIcon = <Badge color={color} appearance={appearance} icon={<CircleRegular />} />;
+    const roundedWithIcon = <Badge color={color} appearance={appearance} shape="rounded" icon={<CircleRegular />} />;
+    const roundedWithText = (
+      <Badge color={color} appearance={appearance} shape="rounded">
+        {appearance.toUpperCase()}
+      </Badge>
+    );
+    const roundedWithTextAndIconBefore = (
+      <Badge color={color} appearance={appearance} shape="rounded" icon={<CircleRegular />} iconPosition="before">
+        {appearance.toUpperCase()}
+      </Badge>
+    );
+    const roundedWithTextAndIconAfter = (
+      <Badge color={color} appearance={appearance} shape="rounded" icon={<CircleRegular />} iconPosition="after">
+        {appearance.toUpperCase()}
+      </Badge>
+    );
+
+    badges
+      .get(color)!
+      .push(
+        circularWithText,
+        circularWithIcon,
+        roundedWithIcon,
+        roundedWithText,
+        roundedWithTextAndIconAfter,
+        roundedWithTextAndIconBefore,
+      );
+  });
+
+  return (
+    <div>
+      {Array.from(badges.keys()).map((color: BadgeProps['color'], i) => (
+        <div key={i} className={styles.container}>
+          <div
+            className={mergeClasses(
+              styles.badgeContainer,
+              color === 'subtle' && appearance === 'outline' && styles.brandContainer,
+              color === 'subtle' && appearance === 'ghost' && styles.brandContainer,
+            )}
+          >
+            {badges.get(color)}
+          </div>
+          <div className={styles.label}>{color}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default {
+  title: 'Badge Converged',
+} as ComponentMeta<typeof Badge>;
+
+export const Filled = () => <BadgeAppearanceTemplate appearance={'filled'} />;
+
+Filled.storyName = 'filled';
+
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+
+export const Outline = () => <BadgeAppearanceTemplate appearance={'outline'} />;
+
+Outline.storyName = 'outline';
+
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+
+export const Tint = () => <BadgeAppearanceTemplate appearance={'tint'} />;
+
+Tint.storyName = 'tint';
+
+export const TintDarkMode = getStoryVariant(Tint, DARK_MODE);
+export const TintHighContrast = getStoryVariant(Tint, HIGH_CONTRAST);
+
+export const Ghost = () => <BadgeAppearanceTemplate appearance={'ghost'} />;
+
+Ghost.storyName = 'ghost';
+
+export const GhostDarkMode = getStoryVariant(Ghost, DARK_MODE);
+export const GhostHighContrast = getStoryVariant(Ghost, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx
new file mode 100644
index 0000000000000..5813d5e96acf9
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx
@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { Badge, BadgeProps } from '@fluentui/react-badge';
+import { CircleRegular } from '@fluentui/react-icons';
+import { propValues, useStyles } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, RTL } from '../../utilities';
+
+const BadgeSampleRow: React.FC<BadgeProps> = props => {
+  const styles = useStyles();
+
+  // Text content is not supported for tiny and extra-small
+  if (props.size === 'tiny' || props.size === 'extra-small') {
+    return (
+      <div className={styles.row}>
+        <Badge {...props} icon={props.size === 'tiny' ? null : <CircleRegular />} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.row}>
+      <Badge {...props}>1</Badge>
+      <Badge {...props} icon={<CircleRegular />} />
+      <Badge {...props}>BADGE</Badge>
+      <Badge {...props} icon={<CircleRegular />}>
+        BADGE
+      </Badge>
+      <Badge {...props} icon={<CircleRegular />} iconPosition="after">
+        BADGE
+      </Badge>
+      {props.children}
+    </div>
+  );
+};
+
+export default {
+  title: 'Badge Converged',
+} as ComponentMeta<typeof Badge>;
+
+export const SizeTiny = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.groupSet}>
+      {propValues.appearance.map(appearance =>
+        // tiny + ghost is not supported
+        appearance === 'ghost' ? null : (
+          <div key={appearance} className={styles.group}>
+            <span className={styles.groupLabel}>appearance: {appearance}</span>
+            {propValues.shape.map(shape => (
+              <BadgeSampleRow key={shape} shape={shape} appearance={appearance} size={'tiny'} />
+            ))}
+          </div>
+        ),
+      )}
+    </div>
+  );
+};
+
+SizeTiny.storyName = 'size: tiny';
+
+export const SizeTinyRTL = getStoryVariant(SizeTiny, RTL);
+
+export const SizeExtraSmall = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.groupSet}>
+      {propValues.appearance.map(appearance => (
+        <div key={appearance} className={styles.group}>
+          <span className={styles.groupLabel}>appearance: {appearance}</span>
+          {propValues.shape.map(shape => (
+            <BadgeSampleRow key={shape} shape={shape} appearance={appearance} size={'extra-small'} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+SizeExtraSmall.storyName = 'size: extra-small';
+
+export const SizeExtraSmallRTL = getStoryVariant(SizeExtraSmall, RTL);
+
+export const SizeSmall = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.groupSet}>
+      {propValues.appearance.map(appearance => (
+        <div key={appearance} className={styles.group}>
+          <span className={styles.groupLabel}>appearance: {appearance}</span>
+          {propValues.shape.map(shape => (
+            <BadgeSampleRow key={shape} shape={shape} appearance={appearance} size={'small'} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+SizeSmall.storyName = 'size: small';
+
+export const SizeSmallRTL = getStoryVariant(SizeSmall, RTL);
+
+export const SizeMedium = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.groupSet}>
+      {propValues.appearance.map(appearance => (
+        <div key={appearance} className={styles.group}>
+          <span className={styles.groupLabel}>appearance: {appearance}</span>
+          {propValues.shape.map(shape => (
+            <BadgeSampleRow key={shape} shape={shape} appearance={appearance} size={'medium'} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+SizeMedium.storyName = 'size: medium';
+
+export const SizeMediumRTL = getStoryVariant(SizeMedium, RTL);
+
+export const SizeLarge = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.groupSet}>
+      {propValues.appearance.map(appearance => (
+        <div key={appearance} className={styles.group}>
+          <span className={styles.groupLabel}>appearance: {appearance}</span>
+          {propValues.shape.map(shape => (
+            <BadgeSampleRow key={shape} shape={shape} appearance={appearance} size={'large'} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+SizeLarge.storyName = 'size: large';
+
+export const SizeLargeRTL = getStoryVariant(SizeLarge, RTL);
+
+export const SizeExtraLarge = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.groupSet}>
+      {propValues.appearance.map(appearance => (
+        <div key={appearance} className={styles.group}>
+          <span className={styles.groupLabel}>appearance: {appearance}</span>
+          {propValues.shape.map(shape => (
+            <BadgeSampleRow key={shape} shape={shape} appearance={appearance} size={'extra-large'} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+SizeExtraLarge.storyName = 'size: extra-large';
+
+export const SizeExtraLargeRTL = getStoryVariant(SizeExtraLarge, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Badge/utils.ts b/apps/vr-tests-react-components/src/stories/Badge/utils.ts
new file mode 100644
index 0000000000000..a5423654ead19
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Badge/utils.ts
@@ -0,0 +1,60 @@
+import { BadgeProps } from '@fluentui/react-badge';
+import { makeStyles, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+
+type ValueArrays<T> = {
+  [K in keyof T]: T[K][];
+};
+
+export const propValues: ValueArrays<Pick<Required<BadgeProps>, 'size' | 'color' | 'appearance' | 'shape'>> = {
+  size: ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'],
+  color: ['brand', 'danger', 'severe', 'warning', 'success', 'important', 'informative', 'subtle'],
+  appearance: ['filled', 'outline', 'tint', 'ghost'],
+  shape: ['circular', 'rounded', 'square'],
+};
+
+export const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  badgeContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    ...shorthands.gap('5px'),
+    ...shorthands.padding('5px'),
+  },
+
+  label: {
+    marginLeft: '10px',
+  },
+
+  brandContainer: {
+    backgroundColor: tokens.colorBrandBackgroundStatic,
+  },
+
+  groupSet: {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    ...shorthands.padding(0, tokens.spacingHorizontalL),
+    rowGap: tokens.spacingVerticalL,
+  },
+
+  group: {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'start',
+    rowGap: tokens.spacingVerticalS,
+  },
+
+  groupLabel: {
+    ...typographyStyles.subtitle2Stronger,
+  },
+
+  row: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    columnGap: tokens.spacingHorizontalS,
+  },
+});
diff --git a/apps/vr-tests-react-components/src/stories/CounterBadge.stories.tsx b/apps/vr-tests-react-components/src/stories/CounterBadge.stories.tsx
deleted file mode 100644
index c9d1360f34a21..0000000000000
--- a/apps/vr-tests-react-components/src/stories/CounterBadge.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import { CounterBadge } from '@fluentui/react-badge';
-
-storiesOf('CounterBadge Converged - colors', module).addStory(
-  'default',
-  () => (
-    <div style={{ display: 'flex', gap: 10 }}>
-      {(['brand', 'danger', 'important', 'informative'] as const).map(color => (
-        <CounterBadge count={5} appearance="filled" color={color} key={color} />
-      ))}
-    </div>
-  ),
-  { includeRtl: true },
-);
diff --git a/apps/vr-tests-react-components/src/stories/CounterBadge/CounterBadge.stories.tsx b/apps/vr-tests-react-components/src/stories/CounterBadge/CounterBadge.stories.tsx
new file mode 100644
index 0000000000000..9af7b16afc253
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/CounterBadge/CounterBadge.stories.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { CounterBadge } from '@fluentui/react-badge';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, RTL } from '../../utilities';
+
+export default {
+  title: 'CounterBadge Converged - colors',
+} as ComponentMeta<typeof CounterBadge>;
+
+export const Default = () => (
+  <div style={{ display: 'flex', gap: 10 }}>
+    {(['brand', 'danger', 'important', 'informative'] as const).map(color => (
+      <CounterBadge count={5} appearance="filled" color={color} key={color} />
+    ))}
+  </div>
+);
+
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);