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/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx
index 161029a4a88..5df10db14ee 100644
--- a/packages/react/src/Button/Button.features.stories.tsx
+++ b/packages/react/src/Button/Button.features.stories.tsx
@@ -192,7 +192,20 @@ export const Medium = () => <Button size="medium">Default</Button>
 
 export const Large = () => <Button size="large">Default</Button>
 
-export const Loading = () => <Button loading>Default</Button>
+export const Loading = () => (
+  <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+    <Button loading>Default</Button>
+    <Button variant="primary" loading>
+      Primary
+    </Button>
+    <Button variant="danger" loading>
+      Danger
+    </Button>
+    <Button variant="invisible" loading>
+      Invisible
+    </Button>
+  </div>
+)
 
 export const LoadingCustomAnnouncement = () => (
   <Button loading loadingAnnouncement="This is a custom loading announcement">
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
index dc9705170cb..a36859ab94b 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);
@@ -590,7 +590,7 @@
     border: unset;
     border-radius: 0;
 
-    &:hover:not(:disabled, [data-inactive]) {
+    &:hover:not(:disabled, [data-inactive], [aria-disabled='true']) {
       text-decoration: underline;
     }
 
@@ -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>)