diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index 9830b54208..5931c746ae 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -3,7 +3,7 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/
-@mixin amsterdam-button {
+.amsterdam-button {
border: none;
cursor: var(--amsterdam-action-activate-cursor);
display: inline-flex;
@@ -21,14 +21,14 @@
line-height: var(--amsterdam-breadcrumb-compact-line-height);
}
+ &:hover {
+ cursor: var(--amsterdam-action-activate-cursor);
+ }
+
&:disabled,
&[aria-disabled="true"] {
cursor: var(--amsterdam-action-disabled-cursor);
}
-
- &:hover:not(:disabled, [aria-disabled="true"]) {
- cursor: var(--amsterdam-action-activate-cursor);
- }
}
@mixin amsterdam-button-forced-color-mode {
@@ -37,24 +37,26 @@
}
}
-.amsterdam-button--busy {
+.amsterdam-button--busy:hover {
cursor: var(--amsterdam-action-busy-cursor);
}
.amsterdam-button--primary {
background-color: var(--amsterdam-button-primary-background-color);
+ box-shadow: var(--amsterdam-button-primary-box-shadow);
color: var(--amsterdam-button-primary-color);
&:disabled,
[aria-disabled="true"] {
background-color: var(--amsterdam-button-primary-disabled-background-color);
+ box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
}
&:hover:not(:disabled, [aria-disabled="true"]) {
background-color: var(--amsterdam-button-primary-hover-background-color);
+ box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
}
- @include amsterdam-button;
@include amsterdam-button-forced-color-mode;
}
@@ -75,7 +77,6 @@
color: var(--amsterdam-button-secondary-hover-color);
}
- @include amsterdam-button;
@include amsterdam-button-forced-color-mode;
}
@@ -93,6 +94,4 @@
box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
color: var(--amsterdam-button-tertiary-hover-color);
}
-
- @include amsterdam-button;
}
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
index e5340e5be8..c4959d4f7b 100644
--- a/proprietary/tokens/src/components/amsterdam/button.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -18,12 +18,15 @@
},
"primary": {
"background-color": { "value": "{amsterdam.color.primary-blue}" },
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
"color": { "value": "{amsterdam.color.primary-white}" },
"disabled": {
- "background-color": { "value": "{amsterdam.color.neutral-grey2}" }
+ "background-color": { "value": "{amsterdam.color.neutral-grey2}" },
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" }
},
"hover": {
- "background-color": { "value": "{amsterdam.color.dark-blue}" }
+ "background-color": { "value": "{amsterdam.color.dark-blue}" },
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" }
}
},
"secondary": {
diff --git a/storybook/storybook-react/src/Button/Button.docs.mdx b/storybook/storybook-react/src/Button/Button.docs.mdx
index cc97b5bd16..864047c347 100644
--- a/storybook/storybook-react/src/Button/Button.docs.mdx
+++ b/storybook/storybook-react/src/Button/Button.docs.mdx
@@ -60,3 +60,17 @@ Use tertiary buttons for unimportant calls to action – as many as necessary.
### Tertiary
+
+## Busy
+
+### Primary
+
+
+
+### Secondary
+
+
+
+### Tertiary
+
+
diff --git a/storybook/storybook-react/src/Button/Button.stories.tsx b/storybook/storybook-react/src/Button/Button.stories.tsx
index cc23ab9c0d..f703f76492 100644
--- a/storybook/storybook-react/src/Button/Button.stories.tsx
+++ b/storybook/storybook-react/src/Button/Button.stories.tsx
@@ -108,3 +108,26 @@ export const TertiaryDisabled: Story = {
variant: 'tertiary',
},
}
+
+export const PrimaryBusy: Story = {
+ args: {
+ children: 'Primary',
+ busy: true,
+ },
+}
+
+export const SecondaryBusy: Story = {
+ args: {
+ children: 'Secondary',
+ busy: true,
+ variant: 'secondary',
+ },
+}
+
+export const TertiaryBusy: Story = {
+ args: {
+ children: 'Tertiary',
+ busy: true,
+ variant: 'tertiary',
+ },
+}