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 = {
),
};
+
+export const DisabledWithTooltips: Story = {
+ render: () => (
+
+
+ Why this is disabled
+
+ ),
+};
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 = (
{iconStart}
{children}
{iconEnd}
);
+
+ return isDisabled ? (
+
+
+ {btn}
+
+
+ ) : (
+ btn
+ );
},
);