From d6b64b54a189502f9a22414a079d5dc7d907a420 Mon Sep 17 00:00:00 2001
From: Jaideep <guntupallijaideep@gmail.com>
Date: Wed, 21 Jun 2023 11:49:05 +0530
Subject: [PATCH] feat: added playground for buttonGroup story

---
 .../buttonGroup/buttongroup.stories.mdx       | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index 4ae04619fa..7201ed4b90 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -47,7 +47,7 @@ Button group enables multiple buttons to be combined into a single unit. It offe
 
 <Canvas>
   <Story
-    name="All Variatns">
+    name="All Variants">
     <VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <ButtonGroup>
@@ -81,3 +81,38 @@ Button group enables multiple buttons to be combined into a single unit. It offe
     </VariantsTable>
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="ButtonGroup Playground"
+    args={{
+      color: 'secondary',
+      combined: false,
+    }}
+    argTypes={{
+      color: {
+        control: {
+          type: 'select',
+          options: ['primary', 'secondary', 'minimal'],
+        },
+      },
+      combined: {
+        control: {
+          type: 'boolean',
+        },
+      },
+    }}
+  >
+    {({ color, combined }) => (
+      <VariantsTable titles={[`${color}`]} columnMinWidth={150}>
+        <VariantRow  variant="">
+          <ButtonGroup combined={combined}>
+            <Button StartIcon={Trash} variant="icon" color={color}  />
+            <Button StartIcon={Navigation} variant="icon" color={color}/>
+            <Button StartIcon={Clipboard} variant="icon"  color={color}/>
+          </ButtonGroup>
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>