diff --git a/package.json b/package.json
index 89321c9..88db9b0 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "tailwind-merge": "^1.14.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1b95c60..f62d185 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  class-variance-authority:
+    specifier: ^0.7.0
+    version: 0.7.0
   clsx:
     specifier: ^2.0.0
     version: 2.0.0
@@ -1301,6 +1304,12 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+    dependencies:
+      clsx: 2.0.0
+    dev: false
+
   /classnames@2.3.2:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
     dev: true
diff --git a/src/button/Button.stories.tsx b/src/button/Button.stories.tsx
index bdc4752..3865287 100644
--- a/src/button/Button.stories.tsx
+++ b/src/button/Button.stories.tsx
@@ -15,4 +15,15 @@ ButtonStory.argTypes = {
     },
     defaultValue: false,
   },
+  intent: {
+    options: ["primary", "secondary"],
+    control: {
+      type: "select",
+      labels: {
+        primary: "Primary",
+        secondary: "Secondary",
+      }
+    },
+    defaultValue: "primary",
+  }
 };
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 168db32..35fa76e 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -1,18 +1,33 @@
 import { cn } from "@/utils/merge.js";
+import {cva, VariantProps} from "class-variance-authority";
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyle> {
   disabled?: boolean;
 }
 
+const buttonStyle = cva("bg-primary text-white py-3 px-6 rounded leading-[1.15]", {
+  variants: {
+    intent: {
+      primary: "bg-primary text-white",
+      secondary: "bg-secondary text-white",
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: "",
+    }
+  }
+})
+
 export const Button = (props: ButtonProps) => {
-  const { className, ...rest } = props;
+  const { className, intent, ...rest } = props;
 
   return (
     <button
-      className={cn(
-        `bg-primary text-white py-3 px-6 rounded leading-[1.15] ${
-          props.disabled ? "opacity-50 cursor-not-allowed" : ""
-        }`,
+      className={cn(buttonStyle({
+        disabled: props.disabled,
+        intent: intent,
+        className: className,
+      }),
         className,
       )}
       {...rest}