From bdaa8b411196d2f5ebc012cb7053a55d5fab53f6 Mon Sep 17 00:00:00 2001
From: Aylong <69762909+AyIong@users.noreply.github.com>
Date: Wed, 8 Jan 2025 07:46:36 +0200
Subject: [PATCH] Fixes icon-only button extra padding

---
 lib/components/Button.tsx  |  4 ++--
 stories/Button.stories.tsx | 19 ++++++++++++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/lib/components/Button.tsx b/lib/components/Button.tsx
index 9295e8c..9b76818 100644
--- a/lib/components/Button.tsx
+++ b/lib/components/Button.tsx
@@ -151,7 +151,7 @@ export function Button(props: Props) {
       <div className="Button__content">
         {icon && iconPosition !== 'right' && (
           <Icon
-            mr={toDisplay ? 0.5 : 0}
+            mr={toDisplay && 0.5}
             name={icon}
             color={iconColor}
             rotation={iconRotation}
@@ -173,7 +173,7 @@ export function Button(props: Props) {
         )}
         {icon && iconPosition === 'right' && (
           <Icon
-            ml={toDisplay ? 0.5 : 0}
+            ml={toDisplay && 0.5}
             name={icon}
             color={iconColor}
             rotation={iconRotation}
diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
index b08accf..25ad1b0 100644
--- a/stories/Button.stories.tsx
+++ b/stories/Button.stories.tsx
@@ -17,15 +17,28 @@ export const Default: Story = {
   },
 };
 
-type CheckboxStory = StoryObj<ComponentProps<typeof Button.Checkbox>>;
-
 export const WithIcon: Story = {
   args: {
-    children: 'Submit',
     icon: 'envelope',
   },
+
+  render: (args) => {
+    return (
+      <>
+        <Button {...args}>Default</Button>
+        <br />
+        <Button {...args} iconPosition="right">
+          Icon Right
+        </Button>
+        <br />
+        <Button {...args} /> Only Icon
+      </>
+    );
+  },
 };
 
+type CheckboxStory = StoryObj<ComponentProps<typeof Button.Checkbox>>;
+
 export const Checkbox: CheckboxStory = {
   args: {
     children: 'Click me',