Button.stories.tsx•2.39 kB
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './index';
const meta: Meta<typeof Button> = {
title: 'Components/Button',
component: Button,
tags: ['autodocs'],
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'tertiary'],
},
size: {
control: 'select',
options: ['sm', 'md', 'lg'],
},
fullWidth: {
control: 'boolean',
},
isLoading: {
control: 'boolean',
},
disabled: {
control: 'boolean',
},
},
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: {
children: 'Button',
variant: 'primary',
},
};
export const Secondary: Story = {
args: {
children: 'Button',
variant: 'secondary',
},
};
export const Tertiary: Story = {
args: {
children: 'Button',
variant: 'tertiary',
},
};
export const Small: Story = {
args: {
children: 'Button',
size: 'sm',
},
};
export const Medium: Story = {
args: {
children: 'Button',
size: 'md',
},
};
export const Large: Story = {
args: {
children: 'Button',
size: 'lg',
},
};
export const FullWidth: Story = {
args: {
children: 'Button',
fullWidth: true,
},
};
export const Loading: Story = {
args: {
children: 'Button',
isLoading: true,
},
};
export const Disabled: Story = {
args: {
children: 'Button',
disabled: true,
},
};
export const WithLeftIcon: Story = {
args: {
children: 'Button',
leftIcon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
),
},
};
export const WithRightIcon: Story = {
args: {
children: 'Button',
rightIcon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
),
},
};