diff --git a/playwright/visual.test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png
new file mode 100644
index 00000000..8efb7dfc
Binary files /dev/null and b/playwright/visual.test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png differ
diff --git a/src/components/Button/IconButton/IconButton.module.css b/src/components/Button/IconButton/IconButton.module.css
index b5ae6d66..4fd54411 100644
--- a/src/components/Button/IconButton/IconButton.module.css
+++ b/src/components/Button/IconButton/IconButton.module.css
@@ -35,6 +35,11 @@ limitations under the License.
line-height: 0px;
}
+.subtle-bg {
+ color: var(--cpd-color-icon-secondary);
+ background: var(--cpd-color-bg-subtle-secondary);
+}
+
.icon-button[aria-disabled="true"] {
color: var(--cpd-color-icon-disabled);
cursor: not-allowed;
diff --git a/src/components/Button/IconButton/IconButton.stories.tsx b/src/components/Button/IconButton/IconButton.stories.tsx
index 038822c1..0957bae2 100644
--- a/src/components/Button/IconButton/IconButton.stories.tsx
+++ b/src/components/Button/IconButton/IconButton.stories.tsx
@@ -83,6 +83,11 @@ export const WithCriticalIndicator = {
indicator: "critical",
},
};
+export const WithSubtleBackground = {
+ args: {
+ subtleBackground: true,
+ },
+};
export const WithLabel = {
args: {
diff --git a/src/components/Button/IconButton/IconButton.test.tsx b/src/components/Button/IconButton/IconButton.test.tsx
index 8a716878..92c9f973 100644
--- a/src/components/Button/IconButton/IconButton.test.tsx
+++ b/src/components/Button/IconButton/IconButton.test.tsx
@@ -28,6 +28,7 @@ const {
WithSuccessIndicator,
WithCriticalIndicator,
WithIndicatorDisabled,
+ WithSubtleBackground,
} = composeStories(stories);
describe("IconButton", () => {
@@ -55,4 +56,8 @@ describe("IconButton", () => {
const { container } = render(