consolelog.tools logo

Storybook Story Generator

Generate Storybook stories for your components

Component Configuration

Component Props

Generated Story

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    "variant": {
        "control": "select",
        "options": [
            "primary",
            "secondary",
            "outline"
        ]
    },
    "size": {
        "control": "select",
        "options": [
            "sm",
            "md",
            "lg"
        ]
    },
    "disabled": {
        "control": "boolean"
    }
},
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Default: Story = {
  args: {
    "variant": "primary",
    "size": "md",
    "disabled": false
},
};

export const Playground: Story = {
  args: {
    "variant": "primary",
    "size": "md",
    "disabled": false
},
  render: (args) => <Button {...args} />,
};

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Frequently Asked Questions - Storybook Story Generator