From b8ae7ddad90b14d684848f200ab4dd92d6b2a4dd Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Tue, 16 Sep 2025 11:36:32 +0200
Subject: [PATCH] Disable hover and active styles when button is disabled in
 primary/default variant (#14524)

Follow up of https://github.com/twentyhq/twenty/pull/14439.

After diving in, it seems primary/default is the only variant that
wasn't protected against this edge case.

## Before


https://github.com/user-attachments/assets/e7b1e61e-8db3-4e0e-82b4-e54c390e744b

## After


https://github.com/user-attachments/assets/bb3b2466-e63d-4727-b520-04f4578d579a
---
 .../input/button/components/Button/Button.tsx | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
index 8f5a57301a..bbdd8ca466 100644
--- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
@@ -88,16 +88,20 @@ const StyledButton = styled('button', {
                   ? theme.font.color.secondary
                   : theme.font.color.extraLight
                 : theme.font.color.secondary};
-              &:hover {
-                background: ${!inverted
-                  ? theme.background.tertiary
-                  : theme.background.secondary};
-              }
-              &:active {
-                background: ${!inverted
-                  ? theme.background.quaternary
-                  : theme.background.tertiary};
-              }
+              ${disabled
+                ? ''
+                : css`
+                    &:hover {
+                      background: ${!inverted
+                        ? theme.background.tertiary
+                        : theme.background.secondary};
+                    }
+                    &:active {
+                      background: ${!inverted
+                        ? theme.background.quaternary
+                        : theme.background.tertiary};
+                    }
+                  `}
             `;
           case 'blue':
             return css`