From 869d16384ba82f20cf26a4496808674effa903ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Krzy=C5=BCanowski?= <matkrzy94@gmail.com>
Date: Tue, 10 Jan 2023 19:23:05 +0100
Subject: [PATCH] feat(Button): add as prop to IconButton inside of the Button
 component (#12900)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .all-contributorsrc                             |  9 +++++++++
 README.md                                       |  1 +
 packages/react/src/components/Button/Button.js  |  1 +
 .../components/Button/__tests__/Button-test.js  | 17 +++++++++++++++++
 4 files changed, 28 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index c7e861f5680a..5ddb9970cdf4 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -977,6 +977,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "matkrzy",
+      "name": "Mateusz Krzyżanowski",
+      "avatar_url": "https://avatars.githubusercontent.com/u/14991661?v=4",
+      "profile": "https://github.com/matkrzy",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index 88836687934e..09b447f023fd 100644
--- a/README.md
+++ b/README.md
@@ -212,6 +212,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/Shankar-CodeJunkie"><img src="https://avatars.githubusercontent.com/u/56068832?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ShankarV-CodeJunkie</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Shankar-CodeJunkie" title="Code">💻</a></td>
     <td align="center"><a href="http://darioplatania.github.io/"><img src="https://avatars.githubusercontent.com/u/11682859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>dario platania</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=darioplatania" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/matkrzy"><img src="https://avatars.githubusercontent.com/u/14991661?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mateusz Krzyżanowski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=matkrzy" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index a124731294f6..c978ceedf472 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -158,6 +158,7 @@ const Button = React.forwardRef(function Button(
 
     return (
       <IconButton
+        as={as}
         align={align}
         label={iconDescription}
         kind={kind}
diff --git a/packages/react/src/components/Button/__tests__/Button-test.js b/packages/react/src/components/Button/__tests__/Button-test.js
index 48ba8342ad94..2e08b22babb7 100644
--- a/packages/react/src/components/Button/__tests__/Button-test.js
+++ b/packages/react/src/components/Button/__tests__/Button-test.js
@@ -151,5 +151,22 @@ describe('Button', () => {
       render(<Button hasIconOnly iconDescription="test" renderIcon={Add} />);
       expect(screen.getByLabelText('test')).toHaveClass('cds--btn--icon-only');
     });
+
+    it('should support rendering as a custom element with the `as` prop', () => {
+      function CustomComponent(props) {
+        return <div data-testid="custom-component" {...props} />;
+      }
+
+      render(
+        <Button
+          hasIconOnly
+          iconDescription="test"
+          renderIcon={Add}
+          as={CustomComponent}
+        />
+      );
+      expect(screen.getByTestId('custom-component')).toBeInTheDocument();
+      expect(screen.getByLabelText('test')).toHaveClass('cds--btn--icon-only');
+    });
   });
 });