refactor: <Button> to use 'as' prop for links

wesleyboar · wesleyboar · commit b68d547f5bf9 · 2026-03-25T12:08:29.000-05:00
diff --git a/apps/tup-ui/src/pages/Impersonate/Impersonate.tsx b/apps/tup-ui/src/pages/Impersonate/Impersonate.tsx
@@ -19,9 +19,13 @@ const Impersonate: React.FC = () => {
         ></input>
       </div>
       <div>
-        <a href={`/portal/impersonate?username=${username}`}>
-          <Button type="primary">Impersonate User</Button>
-        </a>
+        <Button
+          as="a"
+          href={`/portal/impersonate?username=${username}`}
+          type="primary"
+        >
+          Impersonate User
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/tup-ui/src/pages/Projects/Projects.tsx b/apps/tup-ui/src/pages/Projects/Projects.tsx
@@ -9,11 +9,16 @@ import { SectionHeader, Button } from '@tacc/core-components';
 import styles from './Projects.module.css';
 
 const NewProject = () => (
-  <a href="https://submit-tacc.xras.org/" target="_blank" rel="noreferrer">
-    <Button type="primary" size="small">
-      + New Project
-    </Button>
-  </a>
+  <Button
+    as="a"
+    href="https://submit-tacc.xras.org/"
+    target="_blank"
+    rel="noreferrer"
+    type="primary"
+    size="small"
+  >
+    + New Project
+  </Button>
 );
 
 const Layout: React.FC = () => {
diff --git a/libs/core-components/src/lib/Button/Button.test.jsx b/libs/core-components/src/lib/Button/Button.test.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { Link, MemoryRouter } from 'react-router-dom';
 import Button, * as BTN from './Button';
 
 const TEST_TEXT = '…';
@@ -105,5 +106,49 @@ describe('Button', () => {
       const el = queryByText('Loading Button').closest('button');
       expect(el).toBeDisabled();
     });
+    it('sets disabled on anchor when loading', () => {
+      const { getByRole } = render(
+        <Button as="a" href="#" isLoading={true}>
+          Loading Link
+        </Button>
+      );
+      const el = getByRole('link');
+      expect(el).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('as anchor', () => {
+    it('renders a link with href', () => {
+      const { getByRole } = render(
+        <Button as="a" href="/x" type="primary">
+          Go
+        </Button>
+      );
+      const el = getByRole('link');
+      expect(el).toHaveAttribute('href', '/x');
+      expect(el.textContent).toMatch('Go');
+    });
+    it('sets disabled on anchor when disabled', () => {
+      const { getByRole } = render(
+        <Button as="a" href="#" disabled>
+          Nope
+        </Button>
+      );
+      expect(getByRole('link')).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('as Link', () => {
+    it('renders router link with to', () => {
+      const { getByRole } = render(
+        <MemoryRouter>
+          <Button as={Link} to="/mfa" type="secondary">
+            MFA
+          </Button>
+        </MemoryRouter>
+      );
+      const el = getByRole('link');
+      expect(el.getAttribute('href')).toMatch('/mfa');
+    });
   });
 });
diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import Icon from '../Icon';
 import LoadingSpinner from '../LoadingSpinner';
 import styles from './Button.module.css';
@@ -33,62 +34,50 @@ type ButtonTypeOtherSize = {
   size?: 'short' | 'medium' | 'long' | 'small';
 };
 
-type ButtonProps = React.PropsWithChildren<{
-  className?: string;
-  iconNameBefore?: string;
-  iconNameAfter?: string;
-  id?: string;
-  dataTestid?: string;
-  disabled?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  attr?: 'button' | 'submit' | 'reset';
-  isLoading?: boolean;
-}> &
-  (ButtonTypeLinkSize | ButtonTypeOtherSize) &
-  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
-
-const Button: React.FC<ButtonProps> = ({
-  children,
-  className,
-  iconNameBefore,
-  iconNameAfter,
-  id,
-  type = 'secondary',
-  size = '',
-  dataTestid,
-  disabled,
-  onClick,
-  attr = 'button',
-  isLoading = false,
-  ...rest
-}) => {
+const Button = (props: ButtonProps) => {
+  const {
+    as,
+    attr = 'button',
+    children,
+    className,
+    iconNameBefore,
+    iconNameAfter,
+    type = 'secondary',
+    size = '',
+    dataTestid,
+    disabled,
+    onClick,
+    isLoading = false,
+    href,
+    ...rest
+  } = props as ButtonProps & {
+    href?: string;
+    attr?: 'button' | 'submit' | 'reset';
+  };
+
   function onclick(e: React.MouseEvent<HTMLButtonElement>) {
     if (disabled) {
       e.preventDefault();
       return;
     }
     if (onClick) {
-      return onClick(e);
+      return (onClick as React.MouseEventHandler<HTMLButtonElement>)(e);
     }
   }
 
-  return (
-    <button
-      {...rest}
-      id={id}
-      className={`
+  const isEffectivelyDisabled = Boolean(disabled || isLoading);
+
+  const rootClassName = `
         ${styles['root']}
         c-button
         ${TYPE_MAP[type] ? `c-button--${[TYPE_MAP[type]]}` : ''}
         ${SIZE_MAP[size] ? `c-button--${[SIZE_MAP[size]]}` : ''}
         ${isLoading ? 'c-button--is-busy' : ''}
         ${className}
-      `}
-      disabled={disabled || isLoading}
-      type={attr}
-      onClick={onclick}
-      data-testid={dataTestid}
-    >
+      `;
+
+  const content = (
+    <>
       {isLoading && (
         <LoadingSpinner
           placement="inline"
@@ -112,8 +101,103 @@ const Button: React.FC<ButtonProps> = ({
           className="c-button__icon--after"
         />
       )}
+    </>
+  );
+
+  const onAnchorOrLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (isEffectivelyDisabled) {
+      e.preventDefault();
+      return;
+    }
+    (onClick as React.MouseEventHandler<HTMLAnchorElement> | undefined)?.(e);
+  };
+
+  if (as === 'a') {
+    const aProps: React.AnchorHTMLAttributes<HTMLAnchorElement> &
+      WithDisabledAttr = {
+      ...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>),
+      href,
+      className: rootClassName,
+      disabled: isEffectivelyDisabled,
+      onClick: onAnchorOrLinkClick,
+      'data-testid': dataTestid,
+    };
+    return <a {...aProps}>{content}</a>;
+  }
+
+  if (as === Link) {
+    const linkProps: RouterLinkProps & WithDisabledAttr = {
+      ...(rest as RouterLinkProps),
+      className: rootClassName,
+      disabled: isEffectivelyDisabled,
+      onClick: onAnchorOrLinkClick,
+      'data-testid': dataTestid,
+    };
+    return <Link {...linkProps}>{content}</Link>;
+  }
+
+  return (
+    <button
+      {...(rest as Omit<
+        React.ButtonHTMLAttributes<HTMLButtonElement>,
+        'type'
+      >)}
+      className={rootClassName}
+      disabled={disabled || isLoading}
+      type={attr}
+      onClick={onclick}
+      data-testid={dataTestid}
+    >
+      {content}
     </button>
   );
 };
 
 export default Button;
+
+type SharedProps = React.PropsWithChildren<{
+  className?: string;
+  iconNameBefore?: string;
+  iconNameAfter?: string;
+  id?: string;
+  dataTestid?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+}> &
+  (ButtonTypeLinkSize | ButtonTypeOtherSize);
+
+type ButtonAsButtonProps = SharedProps & {
+  as?: 'button';
+  attr?: 'button' | 'submit' | 'reset';
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+} & Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'type' | 'disabled' | 'onClick'
+>;
+
+type ButtonAsAnchorProps = SharedProps & {
+  as: 'a';
+  href: string;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+} & Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  'type' | 'className' | 'children' | 'disabled' | 'onClick' | 'href'
+>;
+
+type RouterLinkProps = React.ComponentPropsWithoutRef<typeof Link>;
+
+type ButtonAsRouterLinkProps = SharedProps & {
+  as: typeof Link;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+} & Omit<
+  RouterLinkProps,
+  'className' | 'children' | 'disabled' | 'onClick' | 'type'
+>;
+
+export type ButtonProps =
+  | ButtonAsButtonProps
+  | ButtonAsAnchorProps
+  | ButtonAsRouterLinkProps;
+
+/** Non-standard `disabled` on `<a>` / `<Link>` — styled via @tacc/core-styles */
+type WithDisabledAttr = { disabled?: boolean; 'data-testid'?: string };
diff --git a/libs/tup-components/src/accounts/ManageAccount.tsx b/libs/tup-components/src/accounts/ManageAccount.tsx
@@ -10,30 +10,36 @@ const ManageUser = () => (
       Account details are mananged by the TACC Account Management portal. Follow
       the links below to:
     </p>
-    <a
+    <Button
+      as="a"
       href="https://accounts.tacc.utexas.edu/profile"
       target="_blank"
       rel="noreferrer"
-      className={`${styles['tap-action']} c-button c-button--secondary`}
+      className={styles['tap-action']}
+      type="secondary"
     >
       Edit User Profile
-    </a>
-    <a
+    </Button>
+    <Button
+      as="a"
       href="https://accounts.tacc.utexas.edu/change_password"
       target="_blank"
       rel="noreferrer"
-      className={`${styles['tap-action']} c-button c-button--secondary`}
+      className={styles['tap-action']}
+      type="secondary"
     >
       Change Password
-    </a>
-    <a
+    </Button>
+    <Button
+      as="a"
       href="https://accounts.tacc.utexas.edu/mfa"
       target="_blank"
       rel="noreferrer"
-      className={`${styles['tap-action']} c-button c-button--secondary`}
+      className={styles['tap-action']}
+      type="secondary"
     >
       Manage Multi-factor Authentication
-    </a>
+    </Button>
   </article>
 );
 
@@ -44,14 +50,16 @@ const ManageUpload = () => (
       To confirm eligibility for access to a TACC account, you may be requested
       to upload identifying documents.
     </p>
-    <a
+    <Button
+      as="a"
       href="https://tacc.utexas.edu/secure-upload"
       target="_blank"
       rel="noreferrer"
-      className={`${styles['tap-action']} c-button c-button--secondary`}
+      className={styles['tap-action']}
+      type="secondary"
     >
       Secure File Upload
-    </a>
+    </Button>
   </article>
 );
 
diff --git a/libs/tup-components/src/accounts/ManageAccountMfa.tsx b/libs/tup-components/src/accounts/ManageAccountMfa.tsx
@@ -44,18 +44,28 @@ export const AccountMfa: React.FC = () => {
         Set up multi-factor authentication using a token app or SMS.
       </p>
       {!hasPairing && (
-        <Link to="/mfa" className={styles['tap-href']}>
-          <Button type="primary">Pair Device</Button>
-        </Link>
+        <Button
+          as={Link}
+          to="/mfa"
+          className={styles['tap-href']}
+          type="primary"
+        >
+          Pair Device
+        </Button>
       )}
       {hasPairing && data.token && (
         <div className={styles['mfa-options']}>
           <p>
             {TOKEN_TYPE[data.token.tokentype]} ({data.token.serial})
           </p>
-          <Link to="/mfa/unpair" className={styles['tap-href']}>
-            <Button type="secondary">Unpair</Button>
-          </Link>
+          <Button
+            as={Link}
+            to="/mfa/unpair"
+            className={styles['tap-href']}
+            type="secondary"
+          >
+            Unpair
+          </Button>
         </div>
       )}
     </article>
diff --git a/libs/tup-components/src/mfa/MfaSelection.tsx b/libs/tup-components/src/mfa/MfaSelection.tsx
diff --git a/libs/tup-components/src/projects/details/ProjectDetails.tsx b/libs/tup-components/src/projects/details/ProjectDetails.tsx
diff --git a/libs/tup-components/src/projects/users/UserList/ManageTeam.tsx b/libs/tup-components/src/projects/users/UserList/ManageTeam.tsx
