diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 9417e2f9460..71254da543f 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -56,6 +56,7 @@ The above story definition can be further improved to take advantage of [Storybo
     'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
     'html/button-story-with-args.js.mdx',
+    'html/button-story-with-args.ts.mdx',
   ]}
 />
 
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
new file mode 100644
index 00000000000..e3f866a1788
--- /dev/null
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+import { Meta, StoryFn } from '@storybook/html';
+
+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',
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args): HTMLButtonElement => {
+  const btn = document.createElement('button');
+  btn.innerText = args.label;
+
+  const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' ');
+
+  return btn;
+};
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+```