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
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}
|
{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}`;
}
@@ -197,7 +197,7 @@
{@render children()}
- {@render badge()}
+ {badge}
{/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: () => "123",
- })),
+ badge: "123",
});
render(Button, {
children,
- badge: createRawSnippet(() => ({
- render: () => "456",
- })),
+ badge: "456",
});
// Default button
@@ -46,9 +42,7 @@ describe("Button", () => {
children: createRawSnippet(() => ({
render: () => "test",
})),
- badge: createRawSnippet(() => ({
- render: () => "198",
- })),
+ badge: "198",
});
expect(screen.getByRole("button")).to.have.text("test 198");
|