From 8f0db08d0f9b3d1a57e2fa6149a38075878cb5fc Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:02:18 -0700
Subject: [PATCH] Update button components

---
 app/components-preview/page.tsx               |  34 ++---
 .../AskOrganizer/AskOrganizer.view.tsx        |   2 +-
 app/components/Button.tsx                     |  39 ++---
 .../ContentLockup/ContentLockup.view.tsx      |   6 +-
 .../HomeHeader/HomeHeader.container.tsx       |   2 +-
 .../ModalFooter/ModalFooter.view.tsx          |   4 +-
 .../NumberedCards/NumberedCards.view.tsx      |   2 +-
 app/components/RuleStack/RuleStack.view.tsx   |   2 +-
 app/tailwind.css                              |   2 +-
 stories/Button.stories.js                     | 138 ++++++------------
 10 files changed, 86 insertions(+), 145 deletions(-)

diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx
index 9e3b05b..4d8e60c 100644
--- a/app/components-preview/page.tsx
+++ b/app/components-preview/page.tsx
@@ -50,23 +50,17 @@ export default function ComponentsPreview() {
                   All Variants
                 </h3>
                 <div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
-                  <Button variant="default" size="medium">
-                    Default
+                  <Button variant="filled" size="medium">
+                    Filled
                   </Button>
-                  <Button variant="secondary" size="medium">
-                    Secondary
+                  <Button variant="filled-inverse" size="medium">
+                    Filled Inverse
                   </Button>
-                  <Button variant="primary" size="medium">
-                    Primary
+                  <Button variant="outline" size="medium">
+                    Outline
                   </Button>
-                  <Button variant="outlined" size="medium">
-                    Outlined
-                  </Button>
-                  <Button variant="dark" size="medium">
-                    Dark
-                  </Button>
-                  <Button variant="inverse" size="medium">
-                    Inverse
+                  <Button variant="outline-inverse" size="medium">
+                    Outline Inverse
                   </Button>
                   <Button variant="ghost" size="medium">
                     Ghost
@@ -243,19 +237,19 @@ export default function ComponentsPreview() {
           <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="flex flex-wrap gap-[var(--spacing-scale-024)] items-center">
               <Tooltip text="Tooltip positioned at top" position="top">
-                <Button variant="default" size="medium">
+                <Button variant="filled" size="medium">
                   Hover me (Top)
                 </Button>
               </Tooltip>
 
               <Tooltip text="Tooltip positioned at bottom" position="bottom">
-                <Button variant="primary" size="medium">
+                <Button variant="filled-inverse" size="medium">
                   Hover me (Bottom)
                 </Button>
               </Tooltip>
 
               <Tooltip text="Disabled tooltip" disabled>
-                <Button variant="secondary" size="medium">
+                <Button variant="ghost" size="medium">
                   Disabled Tooltip
                 </Button>
               </Tooltip>
@@ -522,7 +516,7 @@ export default function ComponentsPreview() {
           <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)]">
               <Button
-                variant="primary"
+                variant="filled-inverse"
                 size="medium"
                 onClick={() => setCreateOpen(true)}
               >
@@ -534,7 +528,7 @@ export default function ComponentsPreview() {
                   Step {createStep} of 3
                 </p>
                 <Button
-                  variant="secondary"
+                  variant="ghost"
                   size="small"
                   onClick={() => setCreateStep((prev) => Math.max(1, prev - 1))}
                   disabled={createStep === 1}
@@ -542,7 +536,7 @@ export default function ComponentsPreview() {
                   Previous Step
                 </Button>
                 <Button
-                  variant="secondary"
+                  variant="ghost"
                   size="small"
                   onClick={() => setCreateStep((prev) => Math.min(3, prev + 1))}
                   disabled={createStep === 3}
diff --git a/app/components/AskOrganizer/AskOrganizer.view.tsx b/app/components/AskOrganizer/AskOrganizer.view.tsx
index a1f2c28..553a6df 100644
--- a/app/components/AskOrganizer/AskOrganizer.view.tsx
+++ b/app/components/AskOrganizer/AskOrganizer.view.tsx
@@ -45,7 +45,7 @@ function AskOrganizerView({
           <Button
             href={buttonHref}
             size="large"
-            variant={variant === "inverse" ? "primary" : "default"}
+            variant={variant === "inverse" ? "filled-inverse" : "filled"}
             className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
             onClick={onContactClick}
             ariaLabel={ariaLabel}
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 556ff9d..4977882 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -3,12 +3,10 @@ import { memo } from "react";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   variant?:
-    | "default"
-    | "secondary"
-    | "primary"
-    | "outlined"
-    | "dark"
-    | "inverse"
+    | "filled"
+    | "filled-inverse"
+    | "outline"
+    | "outline-inverse"
     | "ghost"
     | "ghost-inverse"
     | "danger"
@@ -29,7 +27,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 const Button = memo<ButtonProps>(
   ({
     children,
-    variant = "default",
+    variant = "filled",
     size = "xsmall",
     className = "",
     disabled = false,
@@ -62,17 +60,13 @@ const Button = memo<ButtonProps>(
     };
 
     const variantStyles: Record<string, string> = {
-      default:
-        "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none disabled:hover:outline-none",
-      secondary:
-        "bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-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-brand-primary)] 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-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
-      primary:
-        "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] 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",
-      outlined:
-        "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-content-default-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-[1.5px] disabled:border-[var(--color-surface-default-secondary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
-      dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
-      inverse:
-        "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",
+      filled:
+        "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-invert-brand-primary)] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-invert-brand-primary)] focus:outline-none focus:border-transparent 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-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "filled-inverse":
+        "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent 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-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-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",
+      outline:
+        "bg-transparent text-[var(--color-content-default-primary)] border border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border focus:border-[var(--color-border-invert-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-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "outline-inverse": "bg-transparent text-[var(--color-content-invert-primary)] border border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-primary)] focus:outline-none focus:border focus:border-[var(--color-border-default-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-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-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",
       ghost:
         "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent 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-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
       "ghost-inverse":
@@ -91,12 +85,11 @@ const Button = memo<ButtonProps>(
       xlarge: "hover:outline-[2.5px]",
     };
 
-    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, ghost-inverse, danger, or danger-inverse
+    // Only apply outline styles to filled variant, not filled-inverse, outline, outline-inverse, ghost, ghost-inverse, danger, or danger-inverse
     const outlineStyles =
-      variant === "primary" ||
-      variant === "outlined" ||
-      variant === "dark" ||
-      variant === "inverse" ||
+      variant === "filled-inverse" ||
+      variant === "outline" ||
+      variant === "outline-inverse" ||
       variant === "ghost" ||
       variant === "ghost-inverse" ||
       variant === "danger" ||
diff --git a/app/components/ContentLockup/ContentLockup.view.tsx b/app/components/ContentLockup/ContentLockup.view.tsx
index 7334b60..f1293cd 100644
--- a/app/components/ContentLockup/ContentLockup.view.tsx
+++ b/app/components/ContentLockup/ContentLockup.view.tsx
@@ -93,19 +93,19 @@ function ContentLockupView({
         <div className="flex justify-start">
           {/* Small button for xsm and sm breakpoints */}
           <div className="block md:hidden">
-            <Button variant="primary" size="small">
+            <Button variant="filled-inverse" size="small">
               {ctaText}
             </Button>
           </div>
           {/* Large button for md and lg breakpoints */}
           <div className="hidden md:block xl:hidden">
-            <Button variant="primary" size="large" className={buttonClassName}>
+            <Button variant="filled-inverse" size="large" className={buttonClassName}>
               {ctaText}
             </Button>
           </div>
           {/* XLarge button for xl breakpoint */}
           <div className="hidden xl:block">
-            <Button variant="primary" size="xlarge">
+            <Button variant="filled-inverse" size="xlarge">
               {ctaText}
             </Button>
           </div>
diff --git a/app/components/HomeHeader/HomeHeader.container.tsx b/app/components/HomeHeader/HomeHeader.container.tsx
index dd21d02..4fb1e8f 100644
--- a/app/components/HomeHeader/HomeHeader.container.tsx
+++ b/app/components/HomeHeader/HomeHeader.container.tsx
@@ -150,7 +150,7 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
     return (
       <Button
         size={buttonSize}
-        variant="secondary"
+        variant="ghost"
         ariaLabel={t("ariaLabels.createNewRule")}
       >
         {renderAvatarGroup(containerSize, avatarSize)}
diff --git a/app/components/ModalFooter/ModalFooter.view.tsx b/app/components/ModalFooter/ModalFooter.view.tsx
index b3e4fc1..1b4ffa2 100644
--- a/app/components/ModalFooter/ModalFooter.view.tsx
+++ b/app/components/ModalFooter/ModalFooter.view.tsx
@@ -30,7 +30,7 @@ export function ModalFooterView({
       {/* Back Button - Absolutely positioned bottom left */}
       {showBackButton && (
         <div className="absolute left-[16px] top-[12px]">
-          <Button variant="outlined" size="medium" onClick={onBack}>
+          <Button variant="outline" size="medium" onClick={onBack}>
             {defaultBackText}
           </Button>
         </div>
@@ -47,7 +47,7 @@ export function ModalFooterView({
       {showNextButton && (
         <div className="absolute right-[16px] top-[12px]">
           <Button
-            variant="default"
+            variant="filled"
             size="medium"
             onClick={onNext}
             disabled={nextButtonDisabled}
diff --git a/app/components/NumberedCards/NumberedCards.view.tsx b/app/components/NumberedCards/NumberedCards.view.tsx
index 77489fa..dd9bef5 100644
--- a/app/components/NumberedCards/NumberedCards.view.tsx
+++ b/app/components/NumberedCards/NumberedCards.view.tsx
@@ -55,7 +55,7 @@ function NumberedCardsView({
               </div>
               {/* Outlined button for lg and xlg breakpoints */}
               <div className="hidden lg:block">
-                <Button variant="outlined" size="large">
+                <Button variant="outline" size="large">
                   {t("numberedCards.buttons.seeHowItWorks")}
                 </Button>
               </div>
diff --git a/app/components/RuleStack/RuleStack.view.tsx b/app/components/RuleStack/RuleStack.view.tsx
index 671385f..a735e46 100644
--- a/app/components/RuleStack/RuleStack.view.tsx
+++ b/app/components/RuleStack/RuleStack.view.tsx
@@ -82,7 +82,7 @@ export function RuleStackView({
 
       {/* See all templates button */}
       <div className="flex justify-center">
-        <Button variant="outlined" size="large">
+        <Button variant="outline" size="large">
           {t("button.seeAllTemplates")}
         </Button>
       </div>
diff --git a/app/tailwind.css b/app/tailwind.css
index 7642f27..7d7b680 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -662,7 +662,7 @@
   --color-surface-default-brand-lavender: var(--color-lavender-lavender200);
   --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
   --color-surface-default-brand-lime: var(--color-lime-lime100);
-  --color-surface-default-brand-primary: var(--color-yellow-yellow100);
+  --color-surface-default-brand-primary: var(--color-yellow-yellow1000);
   --color-surface-default-brand-secondary: var(--color-yellow-yellow800);
   --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
   --color-surface-default-brand-rust: var(--color-rust-rust100);
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index bb1f813..efd0684 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -16,12 +16,10 @@ export default {
     variant: {
       control: { type: "select" },
       options: [
-        "default",
-        "secondary",
-        "primary",
-        "outlined",
-        "dark",
-        "inverse",
+        "filled",
+        "filled-inverse",
+        "outline",
+        "outline-inverse",
         "ghost",
         "ghost-inverse",
         "danger",
@@ -61,23 +59,17 @@ export const Variants = {
   render: (_args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <Button {..._args} variant="default">
-          Default
+        <Button {..._args} variant="filled">
+          Filled
         </Button>
-        <Button {..._args} variant="secondary">
-          Secondary
+        <Button {..._args} variant="filled-inverse">
+          Filled Inverse
         </Button>
-        <Button {..._args} variant="primary">
-          Primary
+        <Button {..._args} variant="outline">
+          Outline
         </Button>
-        <Button {..._args} variant="outlined">
-          Outlined
-        </Button>
-        <Button {..._args} variant="dark">
-          Dark
-        </Button>
-        <Button {..._args} variant="inverse">
-          Inverse
+        <Button {..._args} variant="outline-inverse">
+          Outline Inverse
         </Button>
         <Button {..._args} variant="ghost">
           Ghost
@@ -106,7 +98,7 @@ export const Variants = {
 export const Sizes = {
   args: {
     children: "Button",
-    variant: "default",
+    variant: "filled",
   },
   render: (_args) => (
     <div className="space-y-4">
@@ -142,7 +134,7 @@ export const States = {
   args: {
     children: "Button",
     size: "large",
-    variant: "default",
+    variant: "filled",
   },
   render: (_args) => (
     <div className="space-y-4">
@@ -168,116 +160,84 @@ export const AllVariants = {
   render: () => (
     <div className="space-y-6">
       <div>
-        <h3 className="text-white font-semibold mb-3">Default Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Filled Variant</h3>
         <div className="space-x-4">
-          <Button size="xsmall">XSmall</Button>
-          <Button size="small">Small</Button>
-          <Button size="medium">Medium</Button>
-          <Button size="large">Large</Button>
-          <Button size="xlarge">XLarge</Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Secondary Variant</h3>
-        <div className="space-x-4">
-          <Button variant="secondary" size="xsmall">
+          <Button variant="filled" size="xsmall">
             XSmall
           </Button>
-          <Button variant="secondary" size="small">
+          <Button variant="filled" size="small">
             Small
           </Button>
-          <Button variant="secondary" size="medium">
+          <Button variant="filled" size="medium">
             Medium
           </Button>
-          <Button variant="secondary" size="large">
+          <Button variant="filled" size="large">
             Large
           </Button>
-          <Button variant="secondary" size="xlarge">
+          <Button variant="filled" size="xlarge">
             XLarge
           </Button>
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Primary Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="primary" size="xsmall">
+          <Button variant="filled-inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="primary" size="small">
+          <Button variant="filled-inverse" size="small">
             Small
           </Button>
-          <Button variant="primary" size="medium">
+          <Button variant="filled-inverse" size="medium">
             Medium
           </Button>
-          <Button variant="primary" size="large">
+          <Button variant="filled-inverse" size="large">
             Large
           </Button>
-          <Button variant="primary" size="xlarge">
+          <Button variant="filled-inverse" size="xlarge">
             XLarge
           </Button>
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Outline Variant</h3>
         <div className="space-x-4">
-          <Button variant="outlined" size="xsmall">
+          <Button variant="outline" size="xsmall">
             XSmall
           </Button>
-          <Button variant="outlined" size="small">
+          <Button variant="outline" size="small">
             Small
           </Button>
-          <Button variant="outlined" size="medium">
+          <Button variant="outline" size="medium">
             Medium
           </Button>
-          <Button variant="outlined" size="large">
+          <Button variant="outline" size="large">
             Large
           </Button>
-          <Button variant="outlined" size="xlarge">
+          <Button variant="outline" size="xlarge">
             XLarge
           </Button>
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Dark Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="dark" size="xsmall">
+          <Button variant="outline-inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="dark" size="small">
+          <Button variant="outline-inverse" size="small">
             Small
           </Button>
-          <Button variant="dark" size="medium">
+          <Button variant="outline-inverse" size="medium">
             Medium
           </Button>
-          <Button variant="dark" size="large">
+          <Button variant="outline-inverse" size="large">
             Large
           </Button>
-          <Button variant="dark" size="xlarge">
-            XLarge
-          </Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
-        <div className="space-x-4">
-          <Button variant="inverse" size="xsmall">
-            XSmall
-          </Button>
-          <Button variant="inverse" size="small">
-            Small
-          </Button>
-          <Button variant="inverse" size="medium">
-            Medium
-          </Button>
-          <Button variant="inverse" size="large">
-            Large
-          </Button>
-          <Button variant="inverse" size="xlarge">
+          <Button variant="outline-inverse" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -370,23 +330,17 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
-          <Button size="large" disabled>
-            Default Disabled
+          <Button variant="filled" size="large" disabled>
+            Filled Disabled
           </Button>
-          <Button variant="secondary" size="large" disabled>
-            Secondary Disabled
+          <Button variant="filled-inverse" size="large" disabled>
+            Filled Inverse Disabled
           </Button>
-          <Button variant="primary" size="large" disabled>
-            Primary Disabled
+          <Button variant="outline" size="large" disabled>
+            Outline Disabled
           </Button>
-          <Button variant="outlined" size="large" disabled>
-            Outlined Disabled
-          </Button>
-          <Button variant="dark" size="large" disabled>
-            Dark Disabled
-          </Button>
-          <Button variant="inverse" size="large" disabled>
-            Inverse Disabled
+          <Button variant="outline-inverse" size="large" disabled>
+            Outline Inverse Disabled
           </Button>
           <Button variant="ghost" size="large" disabled>
             Ghost Disabled