diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index 56674277eb..baf5276da5 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -96,7 +96,7 @@
}
}
-.ams-button--hide-label {
- padding-block: var(--ams-button-hide-label-padding-block);
- padding-inline: var(--ams-button-hide-label-padding-inline);
+.ams-button--icon-only {
+ padding-block: var(--ams-button-icon-only-padding-block);
+ padding-inline: var(--ams-button-icon-only-padding-inline);
}
diff --git a/packages/react/src/Button/Button.test.tsx b/packages/react/src/Button/Button.test.tsx
index 49ed20a9db..50413e5e34 100644
--- a/packages/react/src/Button/Button.test.tsx
+++ b/packages/react/src/Button/Button.test.tsx
@@ -146,7 +146,7 @@ describe('Button', () => {
it('renders a button with an icon only', () => {
render(
-
)
},
diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index 53e5f2ee58..fc23bdf712 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -57,7 +57,7 @@
"color": { "value": "{ams.color.neutral-grey2}" }
}
},
- "hide-label": {
+ "icon-only": {
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.sm}" }
}
diff --git a/storybook/src/components/Button/Button.stories.tsx b/storybook/src/components/Button/Button.stories.tsx
index b546a47129..b0eff5a908 100644
--- a/storybook/src/components/Button/Button.stories.tsx
+++ b/storybook/src/components/Button/Button.stories.tsx
@@ -13,21 +13,13 @@ const meta = {
args: {
children: 'Versturen',
disabled: false,
- hideLabel: false,
+ iconOnly: false,
variant: 'primary',
},
argTypes: {
disabled: {
description: 'Prevents interaction. Avoid if possible.',
},
- hideLabel: {
- control: {
- type: 'boolean',
- },
- if: {
- arg: 'icon',
- },
- },
icon: {
control: {
type: 'select',
@@ -44,6 +36,14 @@ const meta = {
arg: 'icon',
},
},
+ iconOnly: {
+ control: {
+ type: 'boolean',
+ },
+ if: {
+ arg: 'icon',
+ },
+ },
},
} satisfies Meta
@@ -85,8 +85,8 @@ export const WithiconBefore: Story = {
export const WithIconOnly: Story = {
args: {
children: 'Sluiten',
- hideLabel: true,
icon: Icons.CloseIcon,
+ iconOnly: true,
variant: 'tertiary',
},
}