From b58a488eff432b5e8e275dd130551bc86cae4d74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Thu, 25 Sep 2025 10:20:05 +0200
Subject: [PATCH] fix(bui): fix button link internal routing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 .../src/components/ButtonLink/ButtonLink.tsx  | 57 +++++++++++++++----
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/ButtonLink/ButtonLink.tsx b/packages/ui/src/components/ButtonLink/ButtonLink.tsx
index 153643a530..b5b5ab208d 100644
--- a/packages/ui/src/components/ButtonLink/ButtonLink.tsx
+++ b/packages/ui/src/components/ButtonLink/ButtonLink.tsx
@@ -16,13 +16,16 @@
 
 import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
-import { Link as RALink } from 'react-aria-components';
+import { Link as RALink, RouterProvider } from 'react-aria-components';
+import { useNavigate, useHref } from 'react-router-dom';
 import type { ButtonLinkProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import { isExternalLink } from '../../utils/isExternalLink';
 
 /** @public */
 export const ButtonLink = forwardRef(
   (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {
+    const navigate = useNavigate();
     const {
       size = 'small',
       variant = 'primary',
@@ -30,6 +33,7 @@ export const ButtonLink = forwardRef(
       iconEnd,
       children,
       className,
+      href,
       ...rest
     } = props;
 
@@ -40,17 +44,48 @@ export const ButtonLink = forwardRef(
 
     const { classNames: classNamesButtonLink } = useStyles('ButtonLink');
 
+    const isExternal = isExternalLink(href);
+
+    // If it's an external link, render RALink without RouterProvider
+    if (isExternal) {
+      return (
+        <RALink
+          className={clsx(
+            classNames.root,
+            classNamesButtonLink.root,
+            className,
+          )}
+          ref={ref}
+          {...dataAttributes}
+          href={href}
+          {...rest}
+        >
+          {iconStart}
+          {children}
+          {iconEnd}
+        </RALink>
+      );
+    }
+
+    // For internal links, use RouterProvider
     return (
-      <RALink
-        className={clsx(classNames.root, classNamesButtonLink.root, className)}
-        ref={ref}
-        {...dataAttributes}
-        {...rest}
-      >
-        {iconStart}
-        {children}
-        {iconEnd}
-      </RALink>
+      <RouterProvider navigate={navigate} useHref={useHref}>
+        <RALink
+          className={clsx(
+            classNames.root,
+            classNamesButtonLink.root,
+            className,
+          )}
+          ref={ref}
+          {...dataAttributes}
+          href={href}
+          {...rest}
+        >
+          {iconStart}
+          {children}
+          {iconEnd}
+        </RALink>
+      </RouterProvider>
     );
   },
 );