diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
index ee7e412f044cf..56fec05e8223b 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -8,19 +8,7 @@ import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const contentId = 'content-id';
-const dismissButtonId = 'dismiss-button-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover(`#${contentId}`)
-  .snapshot('hover content', { cropTo: '.testWrapper' })
-  .mouseDown(`#${contentId}`)
-  .snapshot('pressed content', { cropTo: '.testWrapper' })
-  .hover(`#${dismissButtonId}`)
-  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
-  .mouseDown(`#${dismissButtonId}`)
-  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
-  .end();
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'InteractionTag Converged',
@@ -28,99 +16,15 @@ export default {
   decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof InteractionTag>;
 
-export const Default = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
+export const Default = () => <InteractionTag>Primary Text</InteractionTag>;
 
 export const DefaultRTL = getStoryVariant(Default, RTL);
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
 
-// slots
-export const Icon = () => (
-  <InteractionTag content={{ id: contentId }} icon={<CalendarMonth />}>
-    Primary Text
-  </InteractionTag>
-);
-export const IconRTL = getStoryVariant(Icon, RTL);
-
-export const Media = () => (
-  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </InteractionTag>
-);
-export const MediaRTL = getStoryVariant(Media, RTL);
-
-export const Dismissible = () => (
-  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
-    Primary Text
-  </InteractionTag>
-);
-export const DismissibleRTL = getStoryVariant(Dismissible, RTL);
-
-export const SecondaryText = () => (
-  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
-    Primary Text
-  </InteractionTag>
-);
-
-// shape
-export const Circular = () => (
-  <InteractionTag content={{ id: contentId }} shape="circular">
-    Primary Text
-  </InteractionTag>
-);
-export const CircularWithMedia = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    shape="circular"
-    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const CircularDismissible = () => (
-  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
-    Primary Text
-  </InteractionTag>
-);
-
-// appearance
-export const Outline = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="outline"
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
-export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
-
-export const Brand = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="brand"
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
-export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
-
 // disabled
 export const Disabled = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    disabled
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
+  <InteractionTag disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
@@ -128,14 +32,7 @@ export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
 export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
 
 export const OutlineDisabled = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="outline"
-    disabled
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
+  <InteractionTag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
@@ -143,14 +40,7 @@ export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH
 export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
 
 export const BrandDisabled = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="brand"
-    disabled
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
+  <InteractionTag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
@@ -158,52 +48,36 @@ export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CON
 export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
 
 // size
-export const SizeSmall = () => (
-  <InteractionTag content={{ id: contentId }} size="small">
-    Primary Text
-  </InteractionTag>
-);
+export const SizeSmall = () => <InteractionTag size="small">Primary Text</InteractionTag>;
 export const SizeSmallDismissible = () => (
-  <InteractionTag content={{ id: contentId }} size="small" dismissible dismissButton={{ id: dismissButtonId }}>
+  <InteractionTag size="small" dismissible>
     Primary Text
   </InteractionTag>
 );
 export const SizeSmallWithIcon = () => (
-  <InteractionTag content={{ id: contentId }} size="small" icon={<CalendarMonth />}>
+  <InteractionTag size="small" icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
 export const SizeSmallWithMedia = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    size="small"
-    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
-  >
+  <InteractionTag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </InteractionTag>
 );
 
-export const SizeExtraSmall = () => (
-  <InteractionTag content={{ id: contentId }} size="extra-small">
-    Primary Text
-  </InteractionTag>
-);
+export const SizeExtraSmall = () => <InteractionTag size="extra-small">Primary Text</InteractionTag>;
 export const SizeExtraSmallDismissible = () => (
-  <InteractionTag content={{ id: contentId }} size="extra-small" dismissible dismissButton={{ id: dismissButtonId }}>
+  <InteractionTag size="extra-small" dismissible>
     Primary Text
   </InteractionTag>
 );
 export const SizeExtraSmallWithIcon = () => (
-  <InteractionTag content={{ id: contentId }} size="extra-small" icon={<CalendarMonth />}>
+  <InteractionTag size="extra-small" icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
 export const SizeExtraSmallWithMedia = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    size="extra-small"
-    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
-  >
+  <InteractionTag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </InteractionTag>
 );
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
new file mode 100644
index 0000000000000..a3966eba20a4c
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${contentId}`)
+  .snapshot('hover content', { cropTo: '.testWrapper' })
+  .mouseDown(`#${contentId}`)
+  .snapshot('pressed content', { cropTo: '.testWrapper' })
+  .hover(`#${dismissButtonId}`)
+  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
+  .mouseDown(`#${dismissButtonId}`)
+  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Filled = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="filled"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="outline"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="brand"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
new file mode 100644
index 0000000000000..4c5a96145b4c2
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .focus(`#${contentId}`)
+  .snapshot('focus content', { cropTo: '.testWrapper' })
+  .focus(`#${dismissButtonId}`)
+  .snapshot('focus dismiss', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Rounded = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
+
+export const RoundedWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const RoundedWithMedia = () => (
+  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithMedia = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    shape="circular"
+    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
index 8be370c901dd5..6e08f6a630475 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -8,14 +8,7 @@ import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const tagId = 'tag-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover(`#${tagId}}`)
-  .snapshot('hover', { cropTo: '.testWrapper' })
-  .mouseDown(`#${tagId}}`)
-  .snapshot('pressed', { cropTo: '.testWrapper' })
-  .end();
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'Tag Converged',
@@ -23,77 +16,15 @@ export default {
   decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof Tag>;
 
-export const Default = () => <Tag id={tagId}>Primary Text</Tag>;
+export const Default = () => <Tag>Primary Text</Tag>;
 
 export const DefaultRTL = getStoryVariant(Default, RTL);
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
 
-// slots
-export const Icon = () => (
-  <Tag id={tagId} icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-export const IconRTL = getStoryVariant(Icon, RTL);
-
-export const Media = () => (
-  <Tag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </Tag>
-);
-export const MediaRTL = getStoryVariant(Media, RTL);
-
-export const Dismissible = () => (
-  <Tag id={tagId} dismissible>
-    Primary Text
-  </Tag>
-);
-export const DismissibleRTL = getStoryVariant(Dismissible, RTL);
-
-export const SecondaryText = () => (
-  <Tag id={tagId} secondaryText="Secondary Text">
-    Primary Text
-  </Tag>
-);
-
-// shape
-export const Circular = () => (
-  <Tag id={tagId} shape="circular">
-    Primary Text
-  </Tag>
-);
-export const CircularWithMedia = () => (
-  <Tag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </Tag>
-);
-export const CircularDismissible = () => (
-  <Tag id={tagId} shape="circular" dismissible>
-    Primary Text
-  </Tag>
-);
-
-// appearance
-export const Outline = () => (
-  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
-export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
-
-export const Brand = () => (
-  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
-export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
-
 // disabled
 export const Disabled = () => (
-  <Tag id={tagId} disabled dismissible icon={<CalendarMonth />}>
+  <Tag disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
@@ -101,7 +32,7 @@ export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
 export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
 
 export const OutlineDisabled = () => (
-  <Tag id={tagId} appearance="outline" disabled dismissible icon={<CalendarMonth />}>
+  <Tag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
@@ -109,7 +40,7 @@ export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH
 export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
 
 export const BrandDisabled = () => (
-  <Tag id={tagId} appearance="brand" disabled dismissible icon={<CalendarMonth />}>
+  <Tag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
@@ -117,44 +48,36 @@ export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CON
 export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
 
 // size
-export const SizeSmall = () => (
-  <Tag id={tagId} size="small">
-    Primary Text
-  </Tag>
-);
+export const SizeSmall = () => <Tag size="small">Primary Text</Tag>;
 export const SizeSmallDismissible = () => (
-  <Tag id={tagId} size="small" dismissible>
+  <Tag size="small" dismissible>
     Primary Text
   </Tag>
 );
 export const SizeSmallWithIcon = () => (
-  <Tag id={tagId} size="small" icon={<CalendarMonth />}>
+  <Tag size="small" icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
 export const SizeSmallWithMedia = () => (
-  <Tag id={tagId} size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <Tag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </Tag>
 );
 
-export const SizeExtraSmall = () => (
-  <Tag id={tagId} size="extra-small">
-    Primary Text
-  </Tag>
-);
+export const SizeExtraSmall = () => <Tag size="extra-small">Primary Text</Tag>;
 export const SizeExtraSmallDismissible = () => (
-  <Tag id={tagId} size="extra-small" dismissible>
+  <Tag size="extra-small" dismissible>
     Primary Text
   </Tag>
 );
 export const SizeExtraSmallWithIcon = () => (
-  <Tag id={tagId} size="extra-small" icon={<CalendarMonth />}>
+  <Tag size="extra-small" icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
 export const SizeExtraSmallWithMedia = () => (
-  <Tag id={tagId} size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <Tag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </Tag>
 );
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
new file mode 100644
index 0000000000000..66c2b110c1b63
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${tagId}}`)
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown(`#${tagId}}`)
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Filled = () => (
+  <Tag id={tagId} appearance="filled" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
new file mode 100644
index 0000000000000..28ba174f5fff4
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .focus(`#${tagId}}`)
+  .snapshot('focused', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Rounded = () => <Tag id={tagId}>Primary Text</Tag>;
+
+export const RoundedWithSecondaryText = () => (
+  <Tag id={tagId} secondaryText="Secondary Text">
+    Primary Text
+  </Tag>
+);
+
+export const RoundedWithMedia = () => (
+  <Tag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <Tag id={tagId} dismissible>
+    Primary Text
+  </Tag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => (
+  <Tag id={tagId} shape="circular">
+    Primary Text
+  </Tag>
+);
+
+export const CircularWithSecondaryText = () => (
+  <Tag id={tagId} secondaryText="Secondary Text">
+    Primary Text
+  </Tag>
+);
+
+export const CircularWithMedia = () => (
+  <Tag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <Tag id={tagId} shape="circular" dismissible>
+    Primary Text
+  </Tag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);