1 files changed, 31 insertions, 26 deletions
diff --git a/apps/web/components/ui/action-button.tsx b/apps/web/components/ui/action-button.tsx
index 5b862e07..e9cdc3c9 100644
--- a/apps/web/components/ui/action-button.tsx
+++ b/apps/web/components/ui/action-button.tsx
@@ -1,33 +1,38 @@
+import React from "react";
 import { useClientConfig } from "@/lib/clientConfig";
 
 import type { ButtonProps } from "./button";
 import { Button } from "./button";
 import LoadingSpinner from "./spinner";
 
-export function ActionButton({
-  children,
-  loading,
-  spinner,
-  disabled,
-  ignoreDemoMode = false,
-  ...props
-}: ButtonProps & {
-  loading: boolean;
-  spinner?: React.ReactNode;
-  ignoreDemoMode?: boolean;
-}) {
-  const clientConfig = useClientConfig();
-  spinner ||= <LoadingSpinner />;
-  if (!ignoreDemoMode && clientConfig.demoMode) {
-    disabled = true;
-  } else if (disabled !== undefined) {
-    disabled ||= loading;
-  } else if (loading) {
-    disabled = true;
+const ActionButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & {
+    loading: boolean;
+    spinner?: React.ReactNode;
+    ignoreDemoMode?: boolean;
   }
-  return (
-    <Button {...props} disabled={disabled}>
-      {loading ? spinner : children}
-    </Button>
-  );
-}
+>(
+  (
+    { children, loading, spinner, disabled, ignoreDemoMode = false, ...props },
+    ref,
+  ) => {
+    const clientConfig = useClientConfig();
+    spinner ||= <LoadingSpinner />;
+    if (!ignoreDemoMode && clientConfig.demoMode) {
+      disabled = true;
+    } else if (disabled !== undefined) {
+      disabled ||= loading;
+    } else if (loading) {
+      disabled = true;
+    }
+    return (
+      <Button ref={ref} {...props} disabled={disabled}>
+        {loading ? spinner : children}
+      </Button>
+    );
+  },
+);
+ActionButton.displayName = "ActionButton";
+
+export { ActionButton };