From 2face84177a00e1fc9555f786d26df5d4f26943c Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Tue, 2 May 2023 03:05:08 -0700
Subject: [PATCH] Adding deprecation notice to old Button component (#18908)

---
 ui/components/ui/button/button.component.js | 10 ++++++++++
 ui/components/ui/button/button.stories.js   | 18 ++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/ui/components/ui/button/button.component.js b/ui/components/ui/button/button.component.js
index b43bafda1..f60a2c4f1 100644
--- a/ui/components/ui/button/button.component.js
+++ b/ui/components/ui/button/button.component.js
@@ -22,6 +22,16 @@ const typeHash = {
   raised: CLASSNAME_RAISED,
 };
 
+/**
+ * @deprecated The <Button /> component has been deprecated in favor of the new <Button> component from the component-library.
+ * Please update your code to use the new <Button> component instead, which can be found at ./ui/components/component-library/button/button.js.
+ * You can find documentation for the new Button component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-button--default-story#button}
+ * If you would like to help with the replacement of the old Button component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/18896}
+ * @see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-button--default-story#button}
+ */
+
 const Button = ({
   type,
   submit = false,
diff --git a/ui/components/ui/button/button.stories.js b/ui/components/ui/button/button.stories.js
index 9772b8ed3..632eefc42 100644
--- a/ui/components/ui/button/button.stories.js
+++ b/ui/components/ui/button/button.stories.js
@@ -1,5 +1,8 @@
 import React from 'react';
 
+import { SEVERITIES } from '../../../helpers/constants/design-system';
+import { BannerAlert } from '../../component-library';
+
 import IconTokenSearch from '../icon/icon-token-search';
 
 import README from './README.mdx';
@@ -7,7 +10,6 @@ import Button from '.';
 
 export default {
   title: 'Components/UI/Button',
-
   component: Button,
   parameters: {
     docs: {
@@ -56,7 +58,19 @@ export default {
 };
 
 export const DefaultStory = (args) => (
-  <Button {...args}>{args.children}</Button>
+  <>
+    <BannerAlert
+      marginBottom={4}
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="This version of Button has been deprecated in favor of the component-library version. Contribute to replacing old Button with new Button by submitting a PR to metamask-extension."
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/18896',
+      }}
+    />
+    <Button {...args}>{args.children}</Button>
+  </>
 );
 
 DefaultStory.storyName = 'Default';