Update Button prop name type to variant

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_VARIANTS,
   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_VARIANTS.LINK}
               size={Size.auto}
               href={ZENDESK_URLS.NON_CUSTODIAL_WALLET}
               target="_blank"

ui/components/app/terms-of-use-popup/terms-of-use-popup.js

@@ -12,7 +12,7 @@ import {
 import {
   Text,
   Button,
-  BUTTON_TYPES,
+  BUTTON_VARIANTS,
   ButtonLink,
   Label,
 } from '../../component-library';
@@ -64,7 +64,7 @@ export default function TermsOfUsePopup({ onAccept }) {
       footer={
         <>
           <Button
-            type={BUTTON_TYPES.PRIMARY}
+            variant={BUTTON_VARIANTS.PRIMARY}
             className="terms-of-use__button"
             onClick={onAccept}
             disabled={!isTermsOfUseChecked}

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_VARIANTS` 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_VARIANTS.PRIMARY`
+- `BUTTON_VARIANTS.SECONDARY`
+- `BUTTON_VARIANTS.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_VARIANTS } 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_VARIANTS.PRIMARY}>Button Primary</Button>
+<Button variant={BUTTON_VARIANTS.SECONDARY}>Button Secondary</Button>
+<Button variant={BUTTON_VARIANTS.LINK}>Button Link</Button>
 ```
 
 ### Size

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_VARIANTS = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   LINK: 'link',

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_VARIANTS } from './button.constants';
 
-export const Button = ({ type, ...props }) => {
-  switch (type) {
-    case BUTTON_TYPES.PRIMARY:
+export const Button = ({ variant, ...props }) => {
+  switch (variant) {
+    case BUTTON_VARIANTS.PRIMARY:
       return <ButtonPrimary {...props} />;
-    case BUTTON_TYPES.SECONDARY:
+    case BUTTON_VARIANTS.SECONDARY:
       return <ButtonSecondary {...props} />;
-    case BUTTON_TYPES.LINK:
+    case BUTTON_VARIANTS.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_VARIANTS.PRIMARY', 'BUTTON_VARIANTS.SECONDARY', 'BUTTON_VARIANTS.LINK'
+   * Button will default to `BUTTON_VARIANTS.PRIMARY`
    */
-  type: PropTypes.oneOf(Object.values(BUTTON_TYPES)),
+  variant: PropTypes.oneOf(Object.values(BUTTON_VARIANTS)),
   /**
    * Button accepts all the props from ButtonPrimary (same props as ButtonSecondary & ButtonLink)
    */

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_VARIANTS } 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_VARIANTS),
       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_VARIANTS.PRIMARY} {...args}>
       Button Primary
     </Button>
-    <Button type={BUTTON_TYPES.SECONDARY} {...args}>
+    <Button variant={BUTTON_VARIANTS.SECONDARY} {...args}>
       Button Secondary
     </Button>
-    <Button type={BUTTON_TYPES.LINK} {...args}>
+    <Button variant={BUTTON_VARIANTS.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_VARIANTS.LINK}>
         Auto ButtonLink
       </Button>
     </Box>
     <Text variant={TextVariant.bodySm}>
-      <Button {...args} type={BUTTON_TYPES.LINK} size={Size.inherit}>
+      <Button {...args} variant={BUTTON_VARIANTS.LINK} size={Size.inherit}>
         Button Inherit
       </Button>{' '}
       inherits the font-size of the parent element. Inherit size only used for

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_VARIANTS } from './button.constants';
 import { Button } from './button';
 
 describe('Button', () => {
@@ -46,28 +46,34 @@ describe('Button', () => {
   it('should render with different button types', () => {
     const { getByTestId, container } = render(
       <>
-        <Button type={BUTTON_TYPES.PRIMARY} data-testid={BUTTON_TYPES.PRIMARY}>
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          data-testid={BUTTON_VARIANTS.PRIMARY}
+        >
           Button
         </Button>
         <Button
-          type={BUTTON_TYPES.SECONDARY}
-          data-testid={BUTTON_TYPES.SECONDARY}
+          variant={BUTTON_VARIANTS.SECONDARY}
+          data-testid={BUTTON_VARIANTS.SECONDARY}
         >
           Button
         </Button>
-        <Button type={BUTTON_TYPES.LINK} data-testid={BUTTON_TYPES.LINK}>
+        <Button
+          variant={BUTTON_VARIANTS.LINK}
+          data-testid={BUTTON_VARIANTS.LINK}
+        >
           Button
         </Button>
       </>,
     );
-    expect(getByTestId(BUTTON_TYPES.PRIMARY)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.PRIMARY}`,
+    expect(getByTestId(BUTTON_VARIANTS.PRIMARY)).toHaveClass(
+      `mm-button-${BUTTON_VARIANTS.PRIMARY}`,
     );
-    expect(getByTestId(BUTTON_TYPES.SECONDARY)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.SECONDARY}`,
+    expect(getByTestId(BUTTON_VARIANTS.SECONDARY)).toHaveClass(
+      `mm-button-${BUTTON_VARIANTS.SECONDARY}`,
     );
-    expect(getByTestId(BUTTON_TYPES.LINK)).toHaveClass(
-      `mm-button-${BUTTON_TYPES.LINK}`,
+    expect(getByTestId(BUTTON_VARIANTS.LINK)).toHaveClass(
+      `mm-button-${BUTTON_VARIANTS.LINK}`,
     );
     expect(container).toMatchSnapshot();
   });
@@ -77,7 +83,7 @@ describe('Button', () => {
       <>
         <Button
           size={BUTTON_SIZES.INHERIT}
-          type={BUTTON_TYPES.LINK}
+          variant={BUTTON_VARIANTS.LINK}
           data-testid={BUTTON_SIZES.INHERIT}
         >
           Button {BUTTON_SIZES.INHERIT}

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_VARIANTS, BUTTON_SIZES } from './button.constants';

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_VARIANTS, 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';

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_VARIANTS,
   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_VARIANTS.LINK}
       size={BUTTON_SIZES.LG}
       data-testid="start-compliance"
       onClick={() => {

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_VARIANTS, 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_VARIANTS.SECONDARY}
             block
             onClick={() => {
               isFullScreen

ui/pages/create-account/connect-hardware/index.js

@@ -21,7 +21,7 @@ import {
   LedgerTransportTypes,
 } from '../../../../shared/constants/hardware-wallets';
 import {
-  BUTTON_TYPES,
+  BUTTON_VARIANTS,
   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_VARIANTS.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_VARIANTS.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_VARIANTS.LINK}
               href={ZENDESK_URLS.HARDWARE_CONNECTION}
               key="u2f-error-1"
             >

ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js

@@ -22,7 +22,7 @@ import {
   ButtonLink,
   Button,
   BUTTON_SIZES,
-  BUTTON_TYPES,
+  BUTTON_VARIANTS,
 } 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_VARIANTS.SECONDARY}
               size={BUTTON_SIZES.LG}
               data-testid="cancel-btn"
               onClick={() => {

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_VARIANTS,
 } 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_VARIANTS.SECONDARY}
               size={BUTTON_SIZES.LG}
               onClick={() => {
                 removeConnectInstitutionalFeature({