stage2-2

frontend/src/components/ui/button/ButtonWithTooltip.tsx

@@ -0,0 +1,41 @@
+/**
+ * Button component with tooltip support for disabled state
+ * Wraps Button component to show tooltip when disabled
+ */
+import { ReactNode } from 'react';
+import Button, { ButtonProps } from './Button';
+import { Tooltip } from '../tooltip/Tooltip';
+
+interface ButtonWithTooltipProps extends ButtonProps {
+  tooltip?: string;
+  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export default function ButtonWithTooltip({
+  tooltip,
+  tooltipPlacement = 'top',
+  disabled,
+  children,
+  ...buttonProps
+}: ButtonWithTooltipProps) {
+  // If button is disabled and has a tooltip, wrap it
+  if (disabled && tooltip) {
+    return (
+      <Tooltip text={tooltip} placement={tooltipPlacement}>
+        <span className="inline-block">
+          <Button {...buttonProps} disabled={disabled}>
+            {children}
+          </Button>
+        </span>
+      </Tooltip>
+    );
+  }
+
+  // Otherwise, render button normally
+  return (
+    <Button {...buttonProps} disabled={disabled}>
+      {children}
+    </Button>
+  );
+}
+