From f9c95d1859aedf8b83d4390b4e2db98c013571af Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Fri, 17 May 2024 13:05:37 -0500
Subject: [PATCH] fix(core): broken Slot functionality in Button

---
 .changeset/small-eagles-switch.md    |  5 +++++
 core/components/ui/button/button.tsx | 16 ++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/small-eagles-switch.md

diff --git a/.changeset/small-eagles-switch.md b/.changeset/small-eagles-switch.md
new file mode 100644
index 000000000..b320c5b1f
--- /dev/null
+++ b/.changeset/small-eagles-switch.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Fix broken Slot functionality in Button
diff --git a/core/components/ui/button/button.tsx b/core/components/ui/button/button.tsx
index df61b5a77..73ed6ef11 100644
--- a/core/components/ui/button/button.tsx
+++ b/core/components/ui/button/button.tsx
@@ -45,13 +45,17 @@ export const Button = forwardRef<ElementRef<'button'>, ButtonProps>(
         ref={ref}
         {...props}
       >
-        {loading && (
-          <span className="absolute z-10 flex h-full w-full items-center justify-center">
-            <Spinner aria-hidden="true" className="animate-spin" />
-            <span className="sr-only">{loadingText}</span>
-          </span>
+        {loading ? (
+          <>
+            <span className="absolute z-10 flex h-full w-full items-center justify-center">
+              <Spinner aria-hidden="true" className="animate-spin" />
+              <span className="sr-only">{loadingText}</span>
+            </span>
+            <span className={cn('invisible flex items-center')}>{children}</span>
+          </>
+        ) : (
+          children
         )}
-        <span className={cn('flex items-center', loading && 'invisible')}>{children}</span>
       </Comp>
     );
   },