From 2a68389121b65c94ddc27a3595d8b0c1d5d926be Mon Sep 17 00:00:00 2001
From: jules <cloudtech@juleslive.net>
Date: Sat, 2 May 2026 19:57:53 +1000
Subject: [PATCH] button: support Radix-style asChild via base-ui render prop
 bridge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The project uses @base-ui/react, whose Button has no asChild prop —
just a `render` prop that takes a React element to merge into. About
14 call sites across the routes still use the Radix-shaped
`<Button asChild><Link to="…">…</Link></Button>` pattern, which until
now was producing nested-button DOM violations and asChild leaking as
a DOM attribute.

Bridges asChild → render inside the Button wrapper:

  <Button asChild><Link to="/login">Sign in</Link></Button>

…now renders as a single <a class="…btn classes…">Sign in</a> instead
of <button asChild><a>…</a></button>.

No call-site changes required; consumers keep the Radix ergonomic and
get correct DOM under the hood.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/components/ui/button.tsx | 49 +++++++++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 83786d6..0e8e493 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -1,3 +1,4 @@
+import * as React from "react"
 import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
@@ -40,19 +41,61 @@ const buttonVariants = cva(
   }
 )
 
+/**
+ * Button component.
+ *
+ * Supports the Radix-style `asChild` ergonomic for cases like
+ * `<Button asChild><Link to="/foo">…</Link></Button>` so the consumer doesn't
+ * have to reach for base-ui's `render` prop directly. Internally translates
+ * `asChild` → base-ui `render` so the underlying `<a>` (or whatever the child
+ * is) actually rendered, instead of nesting a `<button>` around it.
+ */
+type ButtonProps = ButtonPrimitive.Props &
+  VariantProps<typeof buttonVariants> & {
+    /**
+     * When true, render the single child element instead of a `<button>`.
+     * Compatible with Radix-style usage. Internally bridged to base-ui's
+     * `render` prop.
+     */
+    asChild?: boolean
+  }
+
 function Button({
   className,
   variant = "default",
   size = "default",
+  asChild,
+  children,
+  render,
   ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+}: ButtonProps) {
+  const mergedClassName = cn(buttonVariants({ variant, size, className }))
+
+  // asChild: take the single child element, hand it to base-ui as the render
+  // target. base-ui merges its props (including className) into the element.
+  if (asChild) {
+    const child = React.Children.only(children) as React.ReactElement
+    return (
+      <ButtonPrimitive
+        data-slot="button"
+        className={mergedClassName}
+        render={child}
+        {...props}
+      />
+    )
+  }
+
   return (
     <ButtonPrimitive
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={mergedClassName}
+      render={render}
       {...props}
-    />
+    >
+      {children}
+    </ButtonPrimitive>
   )
 }
 
 export { Button, buttonVariants }
+export type { ButtonProps }