eventx-design-system/dist/components/Button.stories.js

Design System do EventX

import { Button } from './Button';
const meta = {
    title: 'Components/Button',
    component: Button,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: { type: 'select' },
            options: ['primary', 'secondary', 'outline', 'ghost'],
        },
        size: {
            control: { type: 'select' },
            options: ['sm', 'md', 'lg'],
        },
        fullWidth: {
            control: { type: 'boolean' },
        },
        disabled: {
            control: { type: 'boolean' },
        },
    },
};
export default meta;
export const Default = {
    args: {
        children: 'Button',
        variant: 'primary',
        size: 'md',
        fullWidth: false,
        disabled: false,
    },
};
export const Primary = {
    args: {
        children: 'Primary',
        variant: 'primary',
    },
};
export const Secondary = {
    args: {
        children: 'Secondary',
        variant: 'secondary',
    },
};
export const Outline = {
    args: {
        children: 'Outline',
        variant: 'outline',
    },
};
export const Ghost = {
    args: {
        children: 'Ghost',
        variant: 'ghost',
    },
};
export const Small = {
    args: {
        children: 'Small',
        size: 'sm',
    },
};
export const Large = {
    args: {
        children: 'Large',
        size: 'lg',
    },
};
export const FullWidth = {
    args: {
        children: 'Full Width',
        fullWidth: true,
    },
};
export const Disabled = {
    args: {
        children: 'Disabled',
        disabled: true,
    },
};
export const WithOnClick = {
    args: {
        children: 'Click me',
        onClick: () => alert('Button clicked!'),
    },
};