diff --git a/packages/react/stories/Button.stories.ts b/packages/react/stories/Button.stories.ts
deleted file mode 100644
index 30f82e3..0000000
--- a/packages/react/stories/Button.stories.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "../components/Button";
-
-const meta: Meta<typeof Button> = {
-  title: "React/Button",
-  component: Button,
-  tags: ["autodocs"],
-  argTypes: {
-    size: { options: ["sm", "md", "lg"], control: "select" },
-    border: { options: ["none", "solid", "outline"], control: "select" },
-    background: {
-      options: ["default", "ghost", "link"],
-      control: "select",
-    },
-    decoration: { options: ["none", "link"], control: "select" },
-    onClick: { table: { disable: true } },
-    preset: { options: ["default", "ghost", "link"], control: "select" },
-  },
-  args: { children: "Button", onClick: () => console.log("clicked") },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    preset: "default",
-  },
-};
-
-export const Ghost: Story = {
-  args: {
-    preset: "ghost",
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    border: "outline",
-    background: "ghost",
-    decoration: "none",
-    size: "md",
-  },
-};
-
-export const Link: Story = {
-  args: {
-    preset: "link",
-  },
-};
diff --git a/packages/react/stories/Button.stories.tsx b/packages/react/stories/Button.stories.tsx
new file mode 100644
index 0000000..74faf5d
--- /dev/null
+++ b/packages/react/stories/Button.stories.tsx
@@ -0,0 +1,32 @@
+import { Button } from "../components/Button";
+
+export default {
+  title: "React/Button",
+};
+
+export const Default = () => {
+  return <Button preset="default">Button</Button>;
+};
+export const Ghost = () => {
+  return <Button preset="ghost">Ghost Button</Button>;
+};
+
+export const Outline = () => {
+  return (
+    <Button border="outline" background="ghost" decoration="none" size="md">
+      Outline Button
+    </Button>
+  );
+};
+
+export const Link = () => {
+  return <Button preset="link">Link Button</Button>;
+};
+
+export const AsChild = () => {
+  return (
+    <Button asChild preset="default">
+      <a href="https://google.com">As Child Button</a>
+    </Button>
+  );
+};