fbredius/storybook

View on GitHub
docs/snippets/svelte/button-story-with-args.native-format.mdx

Summary

Maintainability
Test Coverage
```html
<!-- Button.stories.svelte -->

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
  
  import Button from './Button.svelte';
</script>

<Meta
  title="Button"
  component={Button}
  argTypes={{
    label: { control: 'text' },
    primary: { control: 'boolean' },
  }}
/>

<!--👇 We create a “template” of how args map to rendering -->

<Template let:args>
  <Button {...args} />
</Template>

<!-- 👇 Each story then reuses that template -->

<Story
  name='Primary'
  args={{
    primary: true,
    label: 'Button'
  }}
/>
```