48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Button } from './Button.js';
|
|
|
|
const meta: Meta<typeof Button> = {
|
|
title: 'Components/Button',
|
|
component: Button,
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['primary', 'secondary', 'ghost', 'destructive', 'outline', 'subtle', 'link'],
|
|
},
|
|
size: { control: 'select', options: ['sm', 'md', 'lg'] },
|
|
loading: { control: 'boolean' },
|
|
disabled: { control: 'boolean' },
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Button>;
|
|
|
|
export const Primary: Story = {
|
|
args: { children: 'Primary Button', variant: 'primary' },
|
|
};
|
|
|
|
export const Secondary: Story = {
|
|
args: { children: 'Secondary Button', variant: 'secondary' },
|
|
};
|
|
|
|
export const Ghost: Story = {
|
|
args: { children: 'Ghost Button', variant: 'ghost' },
|
|
};
|
|
|
|
export const Danger: Story = {
|
|
args: { children: 'Danger Button', variant: 'destructive' },
|
|
};
|
|
|
|
export const Loading: Story = {
|
|
args: { children: 'Loading...', variant: 'primary', loading: true },
|
|
};
|
|
|
|
export const Small: Story = {
|
|
args: { children: 'Small', variant: 'primary', size: 'sm' },
|
|
};
|
|
|
|
export const Large: Story = {
|
|
args: { children: 'Large', variant: 'primary', size: 'lg' },
|
|
};
|