fix: migrate button to base-ui

Author: scriptcoded

packages/ui-react/package.json

@@ -30,6 +30,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.0",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "2.1.7",
@@ -52,6 +53,7 @@
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "8.6.14",
     "@storybook/test": "8.6.14",
+    "@tailwindcss/cli": "^4.1.7",
     "@types/react": "^19.1.4",
     "@vitest/browser": "^3.1.3",
     "@vitest/coverage-v8": "^3.1.3",
@@ -61,7 +63,6 @@
     "storybook": "8.6.14",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3",
-    "@tailwindcss/cli": "^4.1.7"
+    "vitest": "^3.1.3"
   }
 }

packages/ui-react/src/components/button/button.stories.tsx

@@ -39,3 +39,12 @@ export const Small = {
     size: "small",
   },
 };
+
+export const Link = {
+  args: {
+    render: (
+      <a href="https://github.com" target="_blank" rel="noopener noreferrer" />
+    ),
+    children: "Go to GitHub",
+  },
+};

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

@@ -1,6 +1,5 @@
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { mergeProps, useRender } from "@base-ui-components/react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 
 const buttonVariants = cva(
@@ -140,33 +139,29 @@ const buttonVariants = cva(
   },
 );
 
-export type ButtonProps = Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  "color"
-> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
+export type ButtonProps = Omit<useRender.ComponentProps<"button">, "color"> &
+  VariantProps<typeof buttonVariants>;
+
+const Button = (props: ButtonProps) => {
+  const {
+    // biome-ignore lint/a11y/useButtonType: We set it further down
+    render = <button />,
+    className,
+    color,
+    variant,
+    size,
+    ...otherProps
+  } = props;
+
+  const defaultProps: useRender.ElementProps<"button"> = {
+    className: cn(buttonVariants({ color, variant, size, className })),
+    type: "button",
   };
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { className, color, variant, size, children, asChild = false, ...props },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ color, variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {/* <span> */}
-        {children}
-        {/* </span> */}
-      </Comp>
-    );
-  },
-);
-Button.displayName = "Button";
+  return useRender({
+    render,
+    props: mergeProps(defaultProps, otherProps),
+  });
+};
 
 export { Button };