From 30aa011643054b7e6d96afe61327a750ee1bcc37 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Tue, 22 Mar 2022 15:26:32 -0500
Subject: [PATCH] fix: icon button component demo

---
 src/pages/components/button/code.mdx  | 18 +++++++-----------
 src/pages/components/button/usage.mdx | 16 ++++++----------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/pages/components/button/code.mdx b/src/pages/components/button/code.mdx
index 025e1051117..5e36a3d9e5b 100755
--- a/src/pages/components/button/code.mdx
+++ b/src/pages/components/button/code.mdx
@@ -6,8 +6,6 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
-import { Add16 } from '@carbon/icons-react';
-
 <PageDescription>
 
 Preview the button component with the React live demo. For detailed code usage
@@ -62,8 +60,10 @@ documentation, see the Storybooks for each framework below.
 
 ## Live demo
 
+import { Add } from '@carbon/react/icons';
+
 <ComponentDemo
-  scope={{ Add16 }}
+  scope={{ Add }}
   components={[
     {
       id: 'button',
@@ -113,7 +113,7 @@ documentation, see the Storybooks for each framework below.
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
   >{`
-      <Button renderIcon={Add16}>Button</Button>
+      <Button renderIcon={Add}>Button</Button>
     `}</ComponentVariant>
   <ComponentVariant
     id="icon-only"
@@ -131,12 +131,8 @@ documentation, see the Storybooks for each framework below.
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}
   >{`
-      <Button
-        hasIconOnly
-        renderIcon={Add16}
-        tooltipAlignment="center"
-        tooltipPosition="bottom"
-        iconDescription="Button description here"
-      />
+     <IconButton align='top' label='Icon button'>
+       <Add size={16}/>
+     </IconButton>
   `}</ComponentVariant>
 </ComponentDemo>
diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx
index 7468e7b3988..4b687d535e1 100755
--- a/src/pages/components/button/usage.mdx
+++ b/src/pages/components/button/usage.mdx
@@ -80,10 +80,10 @@ actions.
 
 ## Live demo
 
-import { Add16 } from '@carbon/icons-react';
+import { Add } from '@carbon/react/icons';
 
 <ComponentDemo
-  scope={{ Add16 }}
+  scope={{ Add }}
   components={[
     {
       id: 'button',
@@ -133,7 +133,7 @@ import { Add16 } from '@carbon/icons-react';
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
   >{`
-      <Button renderIcon={Add16}>Button</Button>
+      <Button renderIcon={Add}>Button</Button>
     `}</ComponentVariant>
   <ComponentVariant
     id="icon-only"
@@ -151,13 +151,9 @@ import { Add16 } from '@carbon/icons-react';
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}
   >{`
-      <Button
-        hasIconOnly
-        renderIcon={Add16}
-        tooltipAlignment="center"
-        tooltipPosition="bottom"
-        iconDescription="Button description here"
-      />
+     <IconButton align='top' label='Icon button'>
+       <Add size={16}/>
+     </IconButton>
   `}</ComponentVariant>
 </ComponentDemo>