Feat/18889/update buttonlink ts (#20372)

* fix buttonlink alignment

* ButtonLink TS migration

* fix lint

* remove ButtonBase loading error feat

* move padding 0 to ButtonBase

* fix color issue

* fix test file

* fix snapshot

* Update ui/components/component-library/button-link/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* readme fix

* Update ui/components/component-library/button-link/button-link.stories.tsx

Co-authored-by: George Marshall <george.marshall@consensys.net>

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -50,7 +50,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
         value="7"
       />
       <button
-        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="custom-spending-cap-max-button"
       >
         Max
@@ -74,7 +74,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
       </span>
     </div>
     <a
-      class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+      class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
       rel="noopener noreferrer"
       target="_blank"

ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap

@@ -37,7 +37,7 @@ exports[`LedgerInstructionField Component rendering should render properly with
             >
               <span>
                 <button
-                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                 >
                   Go to full screen to connect your Ledger.
                 </button>

ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap

@@ -37,7 +37,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
           >
             This is an advanced feature, use cautiously.
             <a
-              class="mm-box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+              class="mm-box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="https://metamask.zendesk.com/hc/en-us/articles/7417499333531-How-to-customize-a-transaction-nonce"
               rel="noopener noreferrer"
               target="_blank"
@@ -61,7 +61,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
               class="mm-box mm-box--width-1/6"
             >
               <button
-                class="mm-box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                class="mm-box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                 data-testid="customize-nonce-reset"
               >
                 Reset

ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap

@@ -32,7 +32,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
     >
       Allowing eth_sign requests can make you vulnerable to phishing attacks. Always review the URL and be careful when signing  messages that contain code.
       <a
-        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         href="https://support.metamask.io/hc/en-us/articles/14764161421467"
         rel="noopener noreferrer"
         target="_blank"
@@ -77,12 +77,12 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
       class="box box--margin-top-6 box--display-flex box--gap-4 box--flex-direction-row box--justify-content-space-between"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
       >
         Cancel
       </button>
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         disabled=""
       >
         Continue

ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap

@@ -120,13 +120,13 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
         class="box box--margin-top-3 box--padding-5 box--md:padding-5 box--display-flex box--flex-direction-row box--justify-content-space-between box--width-full"
       >
         <button
-          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           type="secondary"
         >
           Cancel
         </button>
         <button
-          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           disabled=""
           type="primary"
         >

ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap

@@ -31,7 +31,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
          
         Security advice by 
         <a
-          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://blockaid.io/"
           rel="noopener noreferrer"
           target="_blank"
@@ -77,7 +77,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
          
         Security advice by 
         <a
-          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://blockaid.io/"
           rel="noopener noreferrer"
           target="_blank"
@@ -162,7 +162,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
            
           Security advice by 
           <a
-            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
             href="https://blockaid.io/"
             rel="noopener noreferrer"
             target="_blank"

ui/components/app/security-provider-banner-alert/security-provider-banner-alert.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Severity } from '../../../helpers/constants/design-system';
-import { ButtonLink, BUTTON_LINK_SIZES, Text } from '../../component-library';
+import { ButtonLink, ButtonLinkSize, Text } from '../../component-library';
 import { SecurityProvider } from '../../../../shared/constants/security-provider';
 import SecurityProviderBannerAlert from './security-provider-banner-alert';
 
@@ -11,7 +11,7 @@ const mockPlainText =
 const MockDescriptionWithLinks = () => (
   <>
     Description shouldn’t repeat title. 1-3 lines. Can contain a{' '}
-    <ButtonLink size={BUTTON_LINK_SIZES.INHERIT}>hyperlink</ButtonLink>. It can
+    <ButtonLink size={ButtonLinkSize.Inherit}>hyperlink</ButtonLink>. It can
     also contain a toggle to enable progressive disclosure.
   </>
 );

ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap

@@ -208,7 +208,7 @@ exports[`Signature Request Component render should match snapshot when we are us
       </h6>
       <div>
         <button
-          class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="verify-contract-details"
         >
           <span
@@ -766,7 +766,7 @@ exports[`Signature Request Component render should match snapshot when we are us
       </footer>
     </div>
     <button
-      class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+      class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       data-testid="signature-request-reject-all"
     >
       Reject 2 requests
@@ -983,7 +983,7 @@ exports[`Signature Request Component render should match snapshot when we want t
       </h6>
       <div>
         <button
-          class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="verify-contract-details"
         >
           <span
@@ -1541,7 +1541,7 @@ exports[`Signature Request Component render should match snapshot when we want t
       </footer>
     </div>
     <button
-      class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+      class="mm-box mm-text mm-button-base signature-request__reject-all-button mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       data-testid="signature-request-reject-all"
     >
       Reject 2 requests

ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js

@@ -6,10 +6,10 @@ import Popover from '../../../ui/popover';
 import {
   AvatarIcon,
   Button,
-  BUTTON_LINK_SIZES,
   BUTTON_SIZES,
   BUTTON_VARIANT,
   ButtonLink,
+  ButtonLinkSize,
   IconName,
   IconSize,
   Text,
@@ -79,7 +79,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
               {t('snapsPrivacyWarningFirstMessage', [
                 <ButtonLink
                   key="privacyNoticeTermsOfUseLink"
-                  size={BUTTON_LINK_SIZES.INHERIT}
+                  size={ButtonLinkSize.Inherit}
                   href={TERMS_OF_USE_LINK}
                   target="_blank"
                 >

ui/components/component-library/avatar-token/avatar-token.stories.tsx

@@ -13,7 +13,7 @@ import {
   BadgeWrapper,
   Box,
   ButtonLink,
-  BUTTON_LINK_SIZES,
+  ButtonLinkSize,
   Text,
 } from '..';
 import README from './README.mdx';
@@ -98,14 +98,14 @@ export const SizeStory: StoryFn<typeof AvatarToken> = (args) => (
     <Text marginBottom={4}>
       Sizes with{' '}
       <ButtonLink
-        size={BUTTON_LINK_SIZES.INHERIT}
+        size={ButtonLinkSize.Inherit}
         href="/docs/components-componentlibrary-buttonlink--default-story"
       >
         AvatarNetwork
       </ButtonLink>{' '}
       and{' '}
       <ButtonLink
-        size={BUTTON_LINK_SIZES.INHERIT}
+        size={ButtonLinkSize.Inherit}
         href="/docs/components-componentlibrary-badgewrapper--default-story"
       >
         BadgeWrapper

ui/components/component-library/button-base/__snapshots__/button-base.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ButtonBase should render anchor element correctly by href and externalLink, href target and rel exist 1`] = `
 <div>
   <a
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
     data-testid="button-base"
     href="https://www.test.com/"
     rel="noopener noreferrer"
@@ -17,7 +17,7 @@ exports[`ButtonBase should render anchor element correctly by href and externalL
 exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
     data-testid="button-base"
   >
     Button base

ui/components/component-library/button-base/button-base.tsx

@@ -58,6 +58,7 @@ export const ButtonBase: ButtonBaseComponent = React.forwardRef(
         {...(href && externalLink
           ? { target: '_blank', rel: 'noopener noreferrer' }
           : {})}
+        padding={0}
         paddingLeft={4}
         paddingRight={4}
         ellipsis={ellipsis}

ui/components/component-library/button-link/README.mdx

@@ -13,8 +13,6 @@ The `ButtonLink` is an extension of `ButtonBase` to support link styles
 
 ## Props
 
-The `ButtonLink` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) and [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
-
 <ArgsTable of={ButtonLink} />
 
 The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
@@ -23,52 +21,49 @@ The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-butt
 
 ### Size
 
-Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `Size.auto`.
+Use the `size` prop and the `ButtonLinkSize` enum from `./ui/components/component-library` to change the size of `ButtonLink`. Defaults to `ButtonLinkSize.Auto`
-
-Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `Size`
 
 Possible sizes include:
 
-- `Size.auto` sets the height to auto but retains `ButtonLink` font-size
+- `ButtonLinkSize.Auto` sets the height to auto but retains `ButtonLink` font-size
-- `Size.SM` 32px
+- `ButtonLinkSize.Sm` 32px
-- `Size.MD` 40px
+- `ButtonLinkSize.Md` 40px
-- `Size.LG` 48px
+- `ButtonLinkSize.Lg` 48px
-- `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.
+- `ButtonLinkSize.Inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.
 
 <Canvas>
   <Story id="components-componentlibrary-buttonlink--size-story" />
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
+import { ButtonLink, ButtonLinkSize, Text, TextVariant } from '../../component-library';
-import { ButtonLink, Text, TextVariant } from '../../component-library';
 
-<ButtonLink size={Size.auto}>
+<ButtonLink size={ButtonLinkSize.Auto}>
   Auto (default)
 </ButtonLink>
-<ButtonLink size={Size.SM}>
+<ButtonLink size={ButtonLinkSize.Sm}>
   Small
 </ButtonLink>
-<ButtonLink size={Size.MD}>
+<ButtonLink size={ButtonLinkSize.Md}>
   Medium
 </ButtonLink>
-<ButtonLink size={Size.LG}>
+<ButtonLink size={ButtonLinkSize.Lg}>
   Large
 </ButtonLink>
 
 <Text variant={TextVariant.bodyLgMedium}>
-  Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
+  Inherits the font-size of the parent element. <ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
 </Text>
 <Text variant={TextVariant.bodyMd}>
-  Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
+  Inherits the font-size of the parent element. <ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
 </Text>
 <Text variant={TextVariant.bodySm}>
-  Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
+  Inherits the font-size of the parent element. <ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
 </Text>
 
 <Text variant={TextVariant.bodyXs}>
   Inherits the font-size of the parent element and example with override for a success color.
-   <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
+   <ButtonLink size={ButtonLinkSize.Inherit}>Learn more</ButtonLink>
 </Text>
 ```
 
@@ -121,28 +116,28 @@ import { ButtonLink } from '../../component-library';
 
 ### Hit area
 
-The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `Size.auto` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
+The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `ButtonLinkSize.Auto` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
 
 <Canvas>
   <Story id="components-componentlibrary-buttonlink--hit-area" />
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../../component-library';
+import { ButtonLink, ButtonLinkSize } from '../../component-library';
 
 <ButtonLink paddingLeft={4} paddingRight={4}>
   Auto (default)
 </ButtonLink>
-<ButtonLink size={Size.SM} paddingLeft={4} paddingRight={4}>
+<ButtonLink size={ButtonLinkSize.Sm} paddingLeft={4} paddingRight={4}>
   Small
 </ButtonLink>
-<ButtonLink size={Size.MD} paddingLeft={4} paddingRight={4}>
+<ButtonLink size={ButtonLinkSize.Md} paddingLeft={4} paddingRight={4}>
   Medium
 </ButtonLink>
-<ButtonLink size={Size.LG} paddingLeft={4} paddingRight={4}>
+<ButtonLink size={ButtonLinkSize.Lg} paddingLeft={4} paddingRight={4}>
   Large
 </ButtonLink>
-<ButtonLink size={Size.LG} block>
+<ButtonLink size={ButtonLinkSize.Lg} block>
   Large block
 </ButtonLink>
 ```

ui/components/component-library/button-link/__snapshots__/button-link.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ButtonLink should render button element correctly 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+    class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
     data-testid="button-link"
   >
     Button Link

ui/components/component-library/button-link/button-link.constants.js

@@ -1,9 +0,0 @@
-import { Size } from '../../../helpers/constants/design-system';
-
-export const BUTTON_LINK_SIZES = {
-  SM: Size.SM,
-  MD: Size.MD,
-  LG: Size.LG,
-  AUTO: Size.auto,
-  INHERIT: Size.inherit,
-};

ui/components/component-library/button-link/button-link.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import { ButtonBase } from '../button-base';
-import {
-  BackgroundColor,
-  Color,
-  Size,
-} from '../../../helpers/constants/design-system';
-import { BUTTON_LINK_SIZES } from './button-link.constants';
-
-export const ButtonLink = ({
-  className,
-  danger,
-  disabled,
-  size = Size.auto,
-  ...props
-}) => {
-  return (
-    <ButtonBase
-      className={classnames(className, 'mm-button-link', {
-        'mm-button-link--type-danger': danger,
-        'mm-button-link--disabled': disabled,
-        'mm-button-link--size-inherit': size === BUTTON_LINK_SIZES.INHERIT,
-        'mm-button-link--size-auto': size === BUTTON_LINK_SIZES.AUTO,
-      })}
-      paddingLeft={0}
-      paddingRight={0}
-      size={size === BUTTON_LINK_SIZES.INHERIT ? null : size}
-      backgroundColor={BackgroundColor.transparent}
-      color={danger ? Color.errorDefault : Color.primaryDefault}
-      borderRadius={null}
-      startIconProps={{
-        size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.SM,
-      }}
-      endIconProps={{
-        size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.SM,
-      }}
-      iconLoadingProps={{
-        size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.MD,
-      }}
-      {...{ disabled, ...props }}
-    />
-  );
-};
-
-ButtonLink.propTypes = {
-  /**
-   * An additional className to apply to the ButtonLink.
-   */
-  className: PropTypes.string,
-  /**
-   * Boolean to change button type to Danger when true
-   */
-  danger: PropTypes.bool,
-  /**
-   * Boolean to disable button
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Possible size values: 'SIZES.AUTO'(auto), 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px), 'SIZES.INHERIT'(inherits parents font-size)
-   * Default value is 'SIZES.AUTO'.
-   */
-  size: PropTypes.oneOf(Object.values(BUTTON_LINK_SIZES)),
-  /**
-   * ButtonLink accepts all the props from ButtonBase
-   */
-  ...ButtonBase.propTypes,
-};

ui/components/component-library/button-link/button-link.scss

@@ -16,7 +16,7 @@
     }
   }
 
-  &--type-danger {
+  &--type-danger:not(&--disabled) {
     &:hover {
       color: var(--color-error-default);
     }
@@ -49,4 +49,8 @@
     text-decoration-thickness: auto;
     text-underline-offset: 2px;
   }
+
+  &--loading:hover:not(&--disabled) {
+    text-decoration: none;
+  }
 }

ui/components/component-library/button-link/button-link.stories.js

@@ -1,256 +0,0 @@
-import React from 'react';
-import {
-  AlignItems,
-  BorderColor,
-  BorderStyle,
-  DISPLAY,
-  Size,
-  TextVariant,
-  TextColor,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { IconName } from '..';
-import { Text } from '../text';
-import { ButtonLink } from './button-link';
-import { BUTTON_LINK_SIZES } from './button-link.constants';
-import README from './README.mdx';
-
-const marginSizeControlOptions = [
-  undefined,
-  0,
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  'auto',
-];
-
-export default {
-  title: 'Components/ComponentLibrary/ButtonLink',
-
-  component: ButtonLink,
-  parameters: {
-    docs: {
-      page: README,
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: ['button', 'a'],
-      table: { category: 'button base props' },
-    },
-    block: {
-      control: 'boolean',
-      table: { category: 'button base props' },
-    },
-    children: {
-      control: 'text',
-    },
-    className: {
-      control: 'text',
-    },
-    danger: {
-      control: 'boolean',
-    },
-    disabled: {
-      control: 'boolean',
-      table: { category: 'button base props' },
-    },
-    href: {
-      control: 'text',
-    },
-    externalLink: {
-      control: 'boolean',
-    },
-    startIconName: {
-      control: 'select',
-      options: Object.values(IconName),
-      table: { category: 'button base props' },
-    },
-    endIconName: {
-      control: 'select',
-      options: Object.values(IconName),
-      table: { category: 'button base props' },
-    },
-    startIconProps: {
-      control: 'object',
-      table: { category: 'button base props' },
-    },
-    endIconProps: {
-      control: 'object',
-      table: { category: 'button base props' },
-    },
-    loading: {
-      control: 'boolean',
-      table: { category: 'button base props' },
-    },
-    size: {
-      control: 'select',
-      options: Object.values(BUTTON_LINK_SIZES),
-    },
-    marginTop: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginRight: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginBottom: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginLeft: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-  },
-  args: {
-    children: 'Button Link',
-  },
-};
-
-export const DefaultStory = (args) => <ButtonLink {...args} />;
-
-DefaultStory.storyName = 'Default';
-
-export const SizeStory = (args) => (
-  <>
-    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexStart} gap={4}>
-      <ButtonLink {...args} size={Size.auto}>
-        Auto (default)
-      </ButtonLink>
-      <ButtonLink {...args} size={Size.SM}>
-        Small
-      </ButtonLink>
-      <ButtonLink {...args} size={Size.MD}>
-        Medium
-      </ButtonLink>
-      <ButtonLink {...args} size={Size.LG}>
-        Large
-      </ButtonLink>
-    </Box>
-    <Text variant={TextVariant.bodyLgMedium}>
-      Inherits the font-size of the parent element.{' '}
-      <ButtonLink {...args} size={Size.inherit}>
-        Learn more
-      </ButtonLink>
-    </Text>
-    <Text variant={TextVariant.bodyMd}>
-      Inherits the font-size of the parent element.{' '}
-      <ButtonLink {...args} size={Size.inherit}>
-        Learn more
-      </ButtonLink>
-    </Text>
-    <Text variant={TextVariant.bodySm}>
-      Inherits the font-size of the parent element.{' '}
-      <ButtonLink {...args} size={Size.inherit}>
-        Learn more
-      </ButtonLink>
-    </Text>
-    <Text variant={TextVariant.bodyXs}>
-      Inherits the font-size of the parent element and example with override for
-      a success color.{' '}
-      <ButtonLink
-        {...args}
-        size={Size.inherit}
-        color={TextColor.successDefault}
-      >
-        Learn more
-      </ButtonLink>
-    </Text>
-  </>
-);
-SizeStory.storyName = 'Size';
-
-export const Danger = (args) => (
-  <Box display={DISPLAY.FLEX} gap={4}>
-    <ButtonLink {...args}>Normal</ButtonLink>
-    {/* Test Anchor tag to match exactly as button */}
-    <ButtonLink as="a" {...args} href="#" danger>
-      Danger
-    </ButtonLink>
-  </Box>
-);
-
-export const Href = (args) => <ButtonLink {...args}>Href example</ButtonLink>;
-
-Href.args = {
-  href: '/metamask',
-};
-
-export const ExternalLink = (args) => (
-  <ButtonLink {...args}>Anchor element with external link</ButtonLink>
-);
-
-ExternalLink.args = {
-  href: 'https://metamask.io/',
-  externalLink: true,
-};
-
-export const HitArea = (args) => (
-  <>
-    <Text marginBottom={4}>Default</Text>
-    <Box
-      display={DISPLAY.FLEX}
-      alignItems={AlignItems.flexStart}
-      gap={4}
-      marginBottom={4}
-    >
-      <ButtonLink {...args} size={Size.auto}>
-        Auto (default)
-      </ButtonLink>
-      <ButtonLink {...args} size={Size.SM}>
-        Small
-      </ButtonLink>
-      <ButtonLink {...args} size={Size.MD}>
-        Medium
-      </ButtonLink>
-      <ButtonLink {...args} size={Size.LG}>
-        Large
-      </ButtonLink>
-    </Box>
-    <Text marginBottom={4}>Add paddingLeft and paddingRight props</Text>
-    <Box
-      display={DISPLAY.FLEX}
-      alignItems={AlignItems.flexStart}
-      gap={4}
-      marginBottom={4}
-    >
-      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.auto}>
-        Auto (default)
-      </ButtonLink>
-      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.SM}>
-        Small
-      </ButtonLink>
-      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.MD}>
-        Medium
-      </ButtonLink>
-      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={Size.LG}>
-        Large
-      </ButtonLink>
-    </Box>
-    <Text marginBottom={4}>Add block prop</Text>
-    <ButtonLink {...args} size={Size.LG} block>
-      Large block
-    </ButtonLink>
-  </>
-);
-
-HitArea.args = {
-  borderColor: BorderColor.errorDefault,
-  borderStyle: BorderStyle.dashed,
-};

ui/components/component-library/button-link/button-link.stories.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import {
+  AlignItems,
+  BorderColor,
+  BorderStyle,
+  Display,
+  TextVariant,
+  TextColor,
+} from '../../../helpers/constants/design-system';
+import { Box, Text } from '..';
+import README from './README.mdx';
+import { ButtonLink, ButtonLinkSize } from '.';
+
+export default {
+  title: 'Components/ComponentLibrary/ButtonLink',
+  component: ButtonLink,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
+    children: {
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+    },
+    danger: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: Object.values(ButtonLinkSize),
+    },
+  },
+  args: {
+    children: 'Button Link',
+  },
+} as Meta<typeof ButtonLink>;
+
+export const DefaultStory: StoryFn<typeof ButtonLink> = (args) => (
+  <ButtonLink {...args} />
+);
+
+DefaultStory.storyName = 'Default';
+
+export const SizeStory: StoryFn<typeof ButtonLink> = (args) => (
+  <>
+    <Box display={Display.Flex} alignItems={AlignItems.flexStart} gap={4}>
+      <ButtonLink {...args} size={ButtonLinkSize.Auto}>
+        Auto (default)
+      </ButtonLink>
+      <ButtonLink {...args} size={ButtonLinkSize.Sm}>
+        Small
+      </ButtonLink>
+      <ButtonLink {...args} size={ButtonLinkSize.Md}>
+        Medium
+      </ButtonLink>
+      <ButtonLink {...args} size={ButtonLinkSize.Lg}>
+        Large
+      </ButtonLink>
+    </Box>
+    <Text variant={TextVariant.bodyLgMedium}>
+      Inherits the font-size of the parent element.{' '}
+      <ButtonLink {...args} size={ButtonLinkSize.Inherit}>
+        Learn more
+      </ButtonLink>
+    </Text>
+    <Text variant={TextVariant.bodyMd}>
+      Inherits the font-size of the parent element.{' '}
+      <ButtonLink {...args} size={ButtonLinkSize.Inherit}>
+        Learn more
+      </ButtonLink>
+    </Text>
+    <Text variant={TextVariant.bodySm}>
+      Inherits the font-size of the parent element.{' '}
+      <ButtonLink {...args} size={ButtonLinkSize.Inherit}>
+        Learn more
+      </ButtonLink>
+    </Text>
+    <Text variant={TextVariant.bodyXs}>
+      Inherits the font-size of the parent element and example with override for
+      a success color.{' '}
+      <ButtonLink
+        {...args}
+        size={ButtonLinkSize.Inherit}
+        color={TextColor.successDefault}
+      >
+        Learn more
+      </ButtonLink>
+    </Text>
+  </>
+);
+SizeStory.storyName = 'Size';
+
+export const Danger: StoryFn<typeof ButtonLink> = (args) => (
+  <Box display={Display.Flex} gap={4}>
+    <ButtonLink {...args}>Normal</ButtonLink>
+    {/* Test Anchor tag to match exactly as button */}
+    <ButtonLink as="a" {...args} href="#" danger>
+      Danger
+    </ButtonLink>
+  </Box>
+);
+
+export const Href: StoryFn<typeof ButtonLink> = (args) => (
+  <ButtonLink {...args}>Href example</ButtonLink>
+);
+
+Href.args = {
+  href: '/metamask',
+};
+
+export const ExternalLink: StoryFn<typeof ButtonLink> = (args) => (
+  <ButtonLink {...args}>Anchor element with external link</ButtonLink>
+);
+
+ExternalLink.args = {
+  href: 'https://metamask.io/',
+  externalLink: true,
+};
+
+export const HitArea: StoryFn<typeof ButtonLink> = (args) => (
+  <>
+    <Text marginBottom={4}>Default</Text>
+    <Box
+      display={Display.Flex}
+      alignItems={AlignItems.flexStart}
+      gap={4}
+      marginBottom={4}
+    >
+      <ButtonLink {...args} size={ButtonLinkSize.Auto}>
+        Auto (default)
+      </ButtonLink>
+      <ButtonLink {...args} size={ButtonLinkSize.Sm}>
+        Small
+      </ButtonLink>
+      <ButtonLink {...args} size={ButtonLinkSize.Md}>
+        Medium
+      </ButtonLink>
+      <ButtonLink {...args} size={ButtonLinkSize.Lg}>
+        Large
+      </ButtonLink>
+    </Box>
+    <Text marginBottom={4}>Add paddingLeft and paddingRight props</Text>
+    <Box
+      display={Display.Flex}
+      alignItems={AlignItems.flexStart}
+      gap={4}
+      marginBottom={4}
+    >
+      <ButtonLink
+        {...args}
+        paddingLeft={4}
+        paddingRight={4}
+        size={ButtonLinkSize.Auto}
+      >
+        Auto (default)
+      </ButtonLink>
+      <ButtonLink
+        {...args}
+        paddingLeft={4}
+        paddingRight={4}
+        size={ButtonLinkSize.Sm}
+      >
+        Small
+      </ButtonLink>
+      <ButtonLink
+        {...args}
+        paddingLeft={4}
+        paddingRight={4}
+        size={ButtonLinkSize.Md}
+      >
+        Medium
+      </ButtonLink>
+      <ButtonLink
+        {...args}
+        paddingLeft={4}
+        paddingRight={4}
+        size={ButtonLinkSize.Lg}
+      >
+        Large
+      </ButtonLink>
+    </Box>
+    <Text marginBottom={4}>Add block prop</Text>
+    <ButtonLink {...args} size={ButtonLinkSize.Lg} block>
+      Large block
+    </ButtonLink>
+  </>
+);
+
+HitArea.args = {
+  borderColor: BorderColor.errorDefault,
+  borderStyle: BorderStyle.dashed,
+};

ui/components/component-library/button-link/button-link.test.tsx

@@ -1,10 +1,8 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { Size } from '../../../helpers/constants/design-system';
 import { IconName } from '..';
-import { ButtonLink } from './button-link';
+import { ButtonLink, ButtonLinkSize } from '.';
-import { BUTTON_LINK_SIZES } from './button-link.constants';
 
 describe('ButtonLink', () => {
   it('should render button element correctly', () => {
@@ -41,22 +39,28 @@ describe('ButtonLink', () => {
   it('should render with different size classes', () => {
     const { getByTestId } = render(
       <>
-        <ButtonLink size={Size.SM} data-testid={Size.SM} />
+        <ButtonLink size={ButtonLinkSize.Sm} data-testid={ButtonLinkSize.Sm} />
-        <ButtonLink size={Size.MD} data-testid={Size.MD} />
+        <ButtonLink size={ButtonLinkSize.Md} data-testid={ButtonLinkSize.Md} />
-        <ButtonLink size={Size.LG} data-testid={Size.LG} />
+        <ButtonLink size={ButtonLinkSize.Lg} data-testid={ButtonLinkSize.Lg} />
       </>,
     );
 
-    expect(getByTestId(Size.SM)).toHaveClass(`mm-button-base--size-${Size.SM}`);
+    expect(getByTestId(ButtonLinkSize.Sm)).toHaveClass(
-    expect(getByTestId(Size.MD)).toHaveClass(`mm-button-base--size-${Size.MD}`);
+      `mm-button-base--size-${ButtonLinkSize.Sm}`,
-    expect(getByTestId(Size.LG)).toHaveClass(`mm-button-base--size-${Size.LG}`);
+    );
+    expect(getByTestId(ButtonLinkSize.Md)).toHaveClass(
+      `mm-button-base--size-${ButtonLinkSize.Md}`,
+    );
+    expect(getByTestId(ButtonLinkSize.Lg)).toHaveClass(
+      `mm-button-base--size-${ButtonLinkSize.Lg}`,
+    );
   });
 
   it('should render ButtonLink inherit size', () => {
     const { getByTestId } = render(
-      <ButtonLink size={BUTTON_LINK_SIZES.INHERIT} data-testid="inherit" />,
+      <ButtonLink size={ButtonLinkSize.Inherit} data-testid="inherit" />,
     );
-    // Different size classname compared to Size.SM, Size.MD, Size.LG
+    // Different size classname compared to ButtonLinkSize.Sm, ButtonLinkSize.Md, ButtonLinkSize.Lg
     expect(getByTestId('inherit')).toHaveClass(`mm-button-link--size-inherit`);
   });
 

ui/components/component-library/button-link/button-link.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import classnames from 'classnames';
+import { ButtonBase, IconSize } from '..';
+import {
+  BackgroundColor,
+  Color,
+} from '../../../helpers/constants/design-system';
+import type { PolymorphicRef } from '../box';
+import type { ButtonBaseProps } from '../button-base';
+import type { ButtonLinkProps } from './button-link.types';
+import { ButtonLinkSize, ButtonLinkComponent } from './button-link.types';
+
+export const ButtonLink: ButtonLinkComponent = React.forwardRef(
+  <C extends React.ElementType = 'button' | 'a'>(
+    {
+      className,
+      color,
+      danger,
+      disabled,
+      loading,
+      size = ButtonLinkSize.Auto,
+      ...props
+    }: ButtonLinkProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    return (
+      <ButtonBase
+        className={classnames(className, 'mm-button-link', {
+          'mm-button-link--type-danger': danger,
+          'mm-button-link--disabled': disabled,
+          'mm-button-link--loading': loading,
+          'mm-button-link--size-inherit': size === ButtonLinkSize.Inherit,
+          'mm-button-link--size-auto': size === ButtonLinkSize.Auto,
+        })}
+        paddingLeft={0}
+        paddingRight={0}
+        size={size === ButtonLinkSize.Inherit ? null : size}
+        backgroundColor={BackgroundColor.transparent}
+        color={color || (danger ? Color.errorDefault : Color.primaryDefault)}
+        borderRadius={null}
+        startIconProps={{
+          size:
+            size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
+        }}
+        endIconProps={{
+          size:
+            size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
+        }}
+        iconLoadingProps={{
+          size:
+            size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Md,
+          color: color || (danger ? Color.errorDefault : Color.primaryDefault),
+        }}
+        ref={ref}
+        {...{ disabled, loading, ...(props as ButtonBaseProps<C>) }}
+      />
+    );
+  },
+);

ui/components/component-library/button-link/button-link.types.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import type { PolymorphicComponentPropWithRef } from '../box';
+import type { ButtonBaseStyleUtilityProps } from '../button-base/button-base.types';
+
+export enum ButtonLinkSize {
+  Auto = 'auto',
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+  Inherit = 'inherit',
+}
+
+export interface ButtonLinkStyleUtilityProps
+  extends Omit<ButtonBaseStyleUtilityProps, 'size'> {
+  /**
+   * Boolean to change button type to Danger when true
+   */
+  danger: boolean;
+  /**
+   * Boolean to disable button
+   */
+  disabled: boolean;
+  /**
+   * Boolean to show loading spinner in button
+   */
+  loading: boolean;
+  /**
+   * Possible size values: 'ButtonLinkSize.Auto'(auto), 'ButtonLinkSize.Sm'(32px), 'ButtonLinkSize.Md'(40px), 'ButtonLinkSize.Lg'(48px), 'ButtonLinkSize.Inherit'(inherits parents font-size)
+   * Default value is 'ButtonLinkSize.Auto'.
+   */
+  size: ButtonLinkSize;
+}
+
+export type ButtonLinkProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, ButtonLinkStyleUtilityProps>;
+
+export type ButtonLinkComponent = <
+  C extends React.ElementType = 'button' | 'a',
+>(
+  props: ButtonLinkProps<C>,
+) => React.ReactElement | null;

ui/components/component-library/button-link/index.js

@@ -1,2 +0,0 @@
-export { ButtonLink } from './button-link';
-export { BUTTON_LINK_SIZES } from './button-link.constants';

ui/components/component-library/button-link/index.ts

@@ -0,0 +1,3 @@
+export { ButtonLink } from './button-link';
+export { ButtonLinkSize } from './button-link.types';
+export type { ButtonLinkProps } from './button-link.types';

ui/components/component-library/button-primary/__snapshots__/button-primary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ButtonPrimary should render button element correctly 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
     data-testid="button-primary"
   >
     Button Primary

ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap

@@ -3,7 +3,7 @@
 exports[`ButtonSecondary should render button element correctly 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
     data-testid="button-secondary"
   >
     Button Secondary

ui/components/component-library/button/__snapshots__/button.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Button should render button element correctly 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
     data-testid="button"
   >
     Button
@@ -14,19 +14,19 @@ exports[`Button should render button element correctly 1`] = `
 exports[`Button should render with different button types 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
     data-testid="primary"
   >
     Button
   </button>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
     data-testid="secondary"
   >
     Button
   </button>
   <button
-    class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+    class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
     data-testid="link"
   >
     Button

ui/components/component-library/button/button.stories.js

@@ -7,7 +7,7 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { IconName } from '..';
-import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
+import { ButtonLinkSize } from '../button-link';
 import Box from '../../ui/box/box';
 import { Text } from '../text';
 import README from './README.mdx';
@@ -83,7 +83,7 @@ export default {
     },
     size: {
       control: 'select',
-      options: Object.values(BUTTON_LINK_SIZES),
+      options: Object.values(ButtonLinkSize),
     },
     variant: {
       options: Object.values(BUTTON_VARIANT),

ui/components/component-library/icon/icon.stories.tsx

@@ -13,19 +13,20 @@ import {
   BackgroundColor,
   BorderColor,
   Color,
+  TextColor,
   BorderRadius,
 } from '../../../helpers/constants/design-system';
 
 import {
   ButtonIcon,
   ButtonLink,
+  ButtonLinkSize,
   Label,
   Text,
   TextField,
   TextFieldSearch,
   TEXT_FIELD_SIZES,
   ButtonIconSize,
-  BUTTON_LINK_SIZES,
   Box,
 } from '..';
 
@@ -153,8 +154,8 @@ export const DefaultStory: StoryFn<typeof Icon> = (args) => {
         <Text>
           No matches. Please try again or ask in the{' '}
           <ButtonLink
-            size={BUTTON_LINK_SIZES.INHERIT}
+            size={ButtonLinkSize.Inherit}
-            color={Color.primaryDefault}
+            color={TextColor.primaryDefault}
             href="https://consensys.slack.com/archives/C0354T27M5M"
             target="_blank"
           >

ui/components/component-library/index.js

@@ -18,7 +18,7 @@ export { Box } from './box';
 export { Button, BUTTON_VARIANT, BUTTON_SIZES } from './button';
 export { ButtonBase, ButtonBaseSize } from './button-base';
 export { ButtonIcon, ButtonIconSize } from './button-icon';
-export { ButtonLink, BUTTON_LINK_SIZES } from './button-link';
+export { ButtonLink, ButtonLinkSize } from './button-link';
 export { ButtonPrimary, ButtonPrimarySize } from './button-primary';
 export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary';
 export { Checkbox } from './checkbox';

ui/components/component-library/modal/modal.stories.tsx

@@ -13,7 +13,7 @@ import {
   Text,
   Button,
   ButtonLink,
-  BUTTON_LINK_SIZES,
+  ButtonLinkSize,
   TextFieldSearch,
   IconName,
 } from '..';
@@ -72,7 +72,7 @@ export default {
 const LoremIpsum = (props) => (
   <Text marginBottom={8} {...props}>
     Lorem ipsum dolor sit amet, conse{' '}
-    <ButtonLink size={BUTTON_LINK_SIZES.INHERIT}>
+    <ButtonLink size={ButtonLinkSize.Inherit}>
       random focusable button
     </ButtonLink>{' '}
     ctetur adipiscing elit. Phasellus posuere nunc enim, quis efficitur dolor
@@ -127,7 +127,7 @@ const Template: ComponentStory<typeof Modal> = (args) => {
               showLoremIpsum ? IconName.Arrow2Up : IconName.Arrow2Down
             }
             onClick={handleMoreContent}
-            size={BUTTON_LINK_SIZES.INHERIT}
+            size={ButtonLinkSize.Inherit}
             marginBottom={2}
           >
             {showMoreModalContent ? 'Hide' : 'Show more'}

ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap

@@ -3,7 +3,7 @@
 exports[`AccountPicker renders properly 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
     data-testid="account-menu-icon"
   >
     <span

ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap

@@ -228,7 +228,7 @@ exports[`App Header should match snapshot 1`] = `
         </button>
       </div>
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
         data-testid="account-menu-icon"
       >
         <span

ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap

@@ -17,7 +17,7 @@ exports[`DetectedTokensBanner should render correctly 1`] = `
         3 new tokens found in this account
       </p>
       <button
-        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       >
         Import tokens
       </button>

ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Json should match snapshot 1`] = `
   >
     Used by a variety of different clients
     <a
-      class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+      class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"
       rel="noopener noreferrer"
       target="_blank"
@@ -43,12 +43,12 @@ exports[`Json should match snapshot 1`] = `
     class="mm-box mm-box--display-flex mm-box--gap-4"
   >
     <button
-      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
     >
       Cancel
     </button>
     <button
-      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
       data-testid="import-account-confirm-button"
       disabled=""
     >

ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap

@@ -9,7 +9,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
       class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="import-token-button"
       >
         <span
@@ -23,7 +23,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
       class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="refresh-list-button"
       >
         <span
@@ -46,7 +46,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
       class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="import-token-button"
       >
         <span
@@ -60,7 +60,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
       class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="refresh-list-button"
       >
         <span

ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap

@@ -140,7 +140,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>
@@ -325,7 +325,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>
@@ -510,7 +510,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>
@@ -695,7 +695,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>

ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap

@@ -207,7 +207,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
       </h6>
       <div>
         <button
-          class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base signature-request-content__verify-contract-details mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="verify-contract-details"
         >
           <span

ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap

@@ -112,7 +112,7 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
       </button>
     </div>
     <button
-      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled hw-connect__connect-btn mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled hw-connect__connect-btn mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
       disabled=""
     >
       Continue

ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap

@@ -156,7 +156,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
       class="box box--flex-direction-row"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
       >
         Done
       </button>

ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap

@@ -46,7 +46,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
                 class="mm-box mm-text custody-account-list__item mm-text--body-md mm-box--display-flex mm-box--color-text-default"
               >
                 <a
-                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                   href="https://etherscan.io/address/0x1234567890123456789012345678901234567890"
                   rel="noopener noreferrer"
                   target="_blank"
@@ -121,7 +121,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
                 class="mm-box mm-text custody-account-list__item mm-text--body-md mm-box--display-flex mm-box--color-text-default"
               >
                 <a
-                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                   href="https://etherscan.io/address/0x0987654321098765432109876543210987654321"
                   rel="noopener noreferrer"
                   target="_blank"
@@ -171,13 +171,13 @@ exports[`CustodyAccountList renders accounts 1`] = `
         class="mm-box mm-box--display-flex mm-box--gap-4"
       >
         <button
-          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
           data-testid="custody-account-cancel-button"
         >
           [cancel]
         </button>
         <button
-          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           data-testid="custody-account-connect-button"
           disabled=""
         >

ui/pages/institutional/custody/__snapshots__/custody.test.js.snap

@@ -81,7 +81,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
               </p>
             </div>
             <button
-              class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+              class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
               data-testid="custody-connect-button"
             >
               Select

ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap

@@ -95,12 +95,12 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
         class="mm-box mm-box--display-flex mm-box--gap-4"
       >
         <button
-          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
         >
           Reject
         </button>
         <button
-          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         >
           displayName
         </button>

ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap

@@ -17,7 +17,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
          
         The 
         <a
-          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://metamask.zendesk.com/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure"
           rel="noopener noreferrer"
           target="_blank"
@@ -42,7 +42,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
          
         MetaMask is a 
         <a
-          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://metamask.zendesk.com/hc/en-us/articles/360059952212-MetaMask-is-a-non-custodial-wallet"
           rel="noopener noreferrer"
           target="_blank"
@@ -104,12 +104,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
       class="box box--margin-top-auto box--display-flex box--gap-4 box--flex-direction-row"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
       >
         Cancel
       </button>
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         disabled=""
       >
         Next

ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
         class="mm-box mm-box--margin-bottom-4 mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
       >
         <button
-          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         >
           Create a Snap Account
         </button>
@@ -42,7 +42,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box"
         >
           <button
-            class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+            class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           >
             Install snap
           </button>
@@ -180,7 +180,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
           >
             <a
-              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="auditUrl1"
             >
               auditUrl1
@@ -190,7 +190,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
           >
             <a
-              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="auditUrl2"
             >
               auditUrl2

ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`SnapCard should render 1`] = `
         </div>
       </div>
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
         data-testid="install-snap-button"
       >
         Install

ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap

@@ -24,7 +24,7 @@ exports[`Security Tab should match snapshot 1`] = `
       class="settings-page__content-padded"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         data-testid="reveal-seed-words"
         type="danger"
       >
@@ -423,7 +423,7 @@ exports[`Security Tab should match snapshot 1`] = `
           class="settings-page__content-item-col"
         >
           <button
-            class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+            class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
             type="secondary"
           >
             Add custom network

ui/pages/swaps/prepare-swap-page/prepare-swap-page.js

@@ -118,6 +118,7 @@ import {
   IconSize,
   TextField,
   ButtonLink,
+  ButtonLinkSize,
   Modal,
   ModalOverlay,
   ModalContent,
@@ -1054,7 +1055,7 @@ export default function PrepareSwapPage({
                 </Text>
                 {!verificationClicked && (
                   <ButtonLink
-                    size={Size.INHERIT}
+                    size={ButtonLinkSize.Inherit}
                     textProps={{
                       variant: TextVariant.bodyMd,
                       alignItems: AlignItems.flexStart,

ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js

@@ -7,7 +7,6 @@ import {
   DISPLAY,
   AlignItems,
   SEVERITIES,
-  Size,
   TextVariant,
   BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
@@ -15,6 +14,7 @@ import { GasRecommendations } from '../../../../shared/constants/gas';
 import {
   BannerAlert,
   ButtonLink,
+  ButtonLinkSize,
   Text,
 } from '../../../components/component-library';
 
@@ -73,7 +73,7 @@ export default function ViewQuotePriceDifference(props) {
           </Text>
           {!acknowledged && (
             <ButtonLink
-              size={Size.INHERIT}
+              size={ButtonLinkSize.Inherit}
               textProps={{
                 variant: TextVariant.bodyMd,
                 alignItems: AlignItems.flexStart,

ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js

@@ -8,10 +8,13 @@ import Box from '../../../components/ui/box';
 import {
   AlignItems,
   SEVERITIES,
-  Size,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { ButtonLink, Text } from '../../../components/component-library';
+import {
+  ButtonLink,
+  ButtonLinkSize,
+  Text,
+} from '../../../components/component-library';
 
 import {
   QUOTES_EXPIRED_ERROR,
@@ -42,7 +45,7 @@ export default function SwapsBannerAlert({ swapsErrorKey }) {
             {t('swapSlippageOverLimitDescription')}
           </Text>
           <ButtonLink
-            size={Size.INHERIT}
+            size={ButtonLinkSize.Inherit}
             textProps={{
               variant: TextVariant.bodyMd,
               alignItems: AlignItems.flexStart,
@@ -83,7 +86,7 @@ export default function SwapsBannerAlert({ swapsErrorKey }) {
             {t('swapSlippageNegativeDescription')}
           </Text>
           <ButtonLink
-            size={Size.INHERIT}
+            size={ButtonLinkSize.Inherit}
             textProps={{
               variant: TextVariant.bodyMd,
               alignItems: AlignItems.flexStart,
@@ -106,7 +109,7 @@ export default function SwapsBannerAlert({ swapsErrorKey }) {
             {t('swapQuotesNotAvailableDescription')}
           </Text>
           <ButtonLink
-            size={Size.INHERIT}
+            size={ButtonLinkSize.Inherit}
             textProps={{
               variant: TextVariant.bodyMd,
               alignItems: AlignItems.flexStart,

ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap

@@ -391,7 +391,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
             value="7"
           />
           <button
-            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
             data-testid="custom-spending-cap-max-button"
           >
             Max
@@ -415,7 +415,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
           </span>
         </div>
         <a
-          class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
           rel="noopener noreferrer"
           target="_blank"