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

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+
+export function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}

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,

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:

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">