diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..b0f9afb26de
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..637c8780268
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c7daf6a8520
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-linux.png
new file mode 100644
index 00000000000..b0f9afb26de
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..b0f9afb26de
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-colorblind-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..d5cce491b4b
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..925de600c5e
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-linux.png
new file mode 100644
index 00000000000..f3ba027c8c9
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..d5cce491b4b
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..b0f9afb26de
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..637c8780268
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c7daf6a8520
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-linux.png
new file mode 100644
index 00000000000..b0f9afb26de
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..b0f9afb26de
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..d5cce491b4b
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..925de600c5e
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-linux.png
new file mode 100644
index 00000000000..f3ba027c8c9
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..d5cce491b4b
Binary files /dev/null and b/.playwright/snapshots/components/CircleBadge.test.ts-snapshots/CircleBadge-Playground-light-tritanopia-linux.png differ
diff --git a/docs/content/CircleBadge.mdx b/docs/content/CircleBadge.mdx
index c977414e23b..4457f346604 100644
--- a/docs/content/CircleBadge.mdx
+++ b/docs/content/CircleBadge.mdx
@@ -5,7 +5,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/CircleBadge.tsx
 ---
 
-import data from '../../src/CircleBadge.docs.json'
+import data from '../../src/CircleBadge/CircleBadge.docs.json'
 
 ```js
 import {CircleBadge} from '@primer/react'
diff --git a/e2e/components/CircleBadge.test.ts b/e2e/components/CircleBadge.test.ts
new file mode 100644
index 00000000000..d31b82da2c4
--- /dev/null
+++ b/e2e/components/CircleBadge.test.ts
@@ -0,0 +1,61 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('CircleBadge', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-circlebadge--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`CircleBadge.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-circlebadge--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-circlebadge--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`CircleBadge.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-circlebadge--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})
diff --git a/generated/components.json b/generated/components.json
index a05e339b0dd..6d3a67ca306 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -19,62 +19,6 @@
       ],
       "subcomponents": []
     },
-    "circle_badge": {
-      "id": "circle_badge",
-      "name": "CircleBadge",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "variant",
-          "type": "'small' | 'medium' | 'large'",
-          "defaultValue": "'medium'",
-          "description": "Creates a smaller or larger badge. Has no effect if the `size` prop is set"
-        },
-        {
-          "name": "size",
-          "type": "number",
-          "defaultValue": "",
-          "description": "Sets the size of the badge in pixels. Overrides the `variant` prop when set"
-        },
-        {
-          "name": "inline",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Styles the badge to `display: inline`"
-        },
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLDivElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "CircleBadge.Icon",
-          "props": [
-            {
-              "name": "as",
-              "type": "React.ElementType",
-              "defaultValue": "StyledOcticon"
-            }
-          ],
-          "passthrough": {
-            "element": "StyledOcticon",
-            "url": "/StyledOcticon"
-          }
-        }
-      ]
-    },
     "circle_octicon": {
       "id": "circle_octicon",
       "name": "CircleOcticon",
@@ -1741,6 +1685,67 @@
         }
       ]
     },
+    "circle_badge": {
+      "id": "circle_badge",
+      "name": "CircleBadge",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-circlebadge--default",
+          "code": "() => (\n  <CircleBadge>\n    <CircleBadge.Icon icon={ZapIcon} />\n  </CircleBadge>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "variant",
+          "type": "'small' | 'medium' | 'large'",
+          "defaultValue": "'medium'",
+          "description": "Creates a smaller or larger badge. Has no effect if the `size` prop is set"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "defaultValue": "",
+          "description": "Sets the size of the badge in pixels. Overrides the `variant` prop when set"
+        },
+        {
+          "name": "inline",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Styles the badge to `display: inline`"
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLDivElement>"
+        },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "\"div\""
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "CircleBadge.Icon",
+          "props": [
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "StyledOcticon"
+            }
+          ],
+          "passthrough": {
+            "element": "StyledOcticon",
+            "url": "/StyledOcticon"
+          }
+        }
+      ]
+    },
     "counter_label": {
       "id": "counter_label",
       "name": "CounterLabel",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index b861429f6d2..76ff402cb72 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -310,6 +310,21 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'CircleBadge',
+    {
+      stories: [
+        {
+          id: 'components-circlebadge--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-circlebadge--playground',
+          name: 'Playground',
+        },
+      ],
+    },
+  ],
   [
     'CounterLabel',
     {
diff --git a/src/CircleBadge.docs.json b/src/CircleBadge/CircleBadge.docs.json
similarity index 100%
rename from src/CircleBadge.docs.json
rename to src/CircleBadge/CircleBadge.docs.json
diff --git a/src/CircleBadge/CircleBadge.stories.tsx b/src/CircleBadge/CircleBadge.stories.tsx
new file mode 100644
index 00000000000..af51f193808
--- /dev/null
+++ b/src/CircleBadge/CircleBadge.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import {Meta, ComponentStory} from '@storybook/react'
+import CircleBadge from './CircleBadge'
+import {ZapIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/CircleBadge',
+  component: CircleBadge,
+} as Meta<typeof CircleBadge>
+
+export const Default = () => (
+  <CircleBadge>
+    <CircleBadge.Icon icon={ZapIcon} />
+  </CircleBadge>
+)
+
+export const Playground: ComponentStory<typeof CircleBadge> = args => (
+  <CircleBadge {...args}>
+    <CircleBadge.Icon icon={ZapIcon} />
+  </CircleBadge>
+)
+
+Playground.args = {
+  variant: 'medium',
+  size: null,
+  inline: false,
+  as: 'div',
+}
+
+Playground.argTypes = {
+  variant: {
+    control: {
+      type: 'radio',
+    },
+    options: ['small', 'medium', 'large'],
+  },
+  size: {
+    control: {
+      type: 'number',
+    },
+  },
+  inline: {
+    control: {
+      type: 'boolean',
+    },
+  },
+}
diff --git a/src/CircleBadge.tsx b/src/CircleBadge/CircleBadge.tsx
similarity index 84%
rename from src/CircleBadge.tsx
rename to src/CircleBadge/CircleBadge.tsx
index f2e6e27cc35..48ead2f6ef9 100644
--- a/src/CircleBadge.tsx
+++ b/src/CircleBadge/CircleBadge.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components'
-import {get} from './constants'
-import StyledOcticon from './StyledOcticon'
-import sx, {SxProp} from './sx'
-import isNumeric from './utils/isNumeric'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import StyledOcticon from '../StyledOcticon'
+import sx, {SxProp} from '../sx'
+import isNumeric from '../utils/isNumeric'
+import {ComponentProps} from '../utils/types'
 
 const variantSizes = {
   small: 56,
diff --git a/src/CircleBadge/index.ts b/src/CircleBadge/index.ts
new file mode 100644
index 00000000000..671c4e97089
--- /dev/null
+++ b/src/CircleBadge/index.ts
@@ -0,0 +1 @@
+export {default, CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge'