Skip to content

feat(button): add disabled styles for danger variant #518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+35 −23
Open

feat(button): add disabled styles for danger variant #518

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
996f62a
feat(button): add disabled styles for danger variant
Sembauke Mar 18, 2025
6b39e39
feat(button): allow danger variant to be disabled and update styles
Sembauke Mar 19, 2025
934e89c
fix: use red05 for foreground-danger-disabled in dark theme
huyenltnguyen Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/button/button.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -160,11 +160,6 @@ describe("<Button />", () => {
// Type tests
// ------------------------------

// @ts-expect-error - Button with `danger` variant cannot be disabled
<Button variant="danger" disabled>
Button text
</Button>;

// @ts-expect-error - Button with `info` variant cannot be disabled
<Button variant="info" disabled>
Button text
45 changes: 28 additions & 17 deletions src/button/button.tsx
View file
Original file line number Diff line number Diff line change
@@ -44,17 +44,25 @@ const computeClassNames = ({
switch (variant) {
case "danger":
classNames.push(
"border-foreground-danger",
"bg-background-danger",
"text-foreground-danger",
"hover:bg-foreground-danger",
"hover:text-background-danger",
// This hover rule is redundant for the component library,
// but is needed to override the border color set in client's `global.css`.
// We can remove it once we have completely removed the CSS overrides in client.
"hover:border-foreground-danger",
"dark:hover:bg-background-danger",
"dark:hover:text-foreground-danger",
...(disabled
? [
"border-foreground-danger-disabled",
"bg-background-danger-disabled",
"text-foreground-danger-disabled",
Comment on lines +49 to +51
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ahmaxed I'm wondering what you think about this.

We currently only allow the primary button to have disabled state, and when disabled, the button has its opacity set to 80%. This styling approach works for the primary button because the button looks grayed out when disabled. Though it doesn't really work with danger style.

Opacity comparison
100% 80%
Light Screenshot 2025-03-19 at 13 50 29 Screenshot 2025-03-19 at 13 40 28
Dark Screenshot 2025-03-19 at 13 51 44 Screenshot 2025-03-19 at 13 51 51

I don't recommend decreasing the opacity level further, as the current level is already pretty low for a11y.

So I'm wondering if you're okay with this approach (changing the color combination) and if you have any suggestions for the color combination.

]
: [
"border-foreground-danger",
"bg-background-danger",
"text-foreground-danger",
"hover:bg-foreground-danger",
"hover:text-background-danger",
// This hover rule is redundant for the component library,
// but is needed to override the border color set in client's `global.css`.
// We can remove it once we have completely removed the CSS overrides in client.
"hover:border-foreground-danger",
"dark:hover:bg-background-danger",
"dark:hover:text-foreground-danger",
]),
);
break;
case "info":
@@ -78,12 +86,7 @@ const computeClassNames = ({
"bg-background-quaternary",
"text-foreground-secondary",
...(disabled
? [
"active:before:hidden",
"border-gray-450",
"aria-disabled:cursor-not-allowed",
"aria-disabled:opacity-80",
]
? ["border-gray-450"]
: [
"border-foreground-secondary",
"hover:bg-foreground-primary",
@@ -98,6 +101,14 @@ const computeClassNames = ({
);
}

if (disabled) {
classNames.push(
"active:before:hidden",
"aria-disabled:cursor-not-allowed",
"aria-disabled:opacity-80",
);
}

switch (size) {
case "large":
classNames.push("px-4 py-2.5 text-lg");
2 changes: 1 addition & 1 deletion src/button/types.ts
View file
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ interface InfoButtonProps extends BaseButtonProps {

interface DangerButtonProps extends BaseButtonProps {
variant: "danger";
disabled?: false;
disabled?: boolean;
}

export type ButtonProps =
4 changes: 4 additions & 0 deletions src/colors.css
View file
Original file line number Diff line number Diff line change
@@ -101,6 +101,7 @@
--foreground-tertiary: var(--gray80);
--foreground-quaternary: var(--gray75);
--foreground-danger: var(--red15);
--foreground-danger-disabled: var(--red70);
--foreground-success: var(--green40);
--foreground-info: var(--blue30);
--foreground-warning: var(--yellow45);
@@ -110,6 +111,7 @@
--background-tertiary: var(--gray10);
--background-quaternary: var(--gray15);
--background-danger: var(--red90);
--background-danger-disabled: var(--red05);
--background-success: var(--green90);
--background-info: var(--blue90);
--background-selection: var(--blue90-translucent);
@@ -123,6 +125,7 @@
--foreground-tertiary: var(--gray10);
--foreground-quaternary: var(--gray15);
--foreground-danger: var(--red90);
--foreground-danger-disabled: var(--red05);
--foreground-success: var(--green90);
--foreground-info: var(--blue90);
--foreground-warning: var(--yellow40);
@@ -132,6 +135,7 @@
--background-tertiary: var(--gray80);
--background-quaternary: var(--gray75);
--background-danger: var(--red15);
--background-danger-disabled: var(--red70);
--background-success: var(--green40);
--background-info: var(--blue30);
--background-selection: var(--blue30-translucent);
2 changes: 2 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ module.exports = {
"foreground-tertiary": "var(--foreground-tertiary)",
"foreground-quaternary": "var(--foreground-quaternary)",
"foreground-danger": "var(--foreground-danger)",
"foreground-danger-disabled": "var(--foreground-danger-disabled)",
"foreground-success": "var(--foreground-success)",
"foreground-info": "var(--foreground-info)",
// Background
@@ -30,6 +31,7 @@ module.exports = {
"background-tertiary": "var(--background-tertiary)",
"background-quaternary": "var(--background-quaternary)",
"background-danger": "var(--background-danger)",
"background-danger-disabled": "var(--background-danger-disabled)",
"background-success": "var(--background-success)",
"background-info": "var(--background-info)",
// Focus outline