Story Writing for Button Component for svelte storybook

[prashant-bain]

Hello there,

I’m building a SvelteKit (Svelte 5) + Storybook 9 setup and trying to replicate Carbon React’s Button stories:

Overview: https://react.carbondesignsystem.com/?path=/docs/components-button--overview

Default: https://react.carbondesignsystem.com/?path=/story/components-button--default

Goal
Recreate the React Storybook layout/behaviors in Svelte—specifically showing two or more Button components in a single story (e.g., Primary + Secondary side by side, and other multi-button examples).

Blockers / Questions

What’s the recommended way to render two buttons inside a single in Svelte?

How can I stack more than one button (e.g., 2, 3, 4+) in the same story—side-by-side or vertically—while still keeping good controls/args?

Is it better to do this via MDX (placing multiple instances inside ) or via CSF with a small wrapper component that renders multiple buttons? Any best practices for controls per button (e.g., separate args for each)? : TRIED, NOT WORKING

What I’ve tried (open to corrections) [NOT WORKED FOR ME]:

MDX idea: Put multiple

components directly in … with a simple flex container.

CSF idea: Create a ButtonGroup.svelte (or ButtonPair.svelte) that accepts primary, secondary, etc. arg objects and renders multiple

instances, then use a single story with object controls for each button.

Environment

SvelteKit + Svelte 5

Storybook 9

Custom Button.svelte (not using Carbon’s default)

Goal is visual/behavioral parity with Carbon React stories

If anyone can share a minimal example (MDX or CSF) or point me to best practices for multi-instance stories with separate controls, that’d be amazing. Thanks! 🙏

Thanks in advance!