From 502585601e5f1954893e9c29a90d14edec4c4042 Mon Sep 17 00:00:00 2001
From: Bilux <i.bilux@gmail.com>
Date: Wed, 19 Oct 2022 11:40:33 +0100
Subject: [PATCH] export an "icon only variant" option

---
 src/Button/Button.svelte        | 15 ++++++++++++---
 types/Button/Button.svelte.d.ts |  6 ++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 3f552730..8954b1b3 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -25,6 +25,11 @@
    */
   export let isSelected = false;
 
+  /**
+   * Set to `true` for the icon-only variant
+   */
+   export let iconOnly = false;
+
   /**
    * Specify the icon to render
    * @type {typeof import("svelte").SvelteComponent}
@@ -85,7 +90,7 @@
   $: if (ctx && ref) {
     ctx.declareRef(ref);
   }
-  $: hasIconOnly = icon && !$$slots.default;
+  $: hasIconOnly = iconOnly || (icon && !$$slots.default);
   $: buttonProps = {
     type: href && !disabled ? undefined : type,
     tabindex,
@@ -152,8 +157,10 @@
   >
     {#if hasIconOnly}
       <span class:bx--assistive-text="{true}">{iconDescription}</span>
+    {:else}
+      <slot />
     {/if}
-    <slot /><svelte:component
+    <svelte:component
       this="{icon}"
       aria-hidden="true"
       class="bx--btn__icon"
@@ -171,8 +178,10 @@
   >
     {#if hasIconOnly}
       <span class:bx--assistive-text="{true}">{iconDescription}</span>
+    {:else}
+      <slot />
     {/if}
-    <slot /><svelte:component
+    <svelte:component
       this="{icon}"
       aria-hidden="true"
       class="bx--btn__icon"
diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts
index 529b8f7e..1bf8810d 100644
--- a/types/Button/Button.svelte.d.ts
+++ b/types/Button/Button.svelte.d.ts
@@ -38,6 +38,12 @@ export interface ButtonProps
    */
   isSelected?: boolean;
 
+  /**
+   * Set to `true` for the icon-only variant
+   * @default false
+   */
+   iconOnly?: boolean;
+
   /**
    * Specify the icon to render
    * @default undefined