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', + }, +}