diff --git a/.changeset/silver-cheetahs-compare.md b/.changeset/silver-cheetahs-compare.md
new file mode 100644
index 00000000000..cb207d8e358
--- /dev/null
+++ b/.changeset/silver-cheetahs-compare.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix for `IconButton` to respect the `style` prop width when the feature flag is on.
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
index ee184dec98b..19464c3c4e4 100644
--- a/packages/react/src/Button/ButtonBase.module.css
+++ b/packages/react/src/Button/ButtonBase.module.css
@@ -68,7 +68,7 @@
/* IconButton */
- &:where(.IconButton) {
+ &.IconButton {
display: inline-grid;
width: var(--control-medium-size);
min-width: unset;
@@ -78,12 +78,10 @@
&:where([data-size='small']) {
width: var(--control-small-size);
- min-width: var(--control-small-size);
}
&:where([data-size='large']) {
width: var(--control-large-size);
- min-width: var(--control-large-size);
}
}
diff --git a/packages/react/src/Button/IconButton.dev.stories.tsx b/packages/react/src/Button/IconButton.dev.stories.tsx
index dd0bffffbe5..bc772a04f28 100644
--- a/packages/react/src/Button/IconButton.dev.stories.tsx
+++ b/packages/react/src/Button/IconButton.dev.stories.tsx
@@ -1,6 +1,7 @@
-import {ChevronDownIcon} from '@primer/octicons-react'
+import {BoldIcon, ChevronDownIcon} from '@primer/octicons-react'
import React from 'react'
import {IconButton} from '.'
+import Box from '../Box'
export default {
title: 'Components/IconButton/DevOnly',
@@ -25,3 +26,15 @@ export const CustomSizeWithMedia = () => {
export const CustomIconColor = () => (
)
+
+export const CustomSizeWithStyleProp = () => (
+
+
+
+)