Merge pull request #1174 from firebase/@invertase/v7-aschild-button-prop

feat(react): Add support for asChild on Button component

Author: dackers86

packages/firebaseui-react/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@nanostores/react": "^0.8.4",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-form": "^0.41.3",
     "clsx": "^2.1.1",
     "firebase": "^11.2.0",

packages/firebaseui-react/src/components/button.tsx

@@ -15,6 +15,7 @@
  */
 
 import { ButtonHTMLAttributes } from "react";
+import { Slot } from "@radix-ui/react-slot"
 import { cn } from "~/utils/cn";
 
 const buttonVariants = {
@@ -26,21 +27,21 @@ type ButtonVariant = keyof typeof buttonVariants;
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
+  asChild?: boolean;
 }
 
 export function Button({
-  children,
   className,
   variant = "primary",
+  asChild,
   ...props
 }: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+
   return (
-    <button
-      type="button"
+    <Comp
       className={cn(buttonVariants[variant], className)}
       {...props}
-    >
-      {children}
-    </button>
+    />
   );
 }

packages/firebaseui-react/tests/unit/components/button.test.tsx

@@ -62,4 +62,28 @@ describe("Button Component", () => {
 
     expect(button).toBeDisabled();
   });
+
+  it("renders as a Slot component when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>
+    );
+    const link = screen.getByRole("link", { name: /link button/i });
+    
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveClass("fui-button");
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("href", "/test");
+  });
+
+  it("renders as a button element when asChild is false or undefined", () => {
+    const { rerender } = render(<Button>Regular Button</Button>);
+    let button = screen.getByRole("button", { name: /regular button/i });
+    expect(button.tagName).toBe("BUTTON");
+
+    rerender(<Button asChild={false}>Regular Button</Button>);
+    button = screen.getByRole("button", { name: /regular button/i });
+    expect(button.tagName).toBe("BUTTON");
+  });
 });