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/4] 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/4] 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

From 74c57528b299302d06fd196fbcf95deaaac2234c Mon Sep 17 00:00:00 2001
From: Dan Cormier <dancormierall@gmail.com>
Date: Fri, 1 May 2026 17:35:36 -0400
Subject: [PATCH 3/4] fix(docs): type button size table props

---
 .../public/system/components/buttons/SizeTable.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/stacks-docs/src/docs/public/system/components/buttons/SizeTable.svelte b/packages/stacks-docs/src/docs/public/system/components/buttons/SizeTable.svelte
index 53ec4f10d9..a92e26ca57 100644
--- a/packages/stacks-docs/src/docs/public/system/components/buttons/SizeTable.svelte
+++ b/packages/stacks-docs/src/docs/public/system/components/buttons/SizeTable.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
   import { Button } from '@stackoverflow/stacks-svelte';
 
-  let { sizes } = $props();
+  type ButtonSize = '' | 'xs' | 'sm' | 'lg';
+  type SizeInfo = { name: string; fs: string; class: string };
 
-  const getSizeInfo = (size) => {
-    const sizeMap = {
+  let { sizes }: { sizes: ButtonSize[] } = $props();
+
+  const getSizeInfo = (size: ButtonSize): SizeInfo => {
+    const sizeMap: Record<ButtonSize, SizeInfo> = {
       'xs': { name: 'Extra Small', fs: '12px', class: 's-btn__xs' },
       'sm': { name: 'Small', fs: '13px', class: 's-btn__sm' },
       '': { name: 'Default', fs: '14px', class: 'N/A' },
       'lg': { name: 'Large', fs: '17px', class: 's-btn__lg' }
     };
-    return sizeMap[size] || sizeMap[''];
+    return sizeMap[size];
   };
 </script>
 

From 7a51d520dd897125c8f8904b029d48af858bbea5 Mon Sep 17 00:00:00 2001
From: Dan Cormier <dancormierall@gmail.com>
Date: Fri, 1 May 2026 17:43:55 -0400
Subject: [PATCH 4/4] fix(docs): render button badges as strings

---
 .../system/components/buttons/BadgeButtonTable.svelte    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/stacks-docs/src/docs/public/system/components/buttons/BadgeButtonTable.svelte b/packages/stacks-docs/src/docs/public/system/components/buttons/BadgeButtonTable.svelte
index d121334f27..0ae029416c 100644
--- a/packages/stacks-docs/src/docs/public/system/components/buttons/BadgeButtonTable.svelte
+++ b/packages/stacks-docs/src/docs/public/system/components/buttons/BadgeButtonTable.svelte
@@ -49,21 +49,18 @@
                 </div>
               </td>
               <td class="va-middle ta-center px4">
-                <Button class="ws-nowrap" {variant} {weight}>
+                <Button class="ws-nowrap" {variant} {weight} badge="198">
                   Active
-                  {#snippet badge()}198{/snippet}
                 </Button>
               </td>
               <td class="va-middle ta-center px4">
-                <Button class="ws-nowrap" {variant} {weight} selected aria-pressed="true">
+                <Button class="ws-nowrap" {variant} {weight} badge="198" selected aria-pressed="true">
                   Active
-                  {#snippet badge()}198{/snippet}
                 </Button>
               </td>
               <td class="va-middle ta-center px4">
-                <Button class="ws-nowrap" {variant} {weight} disabled>
+                <Button class="ws-nowrap" {variant} {weight} badge="198" disabled>
                   Active
-                  {#snippet badge()}198{/snippet}
                 </Button>
               </td>
             </tr>