fix buttons

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}

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}

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

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

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}>

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}>

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>

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)

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>

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>

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

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>

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}

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>

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>

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>