diff --git a/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx
new file mode 100644
index 00000000000000..5554a320a87c16
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import parse from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { BadgeDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator';
+
+BadgeDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Badge',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+
+ `);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Appearance = () =>
+ parse(`
+ filled
+ ghost
+ outline
+ tint
+`);
+
+export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+
+export const Color = () =>
+ parse(`
+ brand
+ danger
+ important
+ informative
+ severe
+ subtle
+ success
+ warning
+`);
+
+export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);
+
+export const Shape = () =>
+ parse(`
+
+
+
+`);
+
+export const ShapeDarkMode = getStoryVariant(Shape, DARK_MODE);
+
+export const Size = () =>
+ parse(`
+
+
+
+
+
+
+`);
+
+export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);