feat(apollo-vertex): add destructive-outline button variant

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

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>
 

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