diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png
index 678cdcf2d27..8da124c94e2 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png
index 79c93e143b8..da437eaea9b 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png
index 4250d1c091a..a6ce76707cd 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png
index 678cdcf2d27..8da124c94e2 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png
index 678cdcf2d27..8da124c94e2 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png
index 8eb9badcadc..df8513d7dc9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png
index 23381372f26..98b75993318 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png
index 8eb9badcadc..d78e1632609 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png
index 8eb9badcadc..df8513d7dc9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png differ
diff --git a/src/Button/IconButton.docs.json b/src/Button/IconButton.docs.json
index ad1529202a8..9b8306fb460 100644
--- a/src/Button/IconButton.docs.json
+++ b/src/Button/IconButton.docs.json
@@ -35,6 +35,12 @@
"defaultValue": "",
"description": "provide an octicon. It will be placed in the center of the button"
},
+ {
+ "name": "aria-label",
+ "type": "string",
+ "defaultValue": "",
+ "description": "Use an aria label to describe the functionality of the button. Please refer to [our guidance on alt text](https://primer.style/guides/accessibility/alternative-text-for-images) for tips on writing good alternative text."
+ },
{
"name": "sx",
"type": "SystemStyleObject"
diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
index 2f8b979aac3..0f27d91c397 100644
--- a/src/Button/IconButton.features.stories.tsx
+++ b/src/Button/IconButton.features.stories.tsx
@@ -6,16 +6,16 @@ export default {
title: 'Components/IconButton/Features',
}
-export const Primary = () =>
+export const Primary = () =>
-export const Danger = () =>
+export const Danger = () =>
-export const Invisible = () =>
+export const Invisible = () =>
-export const Disabled = () =>
+export const Disabled = () =>
-export const Small = () =>
+export const Small = () =>
-export const Medium = () =>
+export const Medium = () =>
-export const Large = () =>
+export const Large = () =>
diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx
index a60e2fc9340..9422c85a01b 100644
--- a/src/Button/IconButton.stories.tsx
+++ b/src/Button/IconButton.stories.tsx
@@ -41,8 +41,8 @@ Playground.args = {
disabled: false,
inactive: false,
variant: 'default',
- 'aria-label': 'Icon button description',
- icon: XIcon,
+ 'aria-label': 'Favorite',
+ icon: HeartIcon,
}
-export const Default = () =>
+export const Default = () =>