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 1/4] 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>
     );
   },
 );

From d6db35b521c19bcb63025877d4d6659c6bee6ea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Thu, 25 Sep 2025 11:51:53 +0200
Subject: [PATCH 2/4] fix(bui): add MemoryRouter to ButtonLink stories
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.stories.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/ButtonLink/ButtonLink.stories.tsx b/packages/ui/src/components/ButtonLink/ButtonLink.stories.tsx
index b4667f017b..f032af318c 100644
--- a/packages/ui/src/components/ButtonLink/ButtonLink.stories.tsx
+++ b/packages/ui/src/components/ButtonLink/ButtonLink.stories.tsx
@@ -14,15 +14,23 @@
  * limitations under the License.
  */
 
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 import { ButtonLink } from './ButtonLink';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta = {
   title: 'Backstage UI/ButtonLink',
   component: ButtonLink,
+  decorators: [
+    (Story: StoryFn) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
   argTypes: {
     size: {
       control: 'select',

From 5c21e451a733de3ff06a050622eefb385efdb47c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Fri, 3 Oct 2025 15:52:46 +0200
Subject: [PATCH 3/4] add changeset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 .changeset/sad-women-rule.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/sad-women-rule.md

diff --git a/.changeset/sad-women-rule.md b/.changeset/sad-women-rule.md
new file mode 100644
index 0000000000..caed5bea87
--- /dev/null
+++ b/.changeset/sad-women-rule.md
@@ -0,0 +1,6 @@
+---
+'example-app': patch
+'@backstage/ui': patch
+---
+
+Add react router for internal routing for ButtonLinks

From 722182fa90fb84834cedd298a80a41edb32e0dc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Fri, 3 Oct 2025 16:28:19 +0200
Subject: [PATCH 4/4] fix changeset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 .changeset/sad-women-rule.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/sad-women-rule.md b/.changeset/sad-women-rule.md
index caed5bea87..04bbbe1eed 100644
--- a/.changeset/sad-women-rule.md
+++ b/.changeset/sad-women-rule.md
@@ -1,5 +1,4 @@
 ---
-'example-app': patch
 '@backstage/ui': patch
 ---