diff --git a/.changeset/loading-button-disabled-styles.md b/.changeset/loading-button-disabled-styles.md
new file mode 100644
index 00000000000..ce49af2eeea
--- /dev/null
+++ b/.changeset/loading-button-disabled-styles.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Button: Apply disabled styles while loading so the button looks non-interactive but stays focusable
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
index c9a9674f9db..b8cf568d09d 100644
--- a/e2e/components/Button.test.ts
+++ b/e2e/components/Button.test.ts
@@ -59,6 +59,10 @@ const stories = [
     title: 'Loading',
     id: 'components-button-features--loading',
   },
+  {
+    title: 'Loading Primary',
+    id: 'components-button-features--loading-primary',
+  },
   {
     title: 'Loading With Leading Visual',
     id: 'components-button-features--loading-with-leading-visual',
diff --git a/packages/react/src/Button/Button.docs.json b/packages/react/src/Button/Button.docs.json
index 91707c4c7bd..79b09fd4788 100644
--- a/packages/react/src/Button/Button.docs.json
+++ b/packages/react/src/Button/Button.docs.json
@@ -58,6 +58,9 @@
     {
       "id": "components-button-features--loading"
     },
+    {
+      "id": "components-button-features--loading-primary"
+    },
     {
       "id": "components-button-features--loading-custom-announcement"
     },
diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx
index 161029a4a88..5f8c1454937 100644
--- a/packages/react/src/Button/Button.features.stories.tsx
+++ b/packages/react/src/Button/Button.features.stories.tsx
@@ -194,6 +194,12 @@ export const Large = () => <Button size="large">Default</Button>
 
 export const Loading = () => <Button loading>Default</Button>
 
+export const LoadingPrimary = () => (
+  <Button variant="primary" loading>
+    Submit
+  </Button>
+)
+
 export const LoadingCustomAnnouncement = () => (
   <Button loading loadingAnnouncement="This is a custom loading announcement">
     Default
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
index dc9705170cb..2417b07d2da 100644
--- a/packages/react/src/Button/ButtonBase.module.css
+++ b/packages/react/src/Button/ButtonBase.module.css
@@ -80,7 +80,7 @@
   }
 
   &:disabled,
-  &[aria-disabled='true']:not([data-loading='true']) {
+  &[aria-disabled='true'] {
     cursor: not-allowed;
     box-shadow: none;
 
@@ -321,7 +321,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']) {
+    &[aria-disabled='true'] {
       color: var(--control-fgColor-disabled);
       background-color: var(--button-default-bgColor-disabled);
       border-color: var(--button-default-borderColor-disabled);
@@ -377,7 +377,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']) {
+    &[aria-disabled='true'] {
       color: var(--button-primary-fgColor-disabled);
       background-color: var(--button-primary-bgColor-disabled);
       border-color: var(--button-primary-borderColor-disabled);
@@ -472,7 +472,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']) {
+    &[aria-disabled='true'] {
       color: var(--button-danger-fgColor-disabled);
       background-color: var(--button-danger-bgColor-disabled);
       border-color: var(--button-default-borderColor-disabled);
@@ -545,7 +545,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']) {
+    &[aria-disabled='true'] {
       color: var(--button-invisible-fgColor-disabled);
       background-color: var(--button-invisible-bgColor-disabled);
       border-color: var(--button-invisible-borderColor-disabled);
@@ -600,7 +600,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']) {
+    &[aria-disabled='true'] {
       color: var(--control-fgColor-disabled);
       background-color: transparent;
       border-color: transparent;
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 0233900bc05..37b1f51e44d 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -285,6 +285,116 @@ describe('Button', () => {
     expect(container.getByRole('button')).toHaveAttribute('aria-disabled', 'true')
   })
 
+  describe('accessible loading disabled styles', () => {
+    const visualStyles = (element: HTMLElement) => {
+      const {backgroundColor, borderColor, color, cursor} = getComputedStyle(element)
+      return {backgroundColor, borderColor, color, cursor}
+    }
+
+    it('applies disabled styles to a loading primary button without using native disabled', () => {
+      render(
+        <>
+          <Button variant="primary" loading>
+            Loading
+          </Button>
+          <Button variant="primary" disabled>
+            Disabled
+          </Button>
+          <Button variant="primary">Enabled</Button>
+        </>,
+      )
+
+      const loadingButton = screen.getByRole('button', {name: 'Loading'})
+      const disabledButton = screen.getByRole('button', {name: 'Disabled'})
+      const enabledButton = screen.getByRole('button', {name: 'Enabled'})
+
+      expect(loadingButton).toHaveAttribute('aria-disabled', 'true')
+      expect(loadingButton).toHaveAttribute('data-loading', 'true')
+      expect(loadingButton).not.toBeDisabled()
+      expect(visualStyles(loadingButton)).toEqual(visualStyles(disabledButton))
+      expect(visualStyles(loadingButton).backgroundColor).not.toBe(visualStyles(enabledButton).backgroundColor)
+      expect(visualStyles(loadingButton).cursor).toBe('not-allowed')
+    })
+
+    it('applies disabled styles when loading is combined with aria-disabled', () => {
+      render(
+        <>
+          <Button variant="primary" loading aria-disabled>
+            Loading
+          </Button>
+          <Button variant="primary" disabled>
+            Disabled
+          </Button>
+        </>,
+      )
+
+      const loadingButton = screen.getByRole('button', {name: 'Loading'})
+      const disabledButton = screen.getByRole('button', {name: 'Disabled'})
+
+      expect(loadingButton).toHaveAttribute('aria-disabled', 'true')
+      expect(loadingButton).not.toBeDisabled()
+      expect(visualStyles(loadingButton)).toEqual(visualStyles(disabledButton))
+    })
+
+    it('does not call onClick while loading', () => {
+      const onClick = vi.fn()
+      render(
+        <Button variant="primary" loading onClick={onClick}>
+          Submit
+        </Button>,
+      )
+
+      fireEvent.click(screen.getByRole('button', {name: 'Submit'}))
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('remains focusable while loading', () => {
+      render(
+        <Button variant="primary" loading>
+          Submit
+        </Button>,
+      )
+
+      const button = screen.getByRole('button', {name: 'Submit'})
+      button.focus()
+      expect(button).toHaveFocus()
+    })
+
+    it('still applies disabled styles for aria-disabled without loading', () => {
+      render(
+        <>
+          <Button variant="primary" aria-disabled>
+            Aria disabled
+          </Button>
+          <Button variant="primary" disabled>
+            Disabled
+          </Button>
+        </>,
+      )
+
+      expect(visualStyles(screen.getByRole('button', {name: 'Aria disabled'}))).toEqual(
+        visualStyles(screen.getByRole('button', {name: 'Disabled'})),
+      )
+    })
+
+    it('does not let inactive override primary the same way disabled styles do', () => {
+      render(
+        <>
+          <Button variant="primary" inactive>
+            Inactive
+          </Button>
+          <Button variant="primary" disabled>
+            Disabled
+          </Button>
+        </>,
+      )
+
+      expect(visualStyles(screen.getByRole('button', {name: 'Inactive'}))).not.toEqual(
+        visualStyles(screen.getByRole('button', {name: 'Disabled'})),
+      )
+    })
+  })
+
   it('should preserve the accessible button name when the button is in a loading state', () => {
     const container = render(<Button loading>content</Button>)
 
diff --git a/packages/react/src/Button/__tests__/screenshots-7879/after-disabled-row.png b/packages/react/src/Button/__tests__/screenshots-7879/after-disabled-row.png
new file mode 100644
index 00000000000..459e3b8a72a
Binary files /dev/null and b/packages/react/src/Button/__tests__/screenshots-7879/after-disabled-row.png differ
diff --git a/packages/react/src/Button/__tests__/screenshots-7879/after-enabled-primary.png b/packages/react/src/Button/__tests__/screenshots-7879/after-enabled-primary.png
new file mode 100644
index 00000000000..3b872b44357
Binary files /dev/null and b/packages/react/src/Button/__tests__/screenshots-7879/after-enabled-primary.png differ
diff --git a/packages/react/src/Button/__tests__/screenshots-7879/after-loading-primary.png b/packages/react/src/Button/__tests__/screenshots-7879/after-loading-primary.png
new file mode 100644
index 00000000000..b31b19ca0a3
Binary files /dev/null and b/packages/react/src/Button/__tests__/screenshots-7879/after-loading-primary.png differ
diff --git a/packages/react/src/Button/__tests__/screenshots-7879/before-loading-primary.png b/packages/react/src/Button/__tests__/screenshots-7879/before-loading-primary.png
new file mode 100644
index 00000000000..6d3185d7d8b
Binary files /dev/null and b/packages/react/src/Button/__tests__/screenshots-7879/before-loading-primary.png differ