diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index e8f6b4500e..36abcbf4da 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -14,6 +14,7 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
+  export let newStyles = false
 
   let showTooltip = false
 </script>
@@ -25,6 +26,7 @@
   class:spectrum-Button--warning={warning}
   class:spectrum-Button--overBackground={overBackground}
   class:spectrum-Button--quiet={quiet}
+  class:new-styles={newStyles}
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
@@ -93,4 +95,20 @@
     padding-left: var(--spacing-m);
     line-height: 0;
   }
+  .spectrum-Button--primary.new-styles {
+    background: var(--spectrum-global-color-gray-800);
+    border-color: transparent;
+    color: var(--spectrum-global-color-gray-50);
+  }
+  .spectrum-Button--primary.new-styles:hover {
+    background: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Button--secondary.new-styles {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: transparent;
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Button--secondary.new-styles:hover {
+    background: var(--spectrum-global-color-gray-300);
+  }
 </style>