diff --git a/.changeset/calm-moons-serve.md b/.changeset/calm-moons-serve.md
new file mode 100644
index 00000000000..7d67233221b
--- /dev/null
+++ b/.changeset/calm-moons-serve.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Button: Fixes the style override issue when size is explicitly specified as medium
diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
index 0bb4d6d99b7..f995b8f4869 100644
--- a/src/Button/Button.dev.stories.tsx
+++ b/src/Button/Button.dev.stories.tsx
@@ -38,6 +38,14 @@ export const TestSxProp = () => {
   const count = 4
   return (
     <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button
+        size="medium"
+        sx={{
+          color: 'deeppink',
+        }}
+      >
+        Medium Pink
+      </Button>
       <Button
         size="small"
         sx={{
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index a2cc813061f..f4f02ce123b 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -67,7 +67,7 @@ export function generateCustomSxProp(
   providedSx: BetterSystemStyleObject,
 ) {
   // Possible data attributes: data-size, data-block, data-no-visuals
-  const size = props.size ? `[data-size="${props.size}"]` : ''
+  const size = props.size && props.size !== 'medium' ? `[data-size="${props.size}"]` : '' // medium is a default size therefore it doesn't have a data attribute that used for styling
   const block = props.block ? `[data-block="block"]` : ''
   const noVisuals = props.leadingIcon || props.trailingIcon || props.trailingAction ? '' : '[data-no-visuals="true"]'