docs(button): add button with icon example to storybook (#18851)

* docs(button): add button with icon example to storybook

* docs: update button stories

* chore: spacing

* chore(test): update button tests

---------

Co-authored-by: Kenny Lam <909118+kennylam@users.noreply.github.com>

Author: alisonjoseph

e2e/components/Button/Button-test.avt.e2e.js

@@ -122,7 +122,7 @@ test.describe('@avt Button', () => {
       },
     });
 
-    await expect(page.getByRole('button')).toBeDisabled();
+    await expect(page.getByRole('button').first()).toBeDisabled();
     await expect(page).toHaveNoACViolations('Button-disabled');
   });
 
@@ -134,9 +134,9 @@ test.describe('@avt Button', () => {
         theme: 'white',
       },
     });
-    await expect(page.getByRole('button')).toBeVisible();
+    await expect(page.getByRole('button').first()).toBeVisible();
     await page.keyboard.press('Tab');
-    await expect(page.getByRole('button')).toBeFocused();
+    await expect(page.getByRole('button').first()).toBeFocused();
   });
 
   test('@avt-advanced-states mouse interaction', async ({ page }) => {
@@ -147,9 +147,9 @@ test.describe('@avt Button', () => {
         theme: 'white',
       },
     });
-    await expect(page.getByRole('button')).toBeVisible();
-    await page.getByRole('button').click();
-    await expect(page.getByRole('button')).toBeFocused();
+    await expect(page.getByRole('button').first()).toBeVisible();
+    await page.getByRole('button').first().click();
+    await expect(page.getByRole('button').first()).toBeFocused();
   });
 
   test('@avt-advanced-states hover state', async ({ page }) => {
@@ -160,8 +160,8 @@ test.describe('@avt Button', () => {
         theme: 'white',
       },
     });
-    await expect(page.getByRole('button')).toBeVisible();
-    await page.getByRole('button').hover();
+    await expect(page.getByRole('button').first()).toBeVisible();
+    await page.getByRole('button').first().hover();
 
     await expect(page).toHaveNoACViolations('Button-hover');
   });

packages/react/src/components/Button/Button.stories.js

@@ -10,6 +10,7 @@ import { action } from '@storybook/addon-actions';
 import { Add, Notification } from '@carbon/icons-react';
 import { default as Button, ButtonSkeleton } from '../Button';
 import ButtonSet from '../ButtonSet';
+import { Stack } from '../Stack';
 import mdx from './Button.mdx';
 import './button-story.scss';
 
@@ -60,22 +61,39 @@ export default {
 };
 
 export const Default = (args) => {
-  return <Button {...args}>Button</Button>;
+  return (
+    <Stack gap={7}>
+      <Button {...args}>Button</Button>
+      <Button renderIcon={Add} {...args}>
+        Button
+      </Button>
+    </Stack>
+  );
 };
 
 export const Secondary = (args) => {
   return (
-    <Button kind="secondary" {...args}>
-      Button
-    </Button>
+    <Stack gap={7}>
+      <Button kind="secondary" {...args}>
+        Button
+      </Button>
+      <Button kind="secondary" renderIcon={Add} {...args}>
+        Button
+      </Button>
+    </Stack>
   );
 };
 
 export const Tertiary = (args) => {
   return (
-    <Button kind="tertiary" {...args}>
-      Button
-    </Button>
+    <Stack gap={7}>
+      <Button kind="tertiary" {...args}>
+        Button
+      </Button>
+      <Button kind="tertiary" renderIcon={Add} {...args}>
+        Button
+      </Button>
+    </Stack>
   );
 };
 
@@ -99,9 +117,14 @@ export const Danger = (args) => {
 
 export const Ghost = (args) => {
   return (
-    <Button kind="ghost" {...args}>
-      Button
-    </Button>
+    <Stack gap={7}>
+      <Button kind="ghost" {...args}>
+        Button
+      </Button>
+      <Button kind="ghost" renderIcon={Add} {...args}>
+        Button
+      </Button>
+    </Stack>
   );
 };