Storybook Story for Button

import React from 'react';

interface ButtonProps { label: string; onClick: () => void; style?: React.CSSProperties; }

const Button: React.FC = ({ label, onClick, style }) => { return ( <button onClick={onClick} style={{ padding: '10px 20px', ...style }}> {label} ); };

export default Button;

Based on the provided Button component, I'll create a Storybook story using the CSF v2 format. The story will include different variants of the Button component to demonstrate its functionality, including the onClick event using the action function from '@storybook/addon-actions'.

Here's the Storybook story for your Button component:

import React from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta, StoryFn } from '@storybook/react';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
} as Meta<typeof Button>;

const StoryTemplate: StoryFn<typeof Button> = (args) => <Button {...args} />;

export const Primary = StoryTemplate.bind({});
Primary.args = {
  label: 'Primary button',
  onClick: action('clicked'),
};

export const Secondary = StoryTemplate.bind({});
Secondary.args = {
  label: 'Secondary button',
  onClick: action('clicked'),
  style: { backgroundColor: 'gray', color: 'white' },
};

export const Large = StoryTemplate.bind({});
Large.args = {
  label: 'Large button',
  onClick: action('clicked'),
  style: { fontSize: '18px' },
};

export const Small = StoryTemplate.bind({});
Small.args = {
  label: 'Small button',
  onClick: action('clicked'),
  style: { fontSize: '12px' },
};

This code defines four different button variants - Primary, Secondary, Large, and Small - to showcase the component's flexibility with different props, especially with custom styles. The action function is used to simulate the onClick event in Storybook, allowing you to see the interaction when the buttons are clicked.