From 58ce06414591b5a6a1dc904b639f45b97ee4d1d9 Mon Sep 17 00:00:00 2001
From: Khuda Dad Nomani <khudadad414@gmail.com>
Date: Tue, 24 Oct 2023 14:38:59 +0100
Subject: [PATCH] add IconButton stories

---
 .../src/components/IconButton.stories.tsx     | 20 +++++++++++++++++++
 .../src/design-tokens/Icons.stories.mdx       |  2 ++
 2 files changed, 22 insertions(+)
 create mode 100644 apps/design-system/src/components/IconButton.stories.tsx

diff --git a/apps/design-system/src/components/IconButton.stories.tsx b/apps/design-system/src/components/IconButton.stories.tsx
new file mode 100644
index 000000000..f4a40a251
--- /dev/null
+++ b/apps/design-system/src/components/IconButton.stories.tsx
@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+import { Meta } from '@storybook/react';
+import { IconButton } from '@asyncapi/studio-ui'; 
+import { AddIcon } from '@asyncapi/studio-ui/icons'; 
+
+
+const meta: Meta<typeof IconButton> = {
+  component: IconButton,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+    },
+  },
+}
+export default meta;
+
+export const Default = () => <IconButton icon={AddIcon} />
+export const WithText = () => <IconButton icon={AddIcon} text="Click Me" />;
+export const WithClickEvent = () => <IconButton icon={AddIcon} onClick={() => alert('Button clicked!')} />
\ No newline at end of file
diff --git a/apps/design-system/src/design-tokens/Icons.stories.mdx b/apps/design-system/src/design-tokens/Icons.stories.mdx
index c0a87161d..6cfdb2158 100644
--- a/apps/design-system/src/design-tokens/Icons.stories.mdx
+++ b/apps/design-system/src/design-tokens/Icons.stories.mdx
@@ -33,6 +33,7 @@ import {
   UsersIcon,
   WebSocketIcon,
   XMarkIcon,
+  AddIcon,
 } from '@asyncapi/studio-ui/icons'
 
 <Meta 
@@ -80,6 +81,7 @@ Most of the icons below are taken from https://heroicons.com. If you need to add
       UsersIcon,
       WebSocketIcon,
       XMarkIcon,
+      AddIcon,
     ].map((Icon) => (
       <IconItem name={Icon.displayName || Icon.render.name}>
         <Icon />