From 82ce91d13537d77f53f6e0ae1a8196ec3e6923c5 Mon Sep 17 00:00:00 2001
From: Shelley Dignum <shelleydignum@gmail.com>
Date: Thu, 2 Apr 2026 10:29:18 -0500
Subject: [PATCH] feat(apollo-vertex): add destructive-outline button variant

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../app/shadcn-components/button/page.mdx        |  3 ++-
 apps/apollo-vertex/registry/button/button.tsx    | 16 +++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/apollo-vertex/app/shadcn-components/button/page.mdx b/apps/apollo-vertex/app/shadcn-components/button/page.mdx
index 05ecdcaaf..bcc0d74f7 100644
--- a/apps/apollo-vertex/app/shadcn-components/button/page.mdx
+++ b/apps/apollo-vertex/app/shadcn-components/button/page.mdx
@@ -8,9 +8,10 @@ Displays a button or a component that looks like a button.
 <div className="p-4 border rounded-lg mt-4 flex flex-wrap gap-2">
   <Button>Default</Button>
   <Button variant="secondary">Secondary</Button>
-  <Button variant="destructive">Destructive</Button>
   <Button variant="outline">Outline</Button>
   <Button variant="ghost">Ghost</Button>
+  <Button variant="destructive">Destructive</Button>
+  <Button variant="destructive-outline">Destructive outline</Button>
   <Button variant="link">Link</Button>
 </div>
 
diff --git a/apps/apollo-vertex/registry/button/button.tsx b/apps/apollo-vertex/registry/button/button.tsx
index 24357c77a..43ecee22f 100644
--- a/apps/apollo-vertex/registry/button/button.tsx
+++ b/apps/apollo-vertex/registry/button/button.tsx
@@ -10,20 +10,22 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        "destructive-outline":
+          "border border-destructive bg-background text-destructive shadow-xs hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 dark:bg-input/30 dark:hover:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
         success:
           "bg-success text-white hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/60",
         info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info/20 dark:focus-visible:ring-info/40 dark:bg-info/60",
         warning:
           "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/60",
-        outline:
-          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",