fix: icon button component demo

carbon-design-system · Mar 22, 2022 · 30aa011 · 30aa011
1 parent 87d54d0
commit 30aa011
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 21 deletions.
diff --git 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
@@ -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>