fix(core): broken Slot functionality in Button (#919)

bigcommerce · May 17, 2024 · cde181e · cde181e
1 parent ff231c9
commit cde181e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/.changeset/small-eagles-switch.md 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
@@ -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>
     );
   },