diff --git a/playground/shared/src/ShareButton.tsx b/playground/shared/src/ShareButton.tsx
index c6bbeeb83e..a79ab4d0a3 100644
--- a/playground/shared/src/ShareButton.tsx
+++ b/playground/shared/src/ShareButton.tsx
@@ -1,21 +1,23 @@
 import { useEffect, useState } from "react";
 import AstralButton from "./AstralButton";
 
+type ShareStatus = "initial" | "copying" | "copied";
+
 export default function ShareButton({
   onShare,
 }: {
   onShare: () => Promise<void>;
 }) {
-  const [copied, setCopied] = useState(false);
+  const [status, setStatus] = useState<ShareStatus>("initial");
 
   useEffect(() => {
-    if (copied) {
-      const timeout = setTimeout(() => setCopied(false), 2000);
+    if (status === "copied") {
+      const timeout = setTimeout(() => setStatus("initial"), 2000);
       return () => clearTimeout(timeout);
     }
-  }, [copied]);
+  }, [status]);
 
-  return copied ? (
+  return status === "copied" ? (
     <AstralButton
       type="button"
       className="relative flex-none leading-6 py-1.5 px-3 cursor-auto dark:shadow-copied"
@@ -32,10 +34,17 @@ export default function ShareButton({
     <AstralButton
       type="button"
       className="relative flex-none leading-6 py-1.5 px-3 shadow-xs disabled:opacity-50"
-      disabled={copied}
+      disabled={status === "copying"}
       onClick={async () => {
-        await onShare();
-        setCopied(true);
+        setStatus("copying");
+        try {
+          await onShare();
+          setStatus("copied");
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error("Failed to share playground", error);
+          setStatus("initial");
+        }
       }}
     >
       <span