ContextQMD
Back to Storybook

Csf 2 Example Story

docs/_snippets/csf-2-example-story.md

10.3.62.4 KB
Original Source
ts
// Other imports and story implementation
export const Basic: Story = (args) => ({
  props: args,
});
js
// Other imports and story implementation
export const Basic = (args) => <Button {...args} />;
ts
// Other imports and story implementation
export const Basic: ComponentStory<typeof Button> = (args) => <Button {...args} />;
js
// Other imports and story implementation
export const Basic = (args) => <Button {...args} />;
ts
// Other imports and story implementation
export const Basic: ComponentStory<typeof Button> = (args) => <Button {...args} />;
js
// Other imports and story implementation
export const Basic = (args) => ({
  Component: Button,
  props: args,
});
ts
// Other imports and story implementation
export const Basic: StoryFn<typeof Button> = (args) => ({
  Component: Button,
  props: args,
});
js
// Other imports and story implementation
export const Basic = (args) => ({
  components: { Button },
  setup() {
    return { args };
  },
  template: '<Button v-bind="args" />',
});
ts
// Other imports and story implementation
export const Basic: StoryFn<typeof Button> = (args) => ({
  components: { Button },
  setup() {
    return { args };
  },
  template: '<Button v-bind="args" />',
});
js
// Other imports and story implementation

export const Basic = ({ primary, size, label }) =>
  html`<custom-button ?primary=${primary} size=${size} label=${label}></custom-button>`;
ts
// Other imports and story implementation

export const Basic: Story = ({ primary, backgroundColor, size, label }) =>
  html`<custom-button ?primary=${primary} size=${size} label=${label}></custom-button>`;