From 814558357d286eb84661b9264fb62d145c18234e Mon Sep 17 00:00:00 2001
From: Volnei Munhoz <volnei.munhoz@gmail.com>
Date: Wed, 3 Dec 2025 12:55:36 -0300
Subject: [PATCH 1/7] Remove all links legacyBehavior

---
 apps/web/components/apps/make/Setup.tsx       | 10 ++--
 .../[id]/forgot-password-single-view.tsx      | 10 ++--
 .../bookings/views/bookings-single-view.tsx   | 38 ++++++------
 .../_components/AppNotInstalledMessage.tsx    | 12 ++--
 packages/ui/components/button/Button.tsx      | 11 ++--
 packages/ui/components/dropdown/Dropdown.tsx  | 11 +---
 packages/ui/components/form/step/Stepper.tsx  | 59 +++++++++++--------
 packages/ui/components/list/List.tsx          |  2 +-
 8 files changed, 72 insertions(+), 81 deletions(-)

diff --git a/apps/web/components/apps/make/Setup.tsx b/apps/web/components/apps/make/Setup.tsx
index 105339b2d1700b..f51599ce3d5d5b 100644
--- a/apps/web/components/apps/make/Setup.tsx
+++ b/apps/web/components/apps/make/Setup.tsx
@@ -1,5 +1,4 @@
 import type { InferGetServerSidePropsType } from "next";
-import Link from "next/link";
 import { useState } from "react";
 import { Toaster } from "sonner";
 
@@ -71,9 +70,10 @@ export default function MakeSetup({ inviteLink }: InferGetServerSidePropsType<ty
         <div className="bg-default m-auto max-w-[43em] overflow-auto rounded pb-10 md:p-10">
           <div className="md:flex md:flex-row">
             <div className="invisible md:visible">
+              {/* eslint-disable @next/next/no-img-element */}
               <img className="h-11" src="/api/app-store/make/icon.svg" alt="Make Logo" />
             </div>
-            <div className="ml-2 ltr:mr-2 rtl:ml-2 md:ml-5">
+            <div className="ml-2 md:ml-5 ltr:mr-2 rtl:ml-2">
               <div className="text-default">{t("setting_up_make")}</div>
 
               <>
@@ -134,9 +134,9 @@ export default function MakeSetup({ inviteLink }: InferGetServerSidePropsType<ty
                 <li>{t("make_setup_instructions_5")}</li>
                 <li>{t("make_setup_instructions_6")}</li>
               </ol>
-              <Link href="/apps/installed/automation?hl=make" passHref={true} legacyBehavior>
-                <Button color="secondary">{t("done")}</Button>
-              </Link>
+              <Button href="/apps/installed/automation?hl=make" color="secondary">
+                {t("done")}
+              </Button>
             </div>
           </div>
         </div>
diff --git a/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx b/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
index acd1397da71da9..66056bf1f4220a 100644
--- a/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
+++ b/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
@@ -45,12 +45,10 @@ function Expired() {
           <h2 className="text-emphasis text-center text-3xl font-extrabold">{t("request_is_expired")}</h2>
         </div>
         <p>{t("request_is_expired_instructions")}</p>
-        <Link href="/auth/forgot-password" passHref legacyBehavior>
-          <button
-            type="button"
-            className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
-            {t("try_again")}
-          </button>
+        <Link
+          href="/auth/forgot-password"
+          className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
+          {t("try_again")}
         </Link>
       </div>
     </>
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 563c2ae56f656c..7fb2078b241801 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -806,15 +806,14 @@ export default function Success(props: PageProps) {
                           </span>
                           {/* Login button but redirect to here */}
                           <span className="text-default inline">
-                            <span className="underline" data-testid="reschedule-link">
-                              <Link
-                                href={`/auth/login?callbackUrl=${encodeURIComponent(
-                                  `/booking/${bookingInfo?.uid}`
-                                )}`}
-                                legacyBehavior>
-                                {t("login")}
-                              </Link>
-                            </span>
+                            <Link
+                              href={`/auth/login?callbackUrl=${encodeURIComponent(
+                                `/booking/${bookingInfo?.uid}`
+                              )}`}
+                              className="underline"
+                              data-testid="reschedule-link">
+                              {t("login")}
+                            </Link>
                           </span>
                         </div>
                       </>
@@ -837,17 +836,16 @@ export default function Success(props: PageProps) {
                                 (!isBookingInPast || eventType.allowReschedulingPastBookings) &&
                                 canReschedule && (
                                   <span className="text-default inline">
-                                    <span className="underline" data-testid="reschedule-link">
-                                      <Link
-                                        href={`/reschedule/${seatReferenceUid || bookingInfo?.uid}${
-                                          currentUserEmail
-                                            ? `?rescheduledBy=${encodeURIComponent(currentUserEmail)}`
-                                            : ""
-                                        }`}
-                                        legacyBehavior>
-                                        {t("reschedule")}
-                                      </Link>
-                                    </span>
+                                    <Link
+                                      href={`/reschedule/${seatReferenceUid || bookingInfo?.uid}${
+                                        currentUserEmail
+                                          ? `?rescheduledBy=${encodeURIComponent(currentUserEmail)}`
+                                          : ""
+                                      }`}
+                                      className="underline"
+                                      data-testid="reschedule-link">
+                                      {t("reschedule")}
+                                    </Link>
                                     {!isBookingInPast && canCancel && (
                                       <span className="mx-2">{t("or_lowercase")}</span>
                                     )}
diff --git a/packages/app-store/_components/AppNotInstalledMessage.tsx b/packages/app-store/_components/AppNotInstalledMessage.tsx
index 5a9ce94d3b1a99..b2d293c7f2f73f 100644
--- a/packages/app-store/_components/AppNotInstalledMessage.tsx
+++ b/packages/app-store/_components/AppNotInstalledMessage.tsx
@@ -1,5 +1,3 @@
-import Link from "next/link";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Icon } from "@calcom/ui/components/icon";
@@ -17,12 +15,10 @@ export default function AppNotInstalledMessage({ appName }: { appName: string })
         <p className="text-subtle px-1 leading-normal">{t("visit_our_app_store")}</p>
 
         <div className="mt-5">
-          <Link href={`/apps/${appName}`} passHref={true} legacyBehavior>
-            <Button type="button" color="secondary">
-              {t("go_to_app_store")}
-              <Icon name="arrow-up-right" className="ml-1" size={20} />
-            </Button>
-          </Link>
+          <Button href={`/apps/${appName}`} type="button" color="secondary">
+            {t("go_to_app_store")}
+            <Icon name="arrow-up-right" className="ml-1" size={20} />
+          </Button>
         </div>
       </div>
     </div>
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index fcd87c1f9dcc06..fcee0ffb7347cb 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -240,13 +240,14 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
   } = props;
   // Buttons are **always** disabled if we're in a `loading` state
   const disabled = props.disabled || loading;
-  // If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
+  // If pass an `href`-attr is passed it's Link, otherwise it's a `<button />`
   const isLink = typeof props.href !== "undefined";
-  const elementType = isLink ? "a" : "button";
+  const elementType = isLink ? Link : "button";
   const element = React.createElement(
     elementType,
     {
       ...passThroughProps,
+      ...(isLink && { "data-testid": "link-component", shallow: shallow && shallow }),
       disabled,
       type: !isLink ? type : undefined,
       ref: forwardedRef,
@@ -334,10 +335,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     </>
   );
 
-  return props.href ? (
-    <Link data-testid="link-component" passHref href={props.href} shallow={shallow && shallow} legacyBehavior>
-      {element}
-    </Link>
+  return isLink ? (
+    element
   ) : (
     <Wrapper
       data-testid="wrapper"
diff --git a/packages/ui/components/dropdown/Dropdown.tsx b/packages/ui/components/dropdown/Dropdown.tsx
index 8c6f474d7920a5..303f01574f710c 100644
--- a/packages/ui/components/dropdown/Dropdown.tsx
+++ b/packages/ui/components/dropdown/Dropdown.tsx
@@ -143,19 +143,12 @@ type ButtonOrLinkProps = ComponentProps<"button"> & ComponentProps<"a">;
 
 export function ButtonOrLink({ href, ...props }: ButtonOrLinkProps) {
   const isLink = typeof href !== "undefined";
-  const ButtonOrLink = isLink ? "a" : "button";
-
-  const content = <ButtonOrLink {...props} />;
 
   if (isLink) {
-    return (
-      <Link href={href} legacyBehavior>
-        {content}
-      </Link>
-    );
+    return <Link href={href} {...props} />;
   }
 
-  return content;
+  return <button {...props} />;
 }
 
 export const DropdownItem = (props: DropdownItemProps) => {
diff --git a/packages/ui/components/form/step/Stepper.tsx b/packages/ui/components/form/step/Stepper.tsx
index 3bbaba5ce40a84..fa75f4011268cd 100644
--- a/packages/ui/components/form/step/Stepper.tsx
+++ b/packages/ui/components/form/step/Stepper.tsx
@@ -26,32 +26,39 @@ function Stepper<T extends DefaultStep>(props: {
           <ol role="list" className="ml-8 flex items-center space-x-5" ref={stepperRef}>
             {steps.map((mapStep, index) => (
               <li key={mapStep.title}>
-                <Link
-                  href={props.disableSteps ? "#" : `${href}?step=${index + 1}`}
-                  shallow
-                  replace
-                  legacyBehavior>
-                  {index + 1 < props.step ? (
-                    <a className="hover:bg-inverted block h-2.5 w-2.5 rounded-full bg-gray-600">
-                      <span className="sr-only">{mapStep.title}</span>
-                    </a>
-                  ) : index + 1 === props.step ? (
-                    <a className="relative flex items-center justify-center" aria-current="step">
-                      <span className="absolute flex h-5 w-5 p-px" aria-hidden="true">
-                        <span className="bg-emphasis h-full w-full rounded-full" />
-                      </span>
-                      <span
-                        className="relative block h-2.5 w-2.5 rounded-full bg-gray-600"
-                        aria-hidden="true"
-                      />
-                      <span className="sr-only">{mapStep.title}</span>
-                    </a>
-                  ) : (
-                    <a className="bg-emphasis block h-2.5 w-2.5 rounded-full hover:bg-gray-400">
-                      <span className="sr-only">{mapStep.title}</span>
-                    </a>
-                  )}
-                </Link>
+                {index + 1 < props.step ? (
+                  <Link
+                    href={props.disableSteps ? "#" : `${href}?step=${index + 1}`}
+                    shallow
+                    replace
+                    className="hover:bg-inverted block h-2.5 w-2.5 rounded-full bg-gray-600">
+                    <span className="sr-only">{mapStep.title}</span>
+                  </Link>
+                ) : index + 1 === props.step ? (
+                  <Link
+                    href={props.disableSteps ? "#" : `${href}?step=${index + 1}`}
+                    shallow
+                    replace
+                    className="relative flex items-center justify-center"
+                    aria-current="step">
+                    <span className="absolute flex h-5 w-5 p-px" aria-hidden="true">
+                      <span className="bg-emphasis h-full w-full rounded-full" />
+                    </span>
+                    <span
+                      className="relative block h-2.5 w-2.5 rounded-full bg-gray-600"
+                      aria-hidden="true"
+                    />
+                    <span className="sr-only">{mapStep.title}</span>
+                  </Link>
+                ) : (
+                  <Link
+                    href={props.disableSteps ? "#" : `${href}?step=${index + 1}`}
+                    shallow
+                    replace
+                    className="bg-emphasis block h-2.5 w-2.5 rounded-full hover:bg-gray-400">
+                    <span className="sr-only">{mapStep.title}</span>
+                  </Link>
+                )}
               </li>
             ))}
           </ol>
diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx
index 31eb72a488f57e..1487bb970d1c60 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -57,7 +57,7 @@ export function ListItem(props: ListItemProps) {
   );
 
   return href ? (
-    <Link passHref href={href} legacyBehavior>
+    <Link href={href}>
       {element}
     </Link>
   ) : (

From 7768891a907a726c907051a4aa5312649fe03229 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 8 Dec 2025 10:37:47 +0000
Subject: [PATCH 2/7] fix: resolve type errors in Button and Dropdown when
 using Link without legacyBehavior

- Button.tsx: Only pass ref to button element, not to Link (Link manages its own anchor)
- Dropdown.tsx: Strip ref from props when using Link to avoid type incompatibility

This fixes the type errors that were causing API V1 and V2 builds to fail.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>
---
 packages/ui/components/button/Button.tsx     | 3 ++-
 packages/ui/components/dropdown/Dropdown.tsx | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index fcee0ffb7347cb..4aeafbe35c2f91 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -250,7 +250,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       ...(isLink && { "data-testid": "link-component", shallow: shallow && shallow }),
       disabled,
       type: !isLink ? type : undefined,
-      ref: forwardedRef,
+      // Only pass ref to button element, not to Link (Link manages its own anchor)
+      ...(!isLink && { ref: forwardedRef }),
       className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
       // if we click a disabled button, we prevent going through the click handler
       onClick: disabled
diff --git a/packages/ui/components/dropdown/Dropdown.tsx b/packages/ui/components/dropdown/Dropdown.tsx
index 303f01574f710c..b39fb1c5bcd80b 100644
--- a/packages/ui/components/dropdown/Dropdown.tsx
+++ b/packages/ui/components/dropdown/Dropdown.tsx
@@ -145,7 +145,9 @@ export function ButtonOrLink({ href, ...props }: ButtonOrLinkProps) {
   const isLink = typeof href !== "undefined";
 
   if (isLink) {
-    return <Link href={href} {...props} />;
+    // Strip ref from props when using Link (Link manages its own anchor element)
+    const { ref: _ref, ...linkProps } = props;
+    return <Link href={href} {...linkProps} />;
   }
 
   return <button {...props} />;

From 74fc1fd0e0854e98375f43f5cd2c1ecdb0024234 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 8 Dec 2025 10:50:19 +0000
Subject: [PATCH 3/7] fix: only pass disabled and type props to button element,
 not to Link

Link component doesn't accept disabled or type props, so these should only be passed when rendering a button element.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>
---
 packages/ui/components/button/Button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 4aeafbe35c2f91..c0db8ac15f5d91 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -248,8 +248,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     {
       ...passThroughProps,
       ...(isLink && { "data-testid": "link-component", shallow: shallow && shallow }),
-      disabled,
-      type: !isLink ? type : undefined,
+      // Only pass disabled and type to button element, not to Link
+      ...(!isLink && { disabled, type }),
       // Only pass ref to button element, not to Link (Link manages its own anchor)
       ...(!isLink && { ref: forwardedRef }),
       className: classNames(buttonClasses({ color, size, loading, variant }), props.className),

From a5ea34d869cc40cb59443d3e36c768ed7a6070f4 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 8 Dec 2025 10:59:50 +0000
Subject: [PATCH 4/7] fix: strip ref from passThroughProps when rendering Link

The passThroughProps spread was including a ref property that's incompatible with Link's expected ref type. This strips the ref when rendering a Link component.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>
---
 packages/ui/components/button/Button.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index c0db8ac15f5d91..5d66fe5c225e0e 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -243,10 +243,12 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
   // If pass an `href`-attr is passed it's Link, otherwise it's a `<button />`
   const isLink = typeof props.href !== "undefined";
   const elementType = isLink ? Link : "button";
+  // Strip ref from passThroughProps when rendering Link (Link manages its own anchor element)
+  const { ref: _ref, ...linkSafeProps } = passThroughProps as typeof passThroughProps & { ref?: unknown };
   const element = React.createElement(
     elementType,
     {
-      ...passThroughProps,
+      ...(isLink ? linkSafeProps : passThroughProps),
       ...(isLink && { "data-testid": "link-component", shallow: shallow && shallow }),
       // Only pass disabled and type to button element, not to Link
       ...(!isLink && { disabled, type }),

From 5f5d3517130ff1ffc0dc30afd9661bf9fa434656 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 8 Dec 2025 11:15:47 +0000
Subject: [PATCH 5/7] fix: use type assertion for React.createElement props to
 handle union types

The Button component uses a union type for props that can be either Link or button props. TypeScript can't narrow the union type properly when using React.createElement with a dynamic element type, so we use a type assertion to cast the props to the correct type.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>
---
 packages/ui/components/button/Button.tsx | 49 ++++++++++++++++--------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 5d66fe5c225e0e..49d1f6bad916a1 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -243,25 +243,40 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
   // If pass an `href`-attr is passed it's Link, otherwise it's a `<button />`
   const isLink = typeof props.href !== "undefined";
   const elementType = isLink ? Link : "button";
-  // Strip ref from passThroughProps when rendering Link (Link manages its own anchor element)
-  const { ref: _ref, ...linkSafeProps } = passThroughProps as typeof passThroughProps & { ref?: unknown };
+
+  // Build props object based on element type
+  // For Link: don't pass ref (Link manages its own anchor), disabled, or type
+  // For button: pass all props including ref, disabled, and type
+  const elementProps = isLink
+    ? {
+        ...passThroughProps,
+        "data-testid": "link-component",
+        shallow: shallow && shallow,
+        className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
+        onClick: disabled
+          ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+              e.preventDefault();
+            }
+          : props.onClick,
+      }
+    : {
+        ...passThroughProps,
+        ref: forwardedRef,
+        disabled,
+        type,
+        className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
+        onClick: disabled
+          ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+              e.preventDefault();
+            }
+          : props.onClick,
+      };
+
   const element = React.createElement(
     elementType,
-    {
-      ...(isLink ? linkSafeProps : passThroughProps),
-      ...(isLink && { "data-testid": "link-component", shallow: shallow && shallow }),
-      // Only pass disabled and type to button element, not to Link
-      ...(!isLink && { disabled, type }),
-      // Only pass ref to button element, not to Link (Link manages its own anchor)
-      ...(!isLink && { ref: forwardedRef }),
-      className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
-      // if we click a disabled button, we prevent going through the click handler
-      onClick: disabled
-        ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            e.preventDefault();
-          }
-        : props.onClick,
-    },
+    // Type assertion needed because TypeScript can't narrow the union type properly
+    // when using React.createElement with a dynamic element type
+    elementProps as React.ComponentProps<typeof elementType>,
     <>
       {CustomStartIcon ||
         (StartIcon && (

From 2e9d2f4132030566df98a5973576a18530d87647 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 8 Dec 2025 11:42:47 +0000
Subject: [PATCH 6/7] fix: render Link and button separately to avoid type
 conflicts

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>
---
 packages/ui/components/button/Button.tsx | 70 +++++++++++-------------
 1 file changed, 32 insertions(+), 38 deletions(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 49d1f6bad916a1..4f197ea4781d9e 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -239,44 +239,17 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     ...passThroughProps
   } = props;
   // Buttons are **always** disabled if we're in a `loading` state
-  const disabled = props.disabled || loading;
+  const disabled = props.disabled || loading || false;
   // If pass an `href`-attr is passed it's Link, otherwise it's a `<button />`
   const isLink = typeof props.href !== "undefined";
-  const elementType = isLink ? Link : "button";
-
-  // Build props object based on element type
-  // For Link: don't pass ref (Link manages its own anchor), disabled, or type
-  // For button: pass all props including ref, disabled, and type
-  const elementProps = isLink
-    ? {
-        ...passThroughProps,
-        "data-testid": "link-component",
-        shallow: shallow && shallow,
-        className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
-        onClick: disabled
-          ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-              e.preventDefault();
-            }
-          : props.onClick,
+  const buttonClassName = classNames(buttonClasses({ color, size, loading, variant }), props.className);
+  const handleClick = disabled
+    ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        e.preventDefault();
       }
-    : {
-        ...passThroughProps,
-        ref: forwardedRef,
-        disabled,
-        type,
-        className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
-        onClick: disabled
-          ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-              e.preventDefault();
-            }
-          : props.onClick,
-      };
+    : props.onClick;
 
-  const element = React.createElement(
-    elementType,
-    // Type assertion needed because TypeScript can't narrow the union type properly
-    // when using React.createElement with a dynamic element type
-    elementProps as React.ComponentProps<typeof elementType>,
+  const buttonContent = (
     <>
       {CustomStartIcon ||
         (StartIcon && (
@@ -353,16 +326,37 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     </>
   );
 
-  return isLink ? (
-    element
-  ) : (
+  // Render Link or button separately to avoid type conflicts
+  // Link manages its own anchor element, so we don't pass ref to it
+  if (isLink) {
+    return (
+      <Link
+        {...(passThroughProps as Omit<JSX.IntrinsicElements["a"], "href" | "onClick" | "ref"> & LinkProps)}
+        data-testid="link-component"
+        shallow={shallow && shallow}
+        className={buttonClassName}
+        onClick={handleClick}>
+        {buttonContent}
+      </Link>
+    );
+  }
+
+  return (
     <Wrapper
       data-testid="wrapper"
       tooltip={props.tooltip}
       tooltipSide={tooltipSide}
       tooltipOffset={tooltipOffset}
       tooltipClassName={tooltipClassName}>
-      {element}
+      <button
+        {...(passThroughProps as Omit<JSX.IntrinsicElements["button"], "onClick" | "ref">)}
+        ref={forwardedRef as React.Ref<HTMLButtonElement>}
+        disabled={disabled}
+        type={type as "button" | "submit" | "reset"}
+        className={buttonClassName}
+        onClick={handleClick}>
+        {buttonContent}
+      </button>
     </Wrapper>
   );
 });

From 90a687e2a0d5ffc16abda6d08e12abc7240e1109 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 8 Dec 2025 12:47:31 +0000
Subject: [PATCH 7/7] fix: preserve data-testid when rendering Button as Link

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>
---
 packages/ui/components/button/Button.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 4f197ea4781d9e..f5810ce570cc48 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -332,7 +332,6 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     return (
       <Link
         {...(passThroughProps as Omit<JSX.IntrinsicElements["a"], "href" | "onClick" | "ref"> & LinkProps)}
-        data-testid="link-component"
         shallow={shallow && shallow}
         className={buttonClassName}
         onClick={handleClick}>