From d8ef95cdfbabd90b7ee81efd05abddc9981c03b4 Mon Sep 17 00:00:00 2001
From: Madison <madison.w.kennedy@gmail.com>
Date: Fri, 10 Oct 2025 13:06:02 -0500
Subject: [PATCH] fix button

---
 docs/src/components/mdx/button.tsx | 82 +++++++++++++++++-------------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/docs/src/components/mdx/button.tsx b/docs/src/components/mdx/button.tsx
index 444b4db65..8252b180f 100644
--- a/docs/src/components/mdx/button.tsx
+++ b/docs/src/components/mdx/button.tsx
@@ -3,54 +3,68 @@ import * as React from "react";
 import { cn } from "../../lib/cn";
 import { buttonVariants } from "../ui/button";
 
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+type BaseButtonProps = {
   color?: 'primary' | 'secondary' | 'outline' | 'ghost',
   size?: 'sm' | 'icon' | 'icon-sm',
   icon?: React.ReactNode,
-  href?: string,
   children: React.ReactNode,
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, color = 'secondary', size = 'sm', icon, href, children, ...props }, ref) => {
-    const buttonContent = (
-      <>
-        {icon && <span className="inline-flex items-center justify-center w-3.5 h-3.5">{icon}</span>}
-        {children}
-      </>
-    );
+type ButtonAsButton = BaseButtonProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never,
+  };
 
-    const buttonClasses = cn(
-      buttonVariants({
-        color,
-        size,
-        className: 'gap-2 no-underline hover:no-underline'
-      }),
-      className
-    );
+type ButtonAsLink = BaseButtonProps &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string,
+  };
 
-    if (href) {
-      return (
-        <a role="button"
-          href={href}
-          className={buttonClasses}
-          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
-        >
-          {buttonContent}
-        </a>
-      );
-    }
+type ButtonProps = ButtonAsButton | ButtonAsLink;
 
+export const Button = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  ButtonProps
+>(({ className, color = 'secondary', size = 'sm', icon, href, children, ...props }, ref) => {
+  const buttonContent = (
+    <>
+      {icon && <span className="inline-flex items-center justify-center w-3.5 h-3.5">{icon}</span>}
+      {children}
+    </>
+  );
+
+  const buttonClasses = cn(
+    buttonVariants({
+      color,
+      size,
+      className: 'gap-2 no-underline hover:no-underline'
+    }),
+    className
+  );
+
+  if (href) {
     return (
-      <button
-        ref={ref}
+      <a
+        role="button"
+        href={href}
         className={buttonClasses}
-        {...props}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
       >
         {buttonContent}
-      </button>
+      </a>
     );
   }
-);
+
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      className={buttonClasses}
+      {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {buttonContent}
+    </button>
+  );
+});
 
 Button.displayName = "Button";