From 1f0c0d041cd99479bde065a274e96a3d3dc9b86d Mon Sep 17 00:00:00 2001
From: "Hakeemullah J. Yousufzai" <hakeemullah.yousufzai@gmail.com>
Date: Wed, 26 Apr 2023 21:17:25 +0500
Subject: [PATCH] Update Button prop name type to variant (#18774)

* Update Button prop name type to variant

* fix: lint errors on running test cases

* change remaining files

* change typo: BUTTON_VARIANTS to BUTTON_VARIANT

* fix: button.test.js lint errors

* update: button instances & import in remaing files

* fix: prettier warnings

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
---
 .../hold-to-reveal-modal.js                   |  4 +--
 .../app/snaps/snap-version/snap-version.js    |  4 +--
 .../terms-of-use-popup/terms-of-use-popup.js  |  4 +--
 .../component-library/button/README.mdx       | 22 ++++++-------
 .../button/button.constants.js                |  2 +-
 .../component-library/button/button.js        | 20 ++++++------
 .../button/button.stories.js                  | 18 +++++------
 .../component-library/button/button.test.js   | 31 ++++++++++---------
 .../component-library/button/index.js         |  2 +-
 ui/components/component-library/index.js      |  2 +-
 .../compliance-settings.js                    |  4 +--
 .../custody-confirm-link-modal.js             |  4 +--
 .../network-list-menu/network-list-menu.js    |  4 +--
 .../create-account/connect-hardware/index.js  |  8 ++---
 .../confirm-add-custodian-token.js            |  4 +--
 .../confirm-add-institutional-feature.js      |  4 +--
 ui/pages/keychains/reveal-seed.js             | 10 +++---
 .../settings/snaps/view-snap/view-snap.js     |  4 +--
 18 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
index bf4b42ccf..3cd352e9a 100644
--- a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
+++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
@@ -5,7 +5,7 @@ import Box from '../../../ui/box';
 import {
   Text,
   Button,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
   ButtonIcon,
   IconName,
 } from '../../../component-library';
@@ -86,7 +86,7 @@ const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
             </Text>,
             <Button
               key="hold-to-reveal-5"
-              type={BUTTON_TYPES.LINK}
+              variant={BUTTON_VARIANT.LINK}
               size={Size.auto}
               href={ZENDESK_URLS.NON_CUSTODIAL_WALLET}
               target="_blank"
diff --git a/ui/components/app/snaps/snap-version/snap-version.js b/ui/components/app/snaps/snap-version/snap-version.js
index 16ca4412a..a04e9449f 100644
--- a/ui/components/app/snaps/snap-version/snap-version.js
+++ b/ui/components/app/snaps/snap-version/snap-version.js
@@ -10,7 +10,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Box from '../../../ui/box';
 import {
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
   Button,
   Icon,
   IconName,
@@ -24,7 +24,7 @@ const SnapVersion = ({ version, url }) => {
   const t = useI18nContext();
   return (
     <Button
-      type={BUTTON_TYPES.LINK}
+      variant={BUTTON_VARIANT.LINK}
       href={url}
       target="_blank"
       className="snap-version"
diff --git a/ui/components/app/terms-of-use-popup/terms-of-use-popup.js b/ui/components/app/terms-of-use-popup/terms-of-use-popup.js
index 9fe664303..5d1da7fd1 100644
--- a/ui/components/app/terms-of-use-popup/terms-of-use-popup.js
+++ b/ui/components/app/terms-of-use-popup/terms-of-use-popup.js
@@ -12,7 +12,7 @@ import {
 import {
   Text,
   Button,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
   ButtonLink,
   Label,
 } from '../../component-library';
@@ -64,7 +64,7 @@ export default function TermsOfUsePopup({ onAccept }) {
       footer={
         <>
           <Button
-            type={BUTTON_TYPES.PRIMARY}
+            variant={BUTTON_VARIANT.PRIMARY}
             className="terms-of-use__button"
             onClick={onAccept}
             disabled={!isTermsOfUseChecked}
diff --git a/ui/components/component-library/button/README.mdx b/ui/components/component-library/button/README.mdx
index 0e1527ff7..6b171cbdc 100644
--- a/ui/components/component-library/button/README.mdx
+++ b/ui/components/component-library/button/README.mdx
@@ -25,26 +25,26 @@ The `Button` accepts all [ButtonPrimary](/docs/components-componentlibrary-butto
 
 <ArgsTable of={ButtonLink} />
 
-### Type
+### Variant
 
-Use the `type` prop and the `BUTTON_TYPES` object from `./button.constants.js` to change the `Button` type.
+Use the `variant` prop and the `BUTTON_VARIANT` object from `./button.constants.js` to change the `Button` variant.
 
-Possible types include:
+Possible variants include:
 
-- `BUTTON_TYPES.PRIMARY`
-- `BUTTON_TYPES.SECONDARY`
-- `BUTTON_TYPES.LINK`
+- `BUTTON_VARIANT.PRIMARY`
+- `BUTTON_VARIANT.SECONDARY`
+- `BUTTON_VARIANT.LINK`
 
 <Canvas>
-  <Story id="components-componentlibrary-button--type" />
+  <Story id="components-componentlibrary-button--variant" />
 </Canvas>
 
 ```jsx
-import { Button, BUTTON_TYPES } from '../ui/component-library/button';
+import { Button, BUTTON_VARIANT } from '../ui/component-library/button';
 
-<Button type={BUTTON_TYPES.PRIMARY}>Button Primary</Button>
-<Button type={BUTTON_TYPES.SECONDARY}>Button Secondary</Button>
-<Button type={BUTTON_TYPES.LINK}>Button Link</Button>
+<Button variant={BUTTON_VARIANT.PRIMARY}>Button Primary</Button>
+<Button variant={BUTTON_VARIANT.SECONDARY}>Button Secondary</Button>
+<Button variant={BUTTON_VARIANT.LINK}>Button Link</Button>
 ```
 
 ### Size
diff --git a/ui/components/component-library/button/button.constants.js b/ui/components/component-library/button/button.constants.js
index 4f5f6ef0f..b555bb11a 100644
--- a/ui/components/component-library/button/button.constants.js
+++ b/ui/components/component-library/button/button.constants.js
@@ -8,7 +8,7 @@ export const BUTTON_SIZES = {
   AUTO: Size.auto,
 };
 
-export const BUTTON_TYPES = {
+export const BUTTON_VARIANT = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   LINK: 'link',
diff --git a/ui/components/component-library/button/button.js b/ui/components/component-library/button/button.js
index eaaa5486b..111a01458 100644
--- a/ui/components/component-library/button/button.js
+++ b/ui/components/component-library/button/button.js
@@ -5,15 +5,15 @@ import { ButtonPrimary } from '../button-primary';
 import { ButtonSecondary } from '../button-secondary';
 import { ButtonLink } from '../button-link';
 
-import { BUTTON_TYPES } from './button.constants';
+import { BUTTON_VARIANT } from './button.constants';
 
-export const Button = ({ type, ...props }) => {
-  switch (type) {
-    case BUTTON_TYPES.PRIMARY:
+export const Button = ({ variant, ...props }) => {
+  switch (variant) {
+    case BUTTON_VARIANT.PRIMARY:
       return <ButtonPrimary {...props} />;
-    case BUTTON_TYPES.SECONDARY:
+    case BUTTON_VARIANT.SECONDARY:
       return <ButtonSecondary {...props} />;
-    case BUTTON_TYPES.LINK:
+    case BUTTON_VARIANT.LINK:
       return <ButtonLink {...props} />;
     default:
       return <ButtonPrimary {...props} />;
@@ -22,11 +22,11 @@ export const Button = ({ type, ...props }) => {
 
 Button.propTypes = {
   /**
-   * Select the type of Button.
-   * Possible values could be 'BUTTON_TYPES.PRIMARY', 'BUTTON_TYPES.SECONDARY', 'BUTTON_TYPES.LINK'
-   * Button will default to `BUTTON_TYPES.PRIMARY`
+   * Select the variant of Button.
+   * Possible values could be 'BUTTON_VARIANT.PRIMARY', 'BUTTON_VARIANT.SECONDARY', 'BUTTON_VARIANT.LINK'
+   * Button will default to `BUTTON_VARIANT.PRIMARY`
    */
-  type: PropTypes.oneOf(Object.values(BUTTON_TYPES)),
+  variant: PropTypes.oneOf(Object.values(BUTTON_VARIANT)),
   /**
    * Button accepts all the props from ButtonPrimary (same props as ButtonSecondary & ButtonLink)
    */
diff --git a/ui/components/component-library/button/button.stories.js b/ui/components/component-library/button/button.stories.js
index e85d37fa6..bc2176611 100644
--- a/ui/components/component-library/button/button.stories.js
+++ b/ui/components/component-library/button/button.stories.js
@@ -11,7 +11,7 @@ import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
 import Box from '../../ui/box/box';
 import { Text } from '../text';
 import README from './README.mdx';
-import { Button, BUTTON_TYPES } from '.';
+import { Button, BUTTON_VARIANT } from '.';
 
 const marginSizeControlOptions = [
   undefined,
@@ -85,8 +85,8 @@ export default {
       control: 'select',
       options: Object.values(BUTTON_LINK_SIZES),
     },
-    type: {
-      options: Object.values(BUTTON_TYPES),
+    variant: {
+      options: Object.values(BUTTON_VARIANT),
       control: 'select',
     },
     marginTop: {
@@ -119,15 +119,15 @@ export const DefaultStory = (args) => <Button {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const Type = (args) => (
+export const Variant = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
-    <Button type={BUTTON_TYPES.PRIMARY} {...args}>
+    <Button variant={BUTTON_VARIANT.PRIMARY} {...args}>
       Button Primary
     </Button>
-    <Button type={BUTTON_TYPES.SECONDARY} {...args}>
+    <Button variant={BUTTON_VARIANT.SECONDARY} {...args}>
       Button Secondary
     </Button>
-    <Button type={BUTTON_TYPES.LINK} {...args}>
+    <Button variant={BUTTON_VARIANT.LINK} {...args}>
       Button Link
     </Button>
   </Box>
@@ -150,12 +150,12 @@ export const SizeStory = (args) => (
       <Button {...args} size={Size.LG}>
         Large Button
       </Button>
-      <Button {...args} type={BUTTON_TYPES.LINK}>
+      <Button {...args} variant={BUTTON_VARIANT.LINK}>
         Auto ButtonLink
       </Button>
     </Box>
     <Text variant={TextVariant.bodySm}>
-      <Button {...args} type={BUTTON_TYPES.LINK} size={Size.inherit}>
+      <Button {...args} variant={BUTTON_VARIANT.LINK} size={Size.inherit}>
         Button Inherit
       </Button>{' '}
       inherits the font-size of the parent element. Inherit size only used for
diff --git a/ui/components/component-library/button/button.test.js b/ui/components/component-library/button/button.test.js
index 1fd245238..f612b4da6 100644
--- a/ui/components/component-library/button/button.test.js
+++ b/ui/components/component-library/button/button.test.js
@@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { IconName } from '..';
-import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
+import { BUTTON_SIZES, BUTTON_VARIANT } from './button.constants';
 import { Button } from './button';
 
 describe('Button', () => {
@@ -46,28 +46,31 @@ describe('Button', () => {
   it('should render with different button types', () => {
     const { getByTestId, container } = render(
       <>
-        <Button type={BUTTON_TYPES.PRIMARY} data-testid={BUTTON_TYPES.PRIMARY}>
-          Button
-        </Button>
         <Button
-          type={BUTTON_TYPES.SECONDARY}
-          data-testid={BUTTON_TYPES.SECONDARY}
+          variant={BUTTON_VARIANT.PRIMARY}
+          data-testid={BUTTON_VARIANT.PRIMARY}
         >
           Button
         </Button>
-        <Button type={BUTTON_TYPES.LINK} data-testid={BUTTON_TYPES.LINK}>
+        <Button
+          variant={BUTTON_VARIANT.SECONDARY}
+          data-testid={BUTTON_VARIANT.SECONDARY}
+        >
+          Button
+        </Button>
+        <Button variant={BUTTON_VARIANT.LINK} data-testid={BUTTON_VARIANT.LINK}>
           Button
         </Button>
       </>,
     );
-    expect(getByTestId(BUTTON_TYPES.PRIMARY)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.PRIMARY}`,
+    expect(getByTestId(BUTTON_VARIANT.PRIMARY)).toHaveClass(
+      `mm-button-${BUTTON_VARIANT.PRIMARY}`,
     );
-    expect(getByTestId(BUTTON_TYPES.SECONDARY)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.SECONDARY}`,
+    expect(getByTestId(BUTTON_VARIANT.SECONDARY)).toHaveClass(
+      `mm-button-${BUTTON_VARIANT.SECONDARY}`,
     );
-    expect(getByTestId(BUTTON_TYPES.LINK)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.LINK}`,
+    expect(getByTestId(BUTTON_VARIANT.LINK)).toHaveClass(
+      `mm-button-${BUTTON_VARIANT.LINK}`,
     );
     expect(container).toMatchSnapshot();
   });
@@ -77,7 +80,7 @@ describe('Button', () => {
       <>
         <Button
           size={BUTTON_SIZES.INHERIT}
-          type={BUTTON_TYPES.LINK}
+          variant={BUTTON_VARIANT.LINK}
           data-testid={BUTTON_SIZES.INHERIT}
         >
           Button {BUTTON_SIZES.INHERIT}
diff --git a/ui/components/component-library/button/index.js b/ui/components/component-library/button/index.js
index 4c82356f7..fff8a29fe 100644
--- a/ui/components/component-library/button/index.js
+++ b/ui/components/component-library/button/index.js
@@ -1,2 +1,2 @@
 export { Button } from './button';
-export { BUTTON_TYPES, BUTTON_SIZES } from './button.constants';
+export { BUTTON_VARIANT, BUTTON_SIZES } from './button.constants';
diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js
index 4400ff8de..5c38ef3b1 100644
--- a/ui/components/component-library/index.js
+++ b/ui/components/component-library/index.js
@@ -14,7 +14,7 @@ export {
   BadgeWrapperAnchorElementShape,
 } from './badge-wrapper';
 export { AvatarBase } from './avatar-base';
-export { Button, BUTTON_TYPES, BUTTON_SIZES } from './button';
+export { Button, BUTTON_VARIANT, BUTTON_SIZES } from './button';
 export { ButtonBase, BUTTON_BASE_SIZES } from './button-base';
 export { ButtonIcon, ButtonIconSize } from './button-icon';
 export { ButtonLink, BUTTON_LINK_SIZES } from './button-link';
diff --git a/ui/components/institutional/compliance-settings/compliance-settings.js b/ui/components/institutional/compliance-settings/compliance-settings.js
index 4289250c8..73aa65401 100644
--- a/ui/components/institutional/compliance-settings/compliance-settings.js
+++ b/ui/components/institutional/compliance-settings/compliance-settings.js
@@ -14,7 +14,7 @@ import { mmiActionsFactory } from '../../../store/institutional/institution-back
 import {
   Text,
   Button,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
   BUTTON_SIZES,
 } from '../../component-library';
 import Box from '../../ui/box';
@@ -30,7 +30,7 @@ const ComplianceSettings = () => {
 
   const linkButton = (
     <Button
-      type={BUTTON_TYPES.LINK}
+      variant={BUTTON_VARIANT.LINK}
       size={BUTTON_SIZES.LG}
       data-testid="start-compliance"
       onClick={() => {
diff --git a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js
index 521274e67..36e1ef821 100644
--- a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js
+++ b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js
@@ -27,7 +27,7 @@ import {
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Text, Button } from '../../component-library';
+import { Text, Button, BUTTON_VARIANT } from '../../component-library';
 
 const CustodyConfirmLink = () => {
   const t = useI18nContext();
@@ -122,7 +122,7 @@ const CustodyConfirmLink = () => {
         {text || t('custodyDeeplinkDescription', [displayName])}
       </Text>
       <Button
-        type="primary"
+        variant={BUTTON_VARIANT.PRIMARY}
         className="custody-confirm-link__btn"
         onClick={onClick}
       >
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index ef0f873fe..6a24db3bc 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -24,7 +24,7 @@ import {
   DISPLAY,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import { Button, BUTTON_TYPES, Text } from '../../component-library';
+import { Button, BUTTON_VARIANT, Text } from '../../component-library';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
@@ -97,7 +97,7 @@ export const NetworkListMenu = ({ onClose }) => {
         </Box>
         <Box padding={4}>
           <Button
-            type={BUTTON_TYPES.SECONDARY}
+            variant={BUTTON_VARIANT.SECONDARY}
             block
             onClick={() => {
               isFullScreen
diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js
index 3105ceb29..d3ac55015 100644
--- a/ui/pages/create-account/connect-hardware/index.js
+++ b/ui/pages/create-account/connect-hardware/index.js
@@ -21,7 +21,7 @@ import {
   LedgerTransportTypes,
 } from '../../../../shared/constants/hardware-wallets';
 import {
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
   BUTTON_SIZES,
   Button,
   Text,
@@ -306,7 +306,7 @@ class ConnectHardwareForm extends Component {
               {this.context.t('troubleConnectingToLedgerU2FOnFirefox', [
                 // eslint-disable-next-line react/jsx-key
                 <Button
-                  type={BUTTON_TYPES.LINK}
+                  variant={BUTTON_VARIANT.LINK}
                   href={ZENDESK_URLS.HARDWARE_CONNECTION}
                   size={BUTTON_SIZES.INHERIT}
                   key="u2f-error-1"
@@ -325,7 +325,7 @@ class ConnectHardwareForm extends Component {
                 [
                   // eslint-disable-next-line react/jsx-key
                   <Button
-                    type={BUTTON_TYPES.LINK}
+                    variant={BUTTON_VARIANT.LINK}
                     href={ZENDESK_URLS.LEDGER_FIREFOX_U2F_GUIDE}
                     size={BUTTON_SIZES.INHERIT}
                     key="u2f-error-1"
@@ -349,7 +349,7 @@ class ConnectHardwareForm extends Component {
             this.state.device,
             // eslint-disable-next-line react/jsx-key
             <Button
-              type={BUTTON_TYPES.LINK}
+              variant={BUTTON_VARIANT.LINK}
               href={ZENDESK_URLS.HARDWARE_CONNECTION}
               key="u2f-error-1"
             >
diff --git a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
index 3046ab54d..ec57d5781 100644
--- a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
+++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
@@ -22,7 +22,7 @@ import {
   ButtonLink,
   Button,
   BUTTON_SIZES,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
 } from '../../../components/component-library';
 import Box from '../../../components/ui/box';
 
@@ -183,7 +183,7 @@ const ConfirmAddCustodianToken = () => {
           <Box display={DISPLAY.FLEX} gap={4}>
             <Button
               block
-              type={BUTTON_TYPES.SECONDARY}
+              variant={BUTTON_VARIANT.SECONDARY}
               size={BUTTON_SIZES.LG}
               data-testid="cancel-btn"
               onClick={() => {
diff --git a/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js b/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js
index 0e89910e2..fa7f60b7c 100644
--- a/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js
+++ b/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js
@@ -10,7 +10,7 @@ import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 import {
   Text,
   BUTTON_SIZES,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
 } from '../../../components/component-library';
 import {
   TextColor,
@@ -181,7 +181,7 @@ export default function ConfirmAddInstitutionalFeature({ history }) {
           <Box display={DISPLAY.FLEX} gap={4}>
             <Button
               block
-              type={BUTTON_TYPES.SECONDARY}
+              type={BUTTON_VARIANT.SECONDARY}
               size={BUTTON_SIZES.LG}
               onClick={() => {
                 removeConnectInstitutionalFeature({
diff --git a/ui/pages/keychains/reveal-seed.js b/ui/pages/keychains/reveal-seed.js
index 54633840f..7bfdf29c9 100644
--- a/ui/pages/keychains/reveal-seed.js
+++ b/ui/pages/keychains/reveal-seed.js
@@ -28,7 +28,7 @@ import {
   Button,
   TextField,
   HelpText,
-  BUTTON_TYPES,
+  BUTTON_VARIANT,
   TEXT_FIELD_SIZES,
   TEXT_FIELD_TYPES,
   BUTTON_SIZES,
@@ -202,7 +202,7 @@ const RevealSeedPage = () => {
         <Button
           width={BLOCK_SIZES.FULL}
           size={Size.LG}
-          type={BUTTON_TYPES.SECONDARY}
+          variant={BUTTON_VARIANT.SECONDARY}
           onClick={() => {
             trackEvent({
               category: MetaMetricsEventCategory.Keys,
@@ -241,7 +241,7 @@ const RevealSeedPage = () => {
     return (
       <Box marginTop="auto">
         <Button
-          type={BUTTON_TYPES.SECONDARY}
+          variant={BUTTON_VARIANT.SECONDARY}
           width={BLOCK_SIZES.FULL}
           size={Size.LG}
           onClick={() => history.push(mostRecentOverviewPage)}
@@ -278,7 +278,7 @@ const RevealSeedPage = () => {
         {t('revealSeedWordsDescription1', [
           <Button
             key="srp-learn-srp"
-            type={BUTTON_TYPES.LINK}
+            variant={BUTTON_VARIANT.LINK}
             size={BUTTON_SIZES.INHERIT}
             as="a"
             href={ZENDESK_URLS.SECRET_RECOVERY_PHRASE}
@@ -300,7 +300,7 @@ const RevealSeedPage = () => {
         {t('revealSeedWordsDescription2', [
           <Button
             key="srp-learn-more-non-custodial"
-            type={BUTTON_TYPES.LINK}
+            variant={BUTTON_VARIANT.LINK}
             size={BUTTON_SIZES.INHERIT}
             as="a"
             href={ZENDESK_URLS.NON_CUSTODIAL_WALLET}
diff --git a/ui/pages/settings/snaps/view-snap/view-snap.js b/ui/pages/settings/snaps/view-snap/view-snap.js
index b7ea31df5..378a24165 100644
--- a/ui/pages/settings/snaps/view-snap/view-snap.js
+++ b/ui/pages/settings/snaps/view-snap/view-snap.js
@@ -33,7 +33,7 @@ import {
   getTargetSubjectMetadata,
 } from '../../../../selectors';
 import { getSnapName } from '../../../../helpers/utils/util';
-import { Text, BUTTON_TYPES } from '../../../../components/component-library';
+import { Text, BUTTON_VARIANT } from '../../../../components/component-library';
 import SnapPermissionsList from '../../../../components/app/snaps/snap-permissions-list';
 import { SnapDelineator } from '../../../../components/app/snaps/snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/flask';
@@ -137,7 +137,7 @@ function ViewSnap() {
             {shouldDisplayMoreButton && (
               <Button
                 className="view-snap__description__more-button"
-                type={BUTTON_TYPES.LINK}
+                type={BUTTON_VARIANT.LINK}
                 onClick={handleMoreClick}
               >
                 <Text color={Color.infoDefault}>{t('more')}</Text>