From 7abbfc59060268feed4fe77d7e0a0556d9dd804b Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Thu, 26 Feb 2026 11:05:57 +0000
Subject: [PATCH 1/2] chore(button) - update button component to use string for
 badges

---
 .../src/components/Button/Button.stories.svelte      |  9 +++++----
 .../src/components/Button/Button.svelte              |  4 ++--
 .../src/components/Button/Button.test.ts             | 12 +++---------
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Button/Button.stories.svelte b/packages/stacks-svelte/src/components/Button/Button.stories.svelte
index 50181ac6cb..044e3c0235 100644
--- a/packages/stacks-svelte/src/components/Button/Button.stories.svelte
+++ b/packages/stacks-svelte/src/components/Button/Button.stories.svelte
@@ -36,6 +36,10 @@
                 control: "select",
                 options: ButtonWeights,
             },
+            badge: {
+                control: "text",
+                description: "Numeric badge (numbers only)",
+            },
             children: {
                 control: "text",
             },
@@ -227,9 +231,6 @@
                         {#each ButtonVariants as variant (variant)}
                             {#each ButtonWeights as weight (weight)}
                                 {#if !(weight === "clear" && (variant === "featured" || variant === "tonal"))}
-                                    {#snippet badge()}
-                                        198
-                                    {/snippet}
                                     <tr>
                                         <th scope="row" class="va-middle">
                                             {titleCase(variant || "base")}
@@ -246,7 +247,7 @@
                                                     disabled={state ===
                                                         "disabled"}
                                                     {variant}
-                                                    {badge}
+                                                    badge="198"
                                                     {size}
                                                 >
                                                     Badge
diff --git a/packages/stacks-svelte/src/components/Button/Button.svelte b/packages/stacks-svelte/src/components/Button/Button.svelte
index dd264e98ae..41156a39ba 100644
--- a/packages/stacks-svelte/src/components/Button/Button.svelte
+++ b/packages/stacks-svelte/src/components/Button/Button.svelte
@@ -93,7 +93,7 @@
         /**
          * Optional badge to display on the button
          */
-        badge?: Snippet;
+        badge?: `${number}`;
     }
 </script>
 
@@ -197,7 +197,7 @@
         {@render children()}
         <span class="s-btn--badge">
             <span class="s-btn--number">
-                {@render badge()}
+                {badge}
             </span>
         </span>
     {/if}
diff --git a/packages/stacks-svelte/src/components/Button/Button.test.ts b/packages/stacks-svelte/src/components/Button/Button.test.ts
index f426eac00e..dc8b16252e 100644
--- a/packages/stacks-svelte/src/components/Button/Button.test.ts
+++ b/packages/stacks-svelte/src/components/Button/Button.test.ts
@@ -24,15 +24,11 @@ describe("Button", () => {
     it("should render the badge within the button", () => {
         render(Button, {
             children,
-            badge: createRawSnippet(() => ({
-                render: () => "<span>123</span>",
-            })),
+            badge: "123",
         });
         render(Button, {
             children,
-            badge: createRawSnippet(() => ({
-                render: () => "<span>456</span>",
-            })),
+            badge: "456",
         });
 
         // Default button
@@ -46,9 +42,7 @@ describe("Button", () => {
             children: createRawSnippet(() => ({
                 render: () => "<span>test</span>",
             })),
-            badge: createRawSnippet(() => ({
-                render: () => "<span>198</span>",
-            })),
+            badge: "198",
         });
 
         expect(screen.getByRole("button")).to.have.text("test 198");

From dab6d37f293e5a7b60fe03d5ea8b34ca3a493c3f Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Thu, 26 Feb 2026 11:08:52 +0000
Subject: [PATCH 2/2] Create rich-poets-hug.md

---
 .changeset/rich-poets-hug.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/rich-poets-hug.md

diff --git a/.changeset/rich-poets-hug.md b/.changeset/rich-poets-hug.md
new file mode 100644
index 0000000000..916352a217
--- /dev/null
+++ b/.changeset/rich-poets-hug.md
@@ -0,0 +1,9 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+Updated Button component to use string for badges
+
+BREAKING CHANGES:
+
+- `badge` prop in Button component now uses string (numbers only) instead of a Snippet