diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
index 426b65a31..ed701d9db 100644
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@@ -35,6 +35,7 @@ export const ButtonBase = ({
   return (
     <Box
       as={Tag}
+      href={href}
       paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
       paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
       className={classnames(
diff --git a/ui/components/component-library/button-base/button-base.test.js b/ui/components/component-library/button-base/button-base.test.js
index 5cd14b841..e82a19a46 100644
--- a/ui/components/component-library/button-base/button-base.test.js
+++ b/ui/components/component-library/button-base/button-base.test.js
@@ -24,11 +24,17 @@ describe('ButtonBase', () => {
     expect(anchor).toBe(1);
   });
 
-  it('should render anchor element correctly by href only being passed', () => {
+  it('should render anchor element correctly by href only being passed and href exists', () => {
     const { getByTestId, container } = render(
-      <ButtonBase href="#" data-testid="button-base" />,
+      <ButtonBase href="https://www.test.com/" data-testid="button-base">
+        Button Base
+      </ButtonBase>,
     );
     expect(getByTestId('button-base')).toHaveClass('mm-button');
+    expect(getByTestId('button-base')).toHaveAttribute(
+      'href',
+      'https://www.test.com/',
+    );
     const anchor = container.getElementsByTagName('a').length;
     expect(anchor).toBe(1);
   });