diff --git a/config/components.ts b/config/components.ts
index 7e46481..e27c0cd 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -63,6 +63,11 @@ export const componentConfig = {
       filePath: "preview/components/button-style-default.tsx",
       preview: lazy(() => import("@/preview/components/button-style-default")),
     },
+    "button-style-outline": {
+      name: "button-style-default",
+      filePath: "preview/components/button-style-outline.tsx",
+      preview: lazy(() => import("@/preview/components/button-style-outline")),
+    },
     "card-style-default": {
       name: "card-style-default",
       filePath: "preview/components/card-style-default.tsx",
diff --git a/content/docs/components/button.mdx b/content/docs/components/button.mdx
index dc9d1bb..b89b90c 100644
--- a/content/docs/components/button.mdx
+++ b/content/docs/components/button.mdx
@@ -29,3 +29,9 @@ npm install class-variance-authority
 ### Default
 
 <ComponentShowcase name="button-style-default" />
+<br />
+<br />
+
+### Outline
+
+<ComponentShowcase name="button-style-outline" />
diff --git a/preview/components/button-style-outline.tsx b/preview/components/button-style-outline.tsx
new file mode 100644
index 0000000..1de825b
--- /dev/null
+++ b/preview/components/button-style-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/packages/ui";
+
+export default function ButtonStyleOutline() {
+  return <Button variant="outline">Click Me!</Button>;
+}