storybook/docs/snippets/html/button-story-with-args.ts.mdx

```ts
import { Meta, StoryFn } from '@storybook/html';

export default {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/html/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',
};
```