From 8af5145b56e944f0c6da53a1b5576d2100ac52c2 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 12 Mar 2025 12:12:13 +0000
Subject: [PATCH] fixes extra span causing issues (#20004)

---
 packages/ui/components/button/Button.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 3add1deeaa..2721da4e5b 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -280,14 +280,15 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
             )}
           </>
         ))}
-      {props.children &&
-        (variant === "fab" ? (
-          <span className={`hidden md:inline ${loading ? "invisible" : "visible "}`}>{props.children}</span>
-        ) : (
-          <span className={loading ? "invisible" : "visible group-active:translate-y-[0.5px]"}>
-            {props.children}
-          </span>
-        ))}
+      <div
+        className={classNames(
+          "contents", // This makes the div behave like it doesn't exist in the layout
+          loading ? "invisible" : "visible",
+          variant === "fab" ? "hidden md:contents" : "",
+          "group-active:translate-y-[0.5px]"
+        )}>
+        {props.children}
+      </div>
       {loading && (
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
           <svg