diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..71edee0078f
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..c58cc3f248c
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..0066cbb0c43
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-linux.png
new file mode 100644
index 00000000000..71edee0078f
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..71edee0078f
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..7e2308c1f60
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..42f76c4e048
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-linux.png
new file mode 100644
index 00000000000..6476c4281c9
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..7e2308c1f60
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png
new file mode 100644
index 00000000000..64932a7e6f7
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png
new file mode 100644
index 00000000000..1b05ebd875e
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..95fa59bdd8b
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png
new file mode 100644
index 00000000000..64932a7e6f7
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..64932a7e6f7
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png
new file mode 100644
index 00000000000..9ee65793293
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png
new file mode 100644
index 00000000000..9a6174ae0df
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png
new file mode 100644
index 00000000000..b3e3f5d2d29
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png
new file mode 100644
index 00000000000..9ee65793293
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..71edee0078f
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..c58cc3f248c
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..0066cbb0c43
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-linux.png
new file mode 100644
index 00000000000..71edee0078f
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..71edee0078f
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..7e2308c1f60
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..42f76c4e048
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-linux.png
new file mode 100644
index 00000000000..6476c4281c9
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..7e2308c1f60
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-tritanopia-linux.png differ
diff --git a/docs/content/ButtonGroup.mdx b/docs/content/ButtonGroup.mdx
index 6c4bf64dc71..faff2d1fb59 100644
--- a/docs/content/ButtonGroup.mdx
+++ b/docs/content/ButtonGroup.mdx
@@ -6,7 +6,7 @@ source: https://github.com/primer/react/tree/main/src/ButtonGroup
 storybook: '/react/storybook?path=/story/components-buttongroup--default'
 ---
 
-import data from '../../src/ButtonGroup.docs.json'
+import data from '../../src/ButtonGroup/ButtonGroup.docs.json'
 
 ```js
 import {ButtonGroup} from '@primer/react'
diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts
new file mode 100644
index 00000000000..c3ca9822ff7
--- /dev/null
+++ b/e2e/components/ButtonGroup.test.ts
@@ -0,0 +1,89 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('ButtonGroup', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--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-buttongroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Icon Buttons', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})
diff --git a/generated/components.json b/generated/components.json
index a86c0cd0961..3c139a17c03 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -1,24 +1,6 @@
 {
   "schemaVersion": 2,
   "components": {
-    "button_group": {
-      "id": "button_group",
-      "name": "ButtonGroup",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        },
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLDivElement>"
-        }
-      ],
-      "subcomponents": []
-    },
     "dialog": {
       "id": "dialog",
       "name": "Dialog",
@@ -1350,6 +1332,29 @@
       ],
       "subcomponents": []
     },
+    "button_group": {
+      "id": "button_group",
+      "name": "ButtonGroup",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-buttongroup--default",
+          "code": "() => (\n  <ButtonGroup>\n    <Button>Button 1</Button>\n    <Button>Button 2</Button>\n    <Button>Button 3</Button>\n  </ButtonGroup>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLDivElement>"
+        }
+      ],
+      "subcomponents": []
+    },
     "checkbox": {
       "id": "checkbox",
       "name": "Checkbox",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 5f0252a213c..4c16f9408b0 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -245,6 +245,25 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'ButtonGroup',
+    {
+      stories: [
+        {
+          id: 'components-buttongroup--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-buttongroup--playground',
+          name: 'Playground',
+        },
+        {
+          id: 'components-buttongroup-features--icon-buttons',
+          name: 'Icon Buttons',
+        },
+      ],
+    },
+  ],
   [
     'Breadcrumbs',
     {
diff --git a/src/ButtonGroup.docs.json b/src/ButtonGroup/ButtonGroup.docs.json
similarity index 100%
rename from src/ButtonGroup.docs.json
rename to src/ButtonGroup/ButtonGroup.docs.json
diff --git a/src/ButtonGroup/ButtonGroup.features.stories.tsx b/src/ButtonGroup/ButtonGroup.features.stories.tsx
new file mode 100644
index 00000000000..43e57953da7
--- /dev/null
+++ b/src/ButtonGroup/ButtonGroup.features.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import {ComponentMeta} from '@storybook/react'
+import ButtonGroup from './ButtonGroup'
+import {IconButton} from '../Button'
+import {PlusIcon, DashIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/ButtonGroup/Features',
+  component: ButtonGroup,
+} as ComponentMeta<typeof ButtonGroup>
+
+export const IconButtons = () => (
+  <ButtonGroup>
+    <IconButton icon={PlusIcon} aria-label="Add" />
+    <IconButton icon={DashIcon} aria-label="Subtract" />
+  </ButtonGroup>
+)
diff --git a/src/stories/ButtonGroup.stories.tsx b/src/ButtonGroup/ButtonGroup.stories.tsx
similarity index 74%
rename from src/stories/ButtonGroup.stories.tsx
rename to src/ButtonGroup/ButtonGroup.stories.tsx
index 2107a948f7e..3c7c520adc6 100644
--- a/src/stories/ButtonGroup.stories.tsx
+++ b/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import {Story, Meta} from '@storybook/react'
-import ButtonGroup from '../ButtonGroup'
-import {Button, ButtonProps, IconButton} from '../Button'
-import {PlusIcon, DashIcon} from '@primer/octicons-react'
+import ButtonGroup from './ButtonGroup'
+import {Button, ButtonProps} from '../Button'
 
 export default {
   title: 'Components/ButtonGroup',
@@ -48,10 +47,3 @@ Playground.argTypes = {
     },
   },
 }
-
-export const IconButtons = () => (
-  <ButtonGroup>
-    <IconButton icon={PlusIcon} aria-label="Add" />
-    <IconButton icon={DashIcon} aria-label="Subtract" />
-  </ButtonGroup>
-)
diff --git a/src/ButtonGroup.tsx b/src/ButtonGroup/ButtonGroup.tsx
similarity index 88%
rename from src/ButtonGroup.tsx
rename to src/ButtonGroup/ButtonGroup.tsx
index 33a3d43c2e4..93762b8574a 100644
--- a/src/ButtonGroup.tsx
+++ b/src/ButtonGroup/ButtonGroup.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import {get} from './constants'
-import sx from './sx'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const ButtonGroup = styled.div`
   display: inline-flex;
diff --git a/src/ButtonGroup/index.ts b/src/ButtonGroup/index.ts
new file mode 100644
index 00000000000..33777d2c3bf
--- /dev/null
+++ b/src/ButtonGroup/index.ts
@@ -0,0 +1 @@
+export {default, ButtonGroupProps} from './ButtonGroup'