diff --git a/packages/react/components/Button.tsx b/packages/react/components/Button.tsx
index a0f5ba0..7815c00 100644
--- a/packages/react/components/Button.tsx
+++ b/packages/react/components/Button.tsx
@@ -79,6 +79,24 @@ const [buttonVariants, resolveVariants] = vcn({
       decoration: "link",
       size: "md",
     },
+    success: {
+      border: "success",
+      background: "success",
+      decoration: "none",
+      size: "md",
+    },
+    warning: {
+      border: "warning",
+      background: "warning",
+      decoration: "none",
+      size: "md",
+    },
+    danger: {
+      border: "danger",
+      background: "danger",
+      decoration: "none",
+      size: "md",
+    },
   },
 });
 
diff --git a/packages/react/stories/Button.stories.tsx b/packages/react/stories/Button.stories.tsx
index 41d82dd..4932ca3 100644
--- a/packages/react/stories/Button.stories.tsx
+++ b/packages/react/stories/Button.stories.tsx
@@ -16,27 +16,15 @@ export const Link = () => {
 };
 
 export const Success = () => {
-  return (
-    <Button preset="default" background="success" border="success">
-      Success Button
-    </Button>
-  );
+  return <Button preset="success">Success Button</Button>;
 };
 
 export const Warning = () => {
-  return (
-    <Button preset="default" background="warning" border="warning">
-      Warning Button
-    </Button>
-  );
+  return <Button preset="warning">Warning Button</Button>;
 };
 
 export const Danger = () => {
-  return (
-    <Button preset="default" background="danger" border="danger">
-      Danger Button
-    </Button>
-  );
+  return <Button preset="danger">Danger Button</Button>;
 };
 
 export const AsChild = () => {