score:24

Accepted answer

you need to use the typescript version, it's an option in the docs now (https://storybook.js.org/docs/react/get-started/whats-a-story), but the relevant code is below:

import {meta, story} from "@storybook/react";

export default {
  title: "button",
  component: button,
} as meta;

//👇 we create a “template” of how args map to rendering
const template: story<buttonprops> = (args) => <button {...args} />;

export const primary = template.bind({});

primary.args = {
  primary: true,
  label: 'primary',
};

score:3

if you are using vue3

import button from '../components/button.vue'
import { ibuttonprops } from '../types/types'
import { meta, story } from '@storybook/vue3'

export default {
  title: 'example/button',
  component: button,
  argtypes:{
    backgroundcolor: { control: 'color' },
    size: {
      control: { type: 'select', options: ['small', 'medium', 'large'] },
    },
    onclick: {},
  },
} as meta;


    const template: story<ibuttonprops>  = (args ) => ({
  components: { button },
  setup() {
    return { args }
  },
  template: '<button v-bind="args" />',
})

export const primary = template.bind({})
primary.args = {
  primary: true,
  title: '\u{1f9d1}\u{200d}\u{1f3a8}',
  backgrouncolor: 'red'
}

Related Query

More Query from same tag