diff --git a/src/components/units/button/_button.scss b/src/components/units/button/_button.scss
index 55d4bad9..1ac854cf 100644
--- a/src/components/units/button/_button.scss
+++ b/src/components/units/button/_button.scss
@@ -131,6 +131,15 @@
       background: base.sitecolors-siteColor("vam-grey-5");
     }
 
+    &-light {
+      background: base.sitecolors-siteColor("vam-grey-6");
+      color: base.sitecolors-siteColor("vam-black");
+
+      &:hover {
+        background: base.sitecolors-siteColor("vam-grey-4");
+      }
+    }
+
     &-dark {
       background: base.sitecolors-siteColor("vam-grey-2");
       color: base.sitecolors-siteColor("vam-white");
@@ -140,6 +149,15 @@
       }
     }
 
+    &-darkest {
+      background: base.sitecolors-siteColor("vam-black");
+      color: base.sitecolors-siteColor("vam-white");
+
+      &:hover {
+        background: base.sitecolors-siteColor("vam-grey-0");
+      }
+    }
+
     &-close {
       display: inline-flex;
       gap: 10px;
diff --git a/src/components/units/button/button.config.js b/src/components/units/button/button.config.js
index 9ed68e5a..69d525e3 100644
--- a/src/components/units/button/button.config.js
+++ b/src/components/units/button/button.config.js
@@ -87,8 +87,12 @@ module.exports = {
         modifiers: ['pill'],
         variants: [
           ['pill', 'pill-close'],
+          ['pill', 'pill-light'],
+          ['pill', 'pill-light', 'pill-close'],
           ['pill', 'pill-dark'],
-          ['pill', 'pill-dark', 'pill-close']
+          ['pill', 'pill-dark', 'pill-close'],
+          ['pill', 'pill-darkest'],
+          ['pill', 'pill-darkest', 'pill-close']
         ]
       }
     }