From 1083b900d822615bd3a5f5bb20435b5ed90e048b Mon Sep 17 00:00:00 2001
From: garrettbear <gwhisten@gmail.com>
Date: Mon, 17 Jul 2023 22:30:40 -0700
Subject: [PATCH] fix lint issue

---
 .../component-library/button-base/button-base.tsx   | 13 ++++---------
 .../button-base/button-base.types.ts                |  7 +++++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/ui/components/component-library/button-base/button-base.tsx b/ui/components/component-library/button-base/button-base.tsx
index 8c1282a69111..c4098c5f02ed 100644
--- a/ui/components/component-library/button-base/button-base.tsx
+++ b/ui/components/component-library/button-base/button-base.tsx
@@ -19,9 +19,8 @@ import {
 } from './button-base.types';
 
 export const ButtonBase: ButtonBaseComponent = React.forwardRef(
-  <C extends React.ElementType = 'button'>(
+  <C extends React.ElementType = 'button' | 'a'>(
     {
-      as = 'button',
       block,
       children,
       className = '',
@@ -43,20 +42,16 @@ export const ButtonBase: ButtonBaseComponent = React.forwardRef(
     }: ButtonBaseProps<C>,
     ref?: PolymorphicRef<C>,
   ) => {
-    const Tag = href ? 'a' : as;
-    if (Tag === 'a' && externalLink) {
-      props.target = '_blank';
-      props.rel = 'noopener noreferrer';
-    }
-
     return (
       <Text
-        as={Tag}
+        as={href ? 'a' : 'button'}
         backgroundColor={BackgroundColor.backgroundAlternative}
         variant={TextVariant.bodyMdMedium}
         color={loading ? TextColor.transparent : color}
         ref={ref}
         href={href}
+        target={externalLink ? '_blank' : undefined}
+        rel={externalLink ? 'noopener noreferrer' : undefined}
         paddingLeft={4}
         paddingRight={4}
         ellipsis={ellipsis}
diff --git a/ui/components/component-library/button-base/button-base.types.ts b/ui/components/component-library/button-base/button-base.types.ts
index 5ca12677b2fc..d67ce496378a 100644
--- a/ui/components/component-library/button-base/button-base.types.ts
+++ b/ui/components/component-library/button-base/button-base.types.ts
@@ -13,12 +13,13 @@ export enum ButtonBaseSize {
   Lg = 'lg',
 }
 
+export type ValidButtonTagType = 'button' | 'a';
 export interface ButtonBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag
    *
    */
-  as?: 'button' | 'a';
+  as?: ValidButtonTagType;
   /**
    * Boolean prop to quickly activate box prop display block
    */
@@ -100,6 +101,8 @@ export interface ButtonBaseStyleUtilityProps extends StyleUtilityProps {
 export type ButtonBaseProps<C extends React.ElementType> =
   PolymorphicComponentPropWithRef<C, ButtonBaseStyleUtilityProps>;
 
-export type ButtonBaseComponent = <C extends React.ElementType = 'button'>(
+export type ButtonBaseComponent = <
+  C extends React.ElementType = 'button' | 'a',
+>(
   props: ButtonBaseProps<C>,
 ) => React.ReactElement | null;