From 7f7c643e9b6c4e296435a3105066d07fb0336b24 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 09:06:32 -0700
Subject: [PATCH] Added danger button

---
 app/components-preview/page.tsx | 157 ++++++++++++++++++++++++++++++++
 app/components/Button.tsx       |  14 ++-
 stories/Button.stories.js       |  56 ++++++++++++
 3 files changed, 224 insertions(+), 3 deletions(-)

diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx
index ac3f7ae..c9cae7c 100644
--- a/app/components-preview/page.tsx
+++ b/app/components-preview/page.tsx
@@ -37,6 +37,163 @@ export default function ComponentsPreview() {
           </p>
         </header>
 
+        {/* Button Section */}
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+            Button Component
+          </h2>
+
+          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
+            <div className="space-y-[var(--spacing-scale-016)]">
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Variants
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="default" size="medium">
+                    Default
+                  </Button>
+                  <Button variant="secondary" size="medium">
+                    Secondary
+                  </Button>
+                  <Button variant="primary" size="medium">
+                    Primary
+                  </Button>
+                  <Button variant="outlined" size="medium">
+                    Outlined
+                  </Button>
+                  <Button variant="dark" size="medium">
+                    Dark
+                  </Button>
+                  <Button variant="inverse" size="medium">
+                    Inverse
+                  </Button>
+                  <Button variant="ghost" size="medium">
+                    Ghost
+                  </Button>
+                  <Button variant="danger" size="medium">
+                    Danger
+                  </Button>
+                  <Button variant="danger-inverse" size="medium">
+                    Danger Inverse
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Danger Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="danger" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="danger" size="small">
+                    Small
+                  </Button>
+                  <Button variant="danger" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="danger" size="large">
+                    Large
+                  </Button>
+                  <Button variant="danger" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Danger Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="danger-inverse" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="danger-inverse" size="small">
+                    Small
+                  </Button>
+                  <Button variant="danger-inverse" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="danger-inverse" size="large">
+                    Large
+                  </Button>
+                  <Button variant="danger-inverse" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  All Sizes - Ghost Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
+                  <Button variant="ghost" size="xsmall">
+                    XSmall
+                  </Button>
+                  <Button variant="ghost" size="small">
+                    Small
+                  </Button>
+                  <Button variant="ghost" size="medium">
+                    Medium
+                  </Button>
+                  <Button variant="ghost" size="large">
+                    Large
+                  </Button>
+                  <Button variant="ghost" size="xlarge">
+                    XLarge
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Danger Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="danger" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="danger" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Danger Inverse Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="danger-inverse" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="danger-inverse" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+                  States - Ghost Variant
+                </h3>
+                <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
+                  <Button variant="ghost" size="medium">
+                    Normal
+                  </Button>
+                  <Button variant="ghost" size="medium" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Tooltip Section */}
         <section className="space-y-[var(--spacing-scale-024)]">
           <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 10e6826..9720495 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -9,7 +9,9 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     | "outlined"
     | "dark"
     | "inverse"
-    | "ghost";
+    | "ghost"
+    | "danger"
+    | "danger-inverse";
   size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
   className?: string;
   disabled?: boolean;
@@ -72,6 +74,10 @@ const Button = memo<ButtonProps>(
         "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
       ghost:
         "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      danger:
+        "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-border-default-negative-primary)] focus:outline-none focus:border-[var(--color-border-default-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "danger-inverse":
+        "bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-negative-primary)] focus:outline-none focus:border-[var(--color-border-invert-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
     };
 
     const hoverOutlineStyles: Record<string, string> = {
@@ -82,13 +88,15 @@ const Button = memo<ButtonProps>(
       xlarge: "hover:outline-[2.5px]",
     };
 
-    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, or ghost
+    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, danger, or danger-inverse
     const outlineStyles =
       variant === "primary" ||
       variant === "outlined" ||
       variant === "dark" ||
       variant === "inverse" ||
-      variant === "ghost"
+      variant === "ghost" ||
+      variant === "danger" ||
+      variant === "danger-inverse"
         ? ""
         : hoverOutlineStyles[size];
 
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index cf525ab..79a4588 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -23,6 +23,8 @@ export default {
         "dark",
         "inverse",
         "ghost",
+        "danger",
+        "danger-inverse",
       ],
       description: "The visual style variant of the button",
     },
@@ -79,6 +81,12 @@ export const Variants = {
         <Button {..._args} variant="ghost">
           Ghost
         </Button>
+        <Button {..._args} variant="danger">
+          Danger
+        </Button>
+        <Button {..._args} variant="danger-inverse">
+          Danger Inverse
+        </Button>
       </div>
     </div>
   ),
@@ -292,6 +300,48 @@ export const AllVariants = {
         </div>
       </div>
 
+      <div>
+        <h3 className="text-white font-semibold mb-3">Danger Variant</h3>
+        <div className="space-x-4">
+          <Button variant="danger" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="danger" size="small">
+            Small
+          </Button>
+          <Button variant="danger" size="medium">
+            Medium
+          </Button>
+          <Button variant="danger" size="large">
+            Large
+          </Button>
+          <Button variant="danger" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
+        <div className="space-x-4">
+          <Button variant="danger-inverse" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="danger-inverse" size="small">
+            Small
+          </Button>
+          <Button variant="danger-inverse" size="medium">
+            Medium
+          </Button>
+          <Button variant="danger-inverse" size="large">
+            Large
+          </Button>
+          <Button variant="danger-inverse" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
@@ -316,6 +366,12 @@ export const AllVariants = {
           <Button variant="ghost" size="large" disabled>
             Ghost Disabled
           </Button>
+          <Button variant="danger" size="large" disabled>
+            Danger Disabled
+          </Button>
+          <Button variant="danger-inverse" size="large" disabled>
+            Danger Inverse Disabled
+          </Button>
         </div>
       </div>
     </div>