From c59b321dbb73b2e194cc61d648ebe37319def004 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Thu, 10 Apr 2025 14:17:37 -0400
Subject: [PATCH] adds button story and docs for button with icon spacing
 (#14198)

* add story & docs for button with icon spacing

* add back block story removed in error

* remove unnecessary args
---
 libs/components/src/button/button.mdx        | 21 +++++++++++++++++++
 libs/components/src/button/button.stories.ts | 22 ++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/libs/components/src/button/button.mdx b/libs/components/src/button/button.mdx
index 21c992982d..61874922fc 100644
--- a/libs/components/src/button/button.mdx
+++ b/libs/components/src/button/button.mdx
@@ -73,6 +73,27 @@ where the width is fixed and the text wraps to 2 lines if exceeding the button
 
 <Canvas of={stories.Block} />
 
+## With Icon
+
+To ensure consistent icon spacing, the icon should have .5rem spacing on left or right(depending on
+placement).
+
+> NOTE: Use logical css properties to ensure LTR/RTL support.
+
+**If icon is placed before button label**
+
+```html
+<i class="bwi bwi-plus tw-me-2"></i>
+```
+
+**If icon is placed after button label**
+
+```html
+<i class="bwi bwi-plus tw-ms-2"></i>
+```
+
+<Canvas of={stories.WithIcon} />
+
 ## Accessibility
 
 Please follow these guidelines to ensure that buttons are accessible to all users.
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index 6024b0559f..448e290cce 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -120,3 +120,25 @@ export const Block: Story = {
     block: true,
   },
 };
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <span class="tw-flex tw-gap-8">
+        <div>
+          <button bitButton [buttonType]="buttonType" [block]="block">
+            <i class="bwi bwi-plus tw-me-2"></i>
+            Button label
+          </button>
+        </div>
+        <div>
+          <button bitButton [buttonType]="buttonType" [block]="block">
+            Button label
+            <i class="bwi bwi-plus tw-ms-2"></i>
+          </button>
+        </div>
+      </span>
+    `,
+  }),
+};