Storybook created

stories/Button.stories.js

@@ -0,0 +1,86 @@
+import { fn } from "storybook/test";
+import Button from "../app/components/Button";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "secondary"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xsmall", "small", "large", "xlarge"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    onClick: { action: "clicked" },
+  },
+  args: {
+    children: "Button",
+    variant: "default",
+    size: "small",
+    disabled: false,
+  },
+};
+
+export const Default = {
+  args: {
+    children: "Default Button",
+  },
+};
+
+export const Secondary = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Large = {
+  args: {
+    size: "large",
+    children: "Large Button",
+  },
+};
+
+export const Small = {
+  args: {
+    size: "small",
+    children: "Small Button",
+  },
+};
+
+export const XSmall = {
+  args: {
+    size: "xsmall",
+    children: "XSmall Button",
+  },
+};
+
+export const XLarge = {
+  args: {
+    size: "xlarge",
+    children: "XLarge Button",
+  },
+};
+
+export const Disabled = {
+  args: {
+    disabled: true,
+    children: "Disabled Button",
+  },
+};
+
+export const AsLink = {
+  args: {
+    href: "#",
+    children: "Button as Link",
+  },
+};