From a9b88beaaae397c4146bb11999ed98d10f0ccbba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Tue, 23 Sep 2025 12:08:01 +0200
Subject: [PATCH] fix(bui): Enable tooltips on disabled buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 .changeset/moody-singers-deny.md                 |  5 +++++
 .../ui/src/components/Button/Button.stories.tsx  | 10 ++++++++++
 packages/ui/src/components/Button/Button.tsx     | 16 ++++++++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/moody-singers-deny.md

diff --git a/.changeset/moody-singers-deny.md b/.changeset/moody-singers-deny.md
new file mode 100644
index 0000000000..28072baf4b
--- /dev/null
+++ b/.changeset/moody-singers-deny.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Enable tooltips on disabled buttons with automatic wrapper
diff --git a/packages/ui/src/components/Button/Button.stories.tsx b/packages/ui/src/components/Button/Button.stories.tsx
index db8e999f98..1604c04eb4 100644
--- a/packages/ui/src/components/Button/Button.stories.tsx
+++ b/packages/ui/src/components/Button/Button.stories.tsx
@@ -19,6 +19,7 @@ import { Button } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
+import { Tooltip, TooltipTrigger } from '../Tooltip';
 
 const meta = {
   title: 'Backstage UI/Button',
@@ -216,3 +217,12 @@ export const Playground: Story = {
     </Flex>
   ),
 };
+
+export const DisabledWithTooltips: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <Button isDisabled>Save</Button>
+      <Tooltip>Why this is disabled</Tooltip>
+    </TooltipTrigger>
+  ),
+};
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 40879e51ed..9f658fd00a 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -16,7 +16,7 @@
 
 import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
-import { Button as RAButton } from 'react-aria-components';
+import { Button as RAButton, Focusable } from 'react-aria-components';
 import type { ButtonProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 
@@ -30,6 +30,7 @@ export const Button = forwardRef(
       iconEnd,
       children,
       className,
+      isDisabled,
       ...rest
     } = props;
 
@@ -38,18 +39,29 @@ export const Button = forwardRef(
       variant,
     });
 
-    return (
+    const btn = (
       <RAButton
         className={clsx(classNames.root, className)}
         ref={ref}
         {...dataAttributes}
         {...rest}
+        isDisabled={!!isDisabled}
       >
         {iconStart}
         {children}
         {iconEnd}
       </RAButton>
     );
+
+    return isDisabled ? (
+      <Focusable>
+        <span role="button" tabIndex={0} style={{ display: 'inline-flex' }}>
+          {btn}
+        </span>
+      </Focusable>
+    ) : (
+      btn
+    );
   },
 );