@mtec-solutions-org/design-system/dist/components/atoms/button/Button.stories.js

A React Native Web design system library with theme and components

import Button from "./Button";
const meta = {
    title: "Design System/Atoms/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"],
        },
        disabled: {
            control: { type: "boolean" },
        },
        isLoading: {
            control: { type: "boolean" },
        },
        loadingText: {
            control: { type: "text" },
        },
        fullWidth: {
            control: { type: "boolean" },
        },
    },
};
const onPress = () => {
    alert("Button pressed");
};
export default meta;
export const Primary = {
    args: {
        children: "Button",
        variant: "primary",
        size: "md",
        onPress,
    },
};
export const Secondary = {
    args: {
        children: "Button",
        variant: "secondary",
        size: "md",
        onPress,
    },
};
export const Outline = {
    args: {
        children: "Button",
        variant: "outline",
        size: "md",
        onPress,
    },
};
export const Ghost = {
    args: {
        children: "Button",
        variant: "ghost",
        size: "md",
        onPress,
    },
};
export const Small = {
    args: {
        children: "Small Button",
        size: "sm",
        onPress,
    },
};
export const Large = {
    args: {
        children: "Large Button",
        size: "lg",
        onPress,
    },
};
export const Disabled = {
    args: {
        children: "Disabled Button",
        disabled: true,
        onPress,
    },
};
export const Loading = {
    args: {
        children: "Loading Button",
        isLoading: true,
        loadingText: "Please wait...",
        onPress,
    },
};
export const LoadingCustomText = {
    args: {
        children: "Submit",
        isLoading: true,
        loadingText: "Submitting form...",
        variant: "primary",
        onPress,
    },
};
export const FullWidth = {
    args: {
        children: "Full Width Button",
        fullWidth: true,
        onPress,
    },
    parameters: {
        layout: "padded",
    },
};