From 2d5a6a0fe4893b2343e6c95d792fdb64c1b78d78 Mon Sep 17 00:00:00 2001
From: Vedant Nandwana <70624701+vedantnn71@users.noreply.github.com>
Date: Sun, 29 Jan 2023 01:49:29 -0800
Subject: [PATCH] feat: implement destructive variant for button (#33)

* feat(button): add destructive variant

* docs(button): add example for destructive variant
---
 apps/www/components/examples/button/destructive.tsx | 5 +++++
 apps/www/components/examples/index.tsx              | 2 ++
 apps/www/components/ui/button.tsx                   | 2 ++
 apps/www/content/docs/primitives/button.mdx         | 9 +++++++++
 4 files changed, 18 insertions(+)
 create mode 100644 apps/www/components/examples/button/destructive.tsx

diff --git a/apps/www/components/examples/button/destructive.tsx b/apps/www/components/examples/button/destructive.tsx
new file mode 100644
index 0000000000..bc07e6ad85
--- /dev/null
+++ b/apps/www/components/examples/button/destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+
+export function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/www/components/examples/index.tsx b/apps/www/components/examples/index.tsx
index a406751085..0ee7883937 100644
--- a/apps/www/components/examples/index.tsx
+++ b/apps/www/components/examples/index.tsx
@@ -4,6 +4,7 @@ import { AspectRatioDemo } from "@/components/examples/aspect-ratio/demo"
 import { AvatarDemo } from "@/components/examples/avatar/demo"
 import { ButtonDemo } from "@/components/examples/button/demo"
 import { ButtonGhost } from "@/components/examples/button/ghost"
+import { ButtonDestructive } from "@/components/examples/button/destructive"
 import { ButtonLink } from "@/components/examples/button/link"
 import { ButtonLoading } from "@/components/examples/button/loading"
 import { ButtonOutline } from "@/components/examples/button/outline"
@@ -63,6 +64,7 @@ export const examples = {
   AvatarDemo,
   ButtonDemo,
   ButtonGhost,
+  ButtonDestructive,
   ButtonLink,
   ButtonLoading,
   ButtonOutline,
diff --git a/apps/www/components/ui/button.tsx b/apps/www/components/ui/button.tsx
index 3d914b5aee..22914e0944 100644
--- a/apps/www/components/ui/button.tsx
+++ b/apps/www/components/ui/button.tsx
@@ -10,6 +10,8 @@ const buttonVariants = cva(
       variant: {
         default:
           "bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900",
+        destructive:
+          "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
         outline:
           "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100",
         subtle:
diff --git a/apps/www/content/docs/primitives/button.mdx b/apps/www/content/docs/primitives/button.mdx
index dd30ee6c52..4a7be6a3e7 100644
--- a/apps/www/content/docs/primitives/button.mdx
+++ b/apps/www/content/docs/primitives/button.mdx
@@ -38,6 +38,14 @@ import { Button } from "@/components/ui/button"
 
 ---
 
+### Destructive
+
+<ComponentExample src="/components/examples/button/destructive.tsx">
+  <ButtonDestructive />
+</ComponentExample>
+
+---
+
 ### Outline
 
 <ComponentExample src="/components/examples/button/outline.tsx">
@@ -62,6 +70,7 @@ import { Button } from "@/components/ui/button"
 
 ---
 
+---
 ### Link
 
 <ComponentExample src="/components/examples/button/link.tsx">