Storybook Story for Button

import React from 'react';

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

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

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:

tsx
DownloadCopy code
1import React from 'react';
2import { action } from '@storybook/addon-actions';
3import type { Meta, StoryFn } from '@storybook/react';
4import Button from './Button';
5
6export default {
7  title: 'Button',
8  component: Button,
9} as Meta<typeof Button>;
10
11const StoryTemplate: StoryFn<typeof Button> = (args) => <Button {...args} />;
12
13export const Primary = StoryTemplate.bind({});
14Primary.args = {
15  label: 'Primary button',
16  onClick: action('clicked'),
17};
18
19export const Secondary = StoryTemplate.bind({});
20Secondary.args = {
21  label: 'Secondary button',
22  onClick: action('clicked'),
23  style: { backgroundColor: 'gray', color: 'white' },
24};
25
26export const Large = StoryTemplate.bind({});
27Large.args = {
28  label: 'Large button',
29  onClick: action('clicked'),
30  style: { fontSize: '18px' },
31};
32
33export const Small = StoryTemplate.bind({});
34Small.args = {
35  label: 'Small button',
36  onClick: action('clicked'),
37  style: { fontSize: '12px' },
38};

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.