diff --git a/docs/api/csf.md b/docs/api/csf.md
index af8b1d8041cb..b96c2fd970e3 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -109,24 +109,12 @@ Now consider the same example, re-written with args:
     'vue/button-story-click-handler-args.2.js.mdx',
     'vue/button-story-click-handler-args.3.js.mdx',
     'angular/button-story-click-handler-args.ts.mdx',
+    'svelte/button-story-click-handler-args.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-At first blush, this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'react/button-story-click-handler-simple-docs.js.mdx',
-    'vue/button-story-click-handler-simple-docs.2.js.mdx',
-    'vue/button-story-click-handler-simple-docs.3.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
 
 Or even more simply:
 
@@ -136,6 +124,8 @@ Or even more simply:
   paths={[
     'react/button-story-click-handler-simplificated.js.mdx',
     'angular/button-story-click-handler-simplificated.ts.mdx',
+    'vue/button-story-click-handler-simplificated.js.mdx',
+    'svelte/button-story-click-handler-simplificated.native-format.mdx',
   ]}
 />
 
diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
index 7ed232bab028..024ee79c92a6 100644
--- a/docs/snippets/angular/button-story-click-handler-args.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
@@ -16,9 +16,11 @@ export default {
   component: Button,
 } as Meta;
 
-export const Text: Story = (args) => ({
-  props: args,
-  template: `<storybook-button [label]="label" (onClick)="onClick()"></storybook-button>`,
+export const Text: Story = ({ label, onClick }) => ({
+  props: {
+    label,
+    onClick,
+  },
 });
 
 Text.args = {
diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx
index bad3e5076f68..0219ef1a3d6e 100644
--- a/docs/snippets/react/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-args.js.mdx
@@ -17,4 +17,9 @@ export default {
 };
 
 export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
+
+Text.args = {
+  label: 'Hello',
+  onClick: action('clicked'),
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
deleted file mode 100644
index bad3e5076f68..000000000000
--- a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-```js
-// Button.stories.js|jsx|ts|tsx
-
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-
-import { Button } from './Button';
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-click-handler-args.js.mdx b/docs/snippets/svelte/button-story-click-handler-args.js.mdx
new file mode 100644
index 000000000000..9970840aa256
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler-args.js.mdx
@@ -0,0 +1,31 @@
+```js
+// Button.stories.js
+
+import Button from './Button.svelte';
+
+import { action } from '@storybook/addon-actions';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+  component: Button,
+};
+
+export const Text  = ({ label, click }) => ({
+  Component: Button,
+  props: {
+    label,
+  },
+  on: {
+    click,
+  },
+});
+
+Text.args = {
+  label: 'Hello',
+  click: action('clicked'),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
new file mode 100644
index 000000000000..b56d194e15b3
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
@@ -0,0 +1,27 @@
+```html
+<!-- Button.stories.svelte -->
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import Button from './Button.svelte';
+</script>
+
+<!-- 
+  See https://storybook.js.org/docs/svelte/essentials/actions#action-argtype-annotation
+  to learn how to set up argTypes for actions
+--> 
+
+<Meta
+  title="Button"
+  component={Button}
+  argTypes={{
+    onClick: { action: "onClick" },
+  }}
+/>
+
+<Template let:args>
+  <Button {...args} on:click={args.onClick} />
+</Template>
+
+<Story name="Text" args={{ label: 'Hello' }}/>
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-click-handler.native-format.mdx b/docs/snippets/svelte/button-story-click-handler.native-format.mdx
index c9aaab68c884..ab444718488e 100644
--- a/docs/snippets/svelte/button-story-click-handler.native-format.mdx
+++ b/docs/snippets/svelte/button-story-click-handler.native-format.mdx
@@ -1,5 +1,5 @@
 ```html
-<-- Button.stories.svelte -->
+<!-- Button.stories.svelte -->
 
 <script>
   import { Meta, Story } from '@storybook/addon-svelte-csf';
@@ -12,6 +12,6 @@
 <Meta title="Button" component={Button}/>
 
 <Story name="Text">
-  <Button text="Custom text" on:click={action('clicked')}/>
+  <Button text="Hello" on:click={action('clicked')}/>
 </Story>
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
index b6f5b5ef9c4f..703274ec5570 100644
--- a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
@@ -19,6 +19,7 @@ export const Text = (args, { argTypes }) => ({
   components: { Button },
   template: '<Button @onClick="onClick" :label="label" />'
 });
+
 Text.args = {
   label: 'Hello',
   onClick: action('clicked'),
diff --git a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
index b00791e0a657..b192f70be997 100644
--- a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
@@ -14,17 +14,19 @@ export default {
   component: Button,
 };
 
-export const Text = (args) => ({
+export const Text = ({ label, onClick }) => ({
   components: { Button },
   setup() {
     return {
-      label: args.label,
-      onClick: action('clicked'),
+      label,
+      onClick,
     };
   },
   template: '<Button @onClick="onClick" :label="label" />',
 });
+
 Text.args = {
   label: 'Hello',
+  onClick: action('clicked'),
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-simple-docs.2.js.mdx b/docs/snippets/vue/button-story-click-handler-simple-docs.2.js.mdx
deleted file mode 100644
index 0ebb627b9db1..000000000000
--- a/docs/snippets/vue/button-story-click-handler-simple-docs.2.js.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-};
-
-export const Text  = (args, { argTypes }) => ({
-  components: { Button },
-  props: Object.keys(argTypes),
-  template: '<Button v-bind="$props" />',
-});
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-simple-docs.3.js.mdx b/docs/snippets/vue/button-story-click-handler-simple-docs.3.js.mdx
deleted file mode 100644
index c619adc20aff..000000000000
--- a/docs/snippets/vue/button-story-click-handler-simple-docs.3.js.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = ({ label }) => ({
-  components: { Button },
-  setup() {
-    return {
-      label,
-      onClick: action('clicked'),
-    };
-  },
-  template: '<Button :label="label" @click="onClick" />',
-});
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
new file mode 100644
index 000000000000..7fffcdbcab4e
--- /dev/null
+++ b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
@@ -0,0 +1,29 @@
+```js
+// Button.stories.js
+
+import Button from './Button.vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  /*
+   * See https://storybook.js.org/docs/vue/essentials/actions#action-argtype-annotation
+   * to learn how to set up argTypes for actions
+   */
+  argTypes: {
+    onClick: {},
+  },
+};
+
+export const Text = (args) => ({
+  components: { Button },
+  setup() {
+    return { args };
+  },
+  template: '<Button v-bind="args" />',
+});
+```
\ No newline at end of file