diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 533568926a..c07bc57b43 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -46,11 +46,11 @@
         <div class="spectrum-ButtonGroup-item">
           <slot name="footer" />
           {#if showCancelButton}
-            <Button type="secondary" on:click={hide}>{cancelText}</Button>
+            <Button secondary on:click={hide}>{cancelText}</Button>
           {/if}
           {#if showConfirmButton}
             <Button
-            type="cta"
+            cta
               primary
               {...$$restProps}
               disabled={confirmDisabled}
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index eba3d76580..99dc26b04f 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -92,7 +92,7 @@
   </div>
 {/each}
 {#if stepId === 'WEBHOOK'}
-  <Button type="secondary" on:click={() => webhookModal.show()}>
+  <Button secondary on:click={() => webhookModal.show()}>
     Set Up Webhook
   </Button>
 {/if}
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index ad3eccf9c3..3c01b43614 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -65,7 +65,7 @@
     {webhookModal} />
 {:else if $automationStore.selectedAutomation}
   <div class="block-label">{automation.name}</div>
-  <Button type="secondary" on:click={testAutomation}>Test Automation</Button>
+  <Button secondary on:click={testAutomation}>Test Automation</Button>
 {/if}
 <Button
   secondary
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index a65e2aadae..ad3ebf520b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Calculator" type="overBackground" size="S" quiet
+  <Button icon="Calculator" primary size="S" quiet
     on:click={dropdown.show}
     active={view.field && view.calculation}>
     Calculate
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 31f0aff8fc..a58a96b78d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -10,7 +10,7 @@
   let modal
 </script>
 
-<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
+<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
   Create New Column
 </Button>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index 8ad8d2adfc..cb65525f68 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -8,7 +8,7 @@
   let modal
 </script>
 
-<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
+<Button icon="Add" primary size="S" quiet on:click={modal.show}>
   {title}
 </Button>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
index 020c8af3ce..aca1f3001e 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
+  <Button icon="CollectionAdd" primary size="S" quiet on:click={dropdown.show}>
     Create New View
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 32ce7b83b2..18bbef6122 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -13,7 +13,7 @@
   }
 </script>
 
-<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
+<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
   Delete
   {selectedRows.length}
   row(s)
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
index 533d4c618c..1cc930471b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
+  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
     Edit Roles
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index fe383d99a3..7b5d93cf86 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
+  <Button icon="Download" primary size="S" quiet on:click={dropdown.show}>
     Export
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
index cfe558a36d..889b9bdcf7 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Filter" type="overBackground" size="S" quiet
+  <Button icon="Filter" primary size="S" quiet
     on:click={dropdown.show}
     active={view.filters && view.filters.length}>
     Filter
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
index fe7d290714..cd9a0af364 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
+  <Button icon="Group" primary size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
     Group By
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index 891dc0feb8..1f92043381 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
+  <Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
     {#if hideAutocolumns}
       Show Auto Columns
     {:else}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 426a4f962f..996396d9d3 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
+  <Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
     Manage Access
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 392909d3ef..2d17338885 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -288,10 +288,10 @@
   {/if}
   <footer class="create-column-options">
     {#if !uneditable && originalName != null}
-      <Button type="warning" size="S" text on:click={confirmDelete}>Delete Column</Button>
+      <Button warning size="S" text on:click={confirmDelete}>Delete Column</Button>
     {/if}
     <Button on:click={onClosed}>Cancel</Button>
-    <Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
+    <Button cta on:click={saveColumn} bind:disabled={invalid}>
       Save Column
     </Button>
   </footer>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index 5510358af7..5b9237fb93 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -81,7 +81,7 @@
   {/each}
   <div>
     <Spacer small />
-    <Button icon="AddCircle" size="S" type="cta" on:click={addField}>
+    <Button icon="AddCircle" size="S" cta on:click={addField}>
       Add
       {fieldLabel}
     </Button>