diff --git a/.changeset/orange-pumas-develop.md b/.changeset/orange-pumas-develop.md
new file mode 100644
index 00000000000..c199573854a
--- /dev/null
+++ b/.changeset/orange-pumas-develop.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix invalid hover outline variant of the Button component
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index a9ba2b3d64a..965058f8895 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -50,6 +50,14 @@ export const invisibleButton = (args: ButtonProps) => {
   )
 }
 
+export const outlineButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="outline">
+      Outline
+    </Button>
+  )
+}
+
 export const iconBeforeButton = (args: ButtonProps) => {
   return (
     <Button leadingIcon={SearchIcon} {...args}>
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index c586faa0d58..2068f2a44bd 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -132,7 +132,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:hover:not([disabled])': {
         color: 'btn.outline.hoverText',
         backgroundColor: 'btn.outline.hoverBg',
-        borderColor: 'outline.hoverBorder',
+        borderColor: 'btn.outline.hoverBorder',
         boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.hoverCounterBg',
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 058707059d0..eb53d92bdc5 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -550,7 +550,7 @@ exports[`Button styles outline button appropriately 1`] = `
 .c0:hover:not([disabled]) {
   color: btn.outline.hoverText;
   background-color: btn.outline.hoverBg;
-  border-color: outline.hoverBorder;
+  border-color: btn.outline.hoverBorder;
   box-shadow: undefined;
 }