fix(mui-button): wrap disabled IconButton in span inside Tooltip

packages/button/src/lib/IconButton.test.tsx

@@ -3,6 +3,32 @@ import { HomeIcon } from '@availity/mui-icon';
 import { IconButton } from './IconButton';
 
 describe('Button', () => {
+  test('should not warn when disabled button is inside Tooltip', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    render(
+      <IconButton title="disabled action" disabled>
+        <HomeIcon />
+      </IconButton>
+    );
+
+    const muiTooltipWarning = consoleSpy.mock.calls.find((args) =>
+      args.some((arg) => typeof arg === 'string' && arg.includes('disabled'))
+    );
+    expect(muiTooltipWarning).toBeUndefined();
+
+    consoleSpy.mockRestore();
+  });
+
+  test('should render disabled button', () => {
+    const { getByRole } = render(
+      <IconButton title="disabled action" disabled>
+        <HomeIcon />
+      </IconButton>
+    );
+    expect(getByRole('button')).toBeDisabled();
+  });
+
   test('should render successfully', () => {
     const { getByRole } = render(
       <IconButton title="test">

packages/button/src/lib/IconButton.tsx

@@ -38,14 +38,15 @@ const outlinedStyles = {
 };
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const { title, variant = 'text', sx, size = 'medium', ...rest } = props;
+  const { title, variant = 'text', sx, size = 'medium', disabled, ...rest } = props;
   const styles = {
     ...sx,
     ...(variant === 'outlined' && outlinedStyles),
   };
-  return (
-    <Tooltip title={title}>
-      <MuiIconButton aria-label={title} sx={{ ...styles }} {...rest} ref={ref} size={size} />
-    </Tooltip>
+
+  const button = (
+    <MuiIconButton aria-label={title} sx={{ ...styles }} disabled={disabled} {...rest} ref={ref} size={size} />
   );
+
+  return <Tooltip title={title}>{disabled ? <span>{button}</span> : button}</Tooltip>;
 });