diff --git a/front/components/ConnectorPermissionsModal.tsx b/front/components/ConnectorPermissionsModal.tsx
index ee44cf1d5857..da9653db04f6 100644
--- a/front/components/ConnectorPermissionsModal.tsx
+++ b/front/components/ConnectorPermissionsModal.tsx
@@ -209,7 +209,7 @@ export default function ConnectorPermissionsModal({
                     }}
                     labelVisible={true}
                     label="Re-authorize"
-                    type="tertiary"
+                    variant="tertiary"
                     size="xs"
                     icon={Cog6ToothIcon}
                   />
@@ -220,14 +220,14 @@ export default function ConnectorPermissionsModal({
                         labelVisible={true}
                         onClick={closeModal}
                         label="Cancel"
-                        type="secondary"
+                        variant="secondary"
                         size="xs"
                       />
                       <Button
                         labelVisible={true}
                         onClick={save}
                         label="Save"
-                        type="primary"
+                        variant="primary"
                         size="xs"
                       />
                     </div>
diff --git a/front/components/app/DatasetView.tsx b/front/components/app/DatasetView.tsx
index 1ca75d97579b..838bc3f245dd 100644
--- a/front/components/app/DatasetView.tsx
+++ b/front/components/app/DatasetView.tsx
@@ -612,7 +612,7 @@ export default function DatasetView({
             <div className="mt-6 flex flex-row">
               {!readOnly ? (
                 <Button
-                  type="secondary"
+                  variant="secondary"
                   onClick={() => {
                     handleNewEntry(datasetData.length - 1);
                   }}
@@ -623,7 +623,7 @@ export default function DatasetView({
               <div className="flex-1"></div>
               <div className="ml-2 flex-initial">
                 <Button
-                  type="tertiary"
+                  variant="tertiary"
                   onClick={() => {
                     const dataStr =
                       "data:text/jsonl;charset=utf-8," +
@@ -660,7 +660,7 @@ export default function DatasetView({
                 ></input>
                 {!readOnly ? (
                   <Button
-                    type="tertiary"
+                    variant="tertiary"
                     onClick={() => {
                       if (fileInputRef.current) {
                         fileInputRef.current.click();
diff --git a/front/components/app/Deploy.tsx b/front/components/app/Deploy.tsx
index 6fe6a6d35695..6899a6adfe3b 100644
--- a/front/components/app/Deploy.tsx
+++ b/front/components/app/Deploy.tsx
@@ -87,7 +87,7 @@ export default function Deploy({
     <div>
       <Button
         label="deploy"
-        type="primary"
+        variant="primary"
         onClick={() => {
           setOpen(!open);
         }}
@@ -184,7 +184,7 @@ export default function Deploy({
                         <div className="flex-1"></div>
                         <div className="mt-1">
                           <Button
-                            type="primary"
+                            variant="primary"
                             onClick={handleCopyClick}
                             label={copyButtonText}
                             icon={ClipboardIcon}
@@ -199,7 +199,7 @@ export default function Deploy({
                         <Button
                           icon={DocumentTextIcon}
                           label="Visit API Reference"
-                          type="secondary"
+                          variant="secondary"
                           onClick={() => {
                             window.open(
                               "https://docs.dust.tt/runs",
@@ -215,7 +215,7 @@ export default function Deploy({
                     <div className="flex-1"></div>
                     <div className="flex flex-initial">
                       <Button
-                        type="secondary"
+                        variant="secondary"
                         onClick={() => setOpen(false)}
                         label="Close"
                       />
diff --git a/front/components/app/NewBlock.tsx b/front/components/app/NewBlock.tsx
index a4fa2a3ba7f5..2599c7bb62df 100644
--- a/front/components/app/NewBlock.tsx
+++ b/front/components/app/NewBlock.tsx
@@ -124,7 +124,7 @@ export default function NewBlock({
         ) : (
           <Menu.Button as="div" disabled={disabled}>
             <Button
-              type="secondary"
+              variant="secondary"
               label="Add Block"
               icon={PlusIcon}
               disabled={disabled}
diff --git a/front/components/providers/AI21Setup.tsx b/front/components/providers/AI21Setup.tsx
index 4aabd7978f95..c963f46626c3 100644
--- a/front/components/providers/AI21Setup.tsx
+++ b/front/components/providers/AI21Setup.tsx
@@ -167,7 +167,7 @@ export default function AI21Setup({
                   <div className="flex-1"></div>
                   <div className="flex flex-initial">
                     <Button
-                      type="secondary"
+                      variant="secondary"
                       onClick={() => setOpen(false)}
                       label="Cancel"
                     />
diff --git a/front/components/providers/AnthropicSetup.tsx b/front/components/providers/AnthropicSetup.tsx
index 0bdb743734da..78213d58f237 100644
--- a/front/components/providers/AnthropicSetup.tsx
+++ b/front/components/providers/AnthropicSetup.tsx
@@ -172,7 +172,7 @@ export default function AnthropicSetup({
                     <Button
                       onClick={() => setOpen(false)}
                       label="Cancel"
-                      type="secondary"
+                      variant="secondary"
                     />
                   </div>
                   <div className="flex flex-initial">
diff --git a/front/components/providers/AzureOpenAISetup.tsx b/front/components/providers/AzureOpenAISetup.tsx
index ca705b8f8aba..bd99c4f3e743 100644
--- a/front/components/providers/AzureOpenAISetup.tsx
+++ b/front/components/providers/AzureOpenAISetup.tsx
@@ -183,7 +183,7 @@ export default function AzureOpenAISetup({
                     <Button
                       onClick={() => setOpen(false)}
                       label="Cancel"
-                      type="secondary"
+                      variant="secondary"
                     />
                   </div>
                   <div className="flex flex-initial">
diff --git a/front/components/providers/BrowserlessAPISetup.tsx b/front/components/providers/BrowserlessAPISetup.tsx
index e862e5bee103..badff79098c5 100644
--- a/front/components/providers/BrowserlessAPISetup.tsx
+++ b/front/components/providers/BrowserlessAPISetup.tsx
@@ -177,7 +177,7 @@ export default function BrowserlessAPISetup({
                     <Button
                       onClick={() => setOpen(false)}
                       label="Cancel"
-                      type="secondary"
+                      variant="secondary"
                     />
                   </div>
                   <div className="flex flex-initial">
diff --git a/front/components/providers/CohereSetup.tsx b/front/components/providers/CohereSetup.tsx
index bca8e637ee3c..44aec7266ff0 100644
--- a/front/components/providers/CohereSetup.tsx
+++ b/front/components/providers/CohereSetup.tsx
@@ -169,7 +169,7 @@ export default function CohereSetup({
                     <Button
                       onClick={() => setOpen(false)}
                       label="Cancel"
-                      type="secondary"
+                      variant="secondary"
                     />
                   </div>
                   <div className="flex flex-initial">
diff --git a/front/components/providers/OpenAISetup.tsx b/front/components/providers/OpenAISetup.tsx
index c3918493d5ce..251e41bdaaaf 100644
--- a/front/components/providers/OpenAISetup.tsx
+++ b/front/components/providers/OpenAISetup.tsx
@@ -169,7 +169,7 @@ export default function OpenAISetup({
                     <Button
                       onClick={() => setOpen(false)}
                       label="Cancel"
-                      type="secondary"
+                      variant="secondary"
                     />
                   </div>
                   <div className="flex flex-initial">
diff --git a/front/components/providers/SerpAPISetup.tsx b/front/components/providers/SerpAPISetup.tsx
index 4ae69f32a948..e319faffc293 100644
--- a/front/components/providers/SerpAPISetup.tsx
+++ b/front/components/providers/SerpAPISetup.tsx
@@ -169,7 +169,7 @@ export default function SerpAPISetup({
                     <Button
                       onClick={() => setOpen(false)}
                       label="Cancel"
-                      type="secondary"
+                      variant="secondary"
                     />
                   </div>
                   <div className="flex flex-initial">
diff --git a/front/components/providers/SerperSetup.tsx b/front/components/providers/SerperSetup.tsx
index 2ca23cb07934..ec41f90380bb 100644
--- a/front/components/providers/SerperSetup.tsx
+++ b/front/components/providers/SerperSetup.tsx
@@ -169,7 +169,7 @@ export default function SerperSetup({
                     <Button
                       onClick={() => setOpen(false)}
                       label="Cancel"
-                      type="secondary"
+                      variant="secondary"
                     />
                   </div>
                   <div className="flex flex-initial">
diff --git a/front/components/sparkle/AppLayoutChatTitle.tsx b/front/components/sparkle/AppLayoutChatTitle.tsx
index 731fdb309dd7..6669332b7235 100644
--- a/front/components/sparkle/AppLayoutChatTitle.tsx
+++ b/front/components/sparkle/AppLayoutChatTitle.tsx
@@ -48,7 +48,7 @@ export function AppLayoutChatTitle({
               size="sm"
               labelVisible={false}
               tooltipPosition="below"
-              type="secondaryWarning"
+              variant="secondaryWarning"
               label="Delete"
               icon={TrashIcon}
               onClick={onDelete}
@@ -64,7 +64,7 @@ export function AppLayoutChatTitle({
                   size="sm"
                   label="Share"
                   icon={ArrowUpOnSquareIcon}
-                  type="secondary"
+                  variant="secondary"
                 />
               </DropdownMenu.Button>
               <DropdownMenu.Items width={280}>
@@ -95,7 +95,7 @@ export function AppLayoutChatTitle({
                   </div>
                   <div className="flex justify-center">
                     <Button
-                      type="secondary"
+                      variant="secondary"
                       size="sm"
                       label={copyLinkSuccess ? "Copied!" : "Copy the link"}
                       icon={
diff --git a/front/components/sparkle/AppLayoutTitle.tsx b/front/components/sparkle/AppLayoutTitle.tsx
index 86c5b8733485..828f17224945 100644
--- a/front/components/sparkle/AppLayoutTitle.tsx
+++ b/front/components/sparkle/AppLayoutTitle.tsx
@@ -26,7 +26,7 @@ export function AppLayoutSimpleCloseTitle({
         label="Close"
         labelVisible={false}
         tooltipPosition="below"
-        type="tertiary"
+        variant="tertiary"
         onClick={onClose}
         icon={XMarkIcon}
       />
diff --git a/front/components/use/EventSchemaForm.tsx b/front/components/use/EventSchemaForm.tsx
index a7ac0f44d049..181402cc2b66 100644
--- a/front/components/use/EventSchemaForm.tsx
+++ b/front/components/use/EventSchemaForm.tsx
@@ -208,7 +208,7 @@ export function ExtractEventSchemaForm({
           <div className="col-span-6 sm:col-span-2"></div>
           <div className="col-span-6 flex justify-end sm:col-span-4">
             <Button
-              type="primary"
+              variant="primary"
               label={isProcessing ? "Submitting..." : "Submit"}
               disabled={isProcessing || readOnly}
               onClick={async () => {
@@ -218,7 +218,7 @@ export function ExtractEventSchemaForm({
             <Button
               onClick={() => router.push(`/w/${owner.sId}/u/extract`)}
               label="Cancel"
-              type="secondary"
+              variant="secondary"
             />
           </div>
         </div>
diff --git a/front/package-lock.json b/front/package-lock.json
index 3bdf4c9da9ca..4416c177cc0d 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@dust-tt/sparkle": "0.1.44",
+        "@dust-tt/sparkle": "0.1.46",
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.11",
         "@nangohq/frontend": "^0.16.1",
@@ -713,9 +713,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.1.44",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.1.44.tgz",
-      "integrity": "sha512-X/J41CA/RT91Lb1uE5ffP6gSx16DDwvKHDYaKljexg2FbnOuTE6n7vSFxAtlptgOs8VE3sjBPY48ZcnsXvoHHA==",
+      "version": "0.1.46",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.1.46.tgz",
+      "integrity": "sha512-rNpMOpQqbqQOAzhRtru+fHfeIGjoeOU1NQsmhAa0ikIX0LL4zlzNqQeQg/IBFeGX/QUKBUebSSNZZOl6X6A8Lw==",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
       },
diff --git a/front/package.json b/front/package.json
index 832ac17efe7b..9596b1ef4993 100644
--- a/front/package.json
+++ b/front/package.json
@@ -13,7 +13,7 @@
     "initdb": "env $(cat .env.local) npx tsx admin/db.ts"
   },
   "dependencies": {
-    "@dust-tt/sparkle": "0.1.44",
+    "@dust-tt/sparkle": "0.1.46",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",
     "@nangohq/frontend": "^0.16.1",
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 2a4b63f874c6..7b3769d4126f 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -277,7 +277,7 @@ export default function Home({
                   <div className="mt-6">
                     <Link href="https://docs.dust.tt">
                       <Button
-                        type="tertiary"
+                        variant="tertiary"
                         size="sm"
                         label="View Documentation"
                       />
diff --git a/front/pages/poke/[wId]/index.tsx b/front/pages/poke/[wId]/index.tsx
index 6d34bac296fb..2e571da0afc5 100644
--- a/front/pages/poke/[wId]/index.tsx
+++ b/front/pages/poke/[wId]/index.tsx
@@ -287,14 +287,14 @@ const WorkspacePage = ({
               <div className="mt-4 flex-row">
                 <Button
                   label="Downgrade"
-                  type="secondaryWarning"
+                  variant="secondaryWarning"
                   onClick={onDowngrade}
                   disabled={!isFullyUpgraded || workspaceHasManagedDataSources}
                 />
 
                 <Button
                   label="Upgrade"
-                  type="secondary"
+                  variant="secondary"
                   onClick={onUpgrade}
                   disabled={isFullyUpgraded}
                 />
@@ -319,7 +319,7 @@ const WorkspacePage = ({
                   <h3 className="mb-2 text-lg font-semibold">{ds.name}</h3>
                   <Button
                     label="Delete"
-                    type="secondaryWarning"
+                    variant="secondaryWarning"
                     onClick={() => onDataSourcesDelete(ds.name)}
                   />
                 </div>
diff --git a/front/pages/poke/[wId]/memberships.tsx b/front/pages/poke/[wId]/memberships.tsx
index d4b4f42bcfd8..78fdfa767df2 100644
--- a/front/pages/poke/[wId]/memberships.tsx
+++ b/front/pages/poke/[wId]/memberships.tsx
@@ -115,7 +115,7 @@ const MembershipsPage = ({
                   <div>role: {m.workspaces[0].role}</div>
                   <Button
                     label="Revoke"
-                    type="secondaryWarning"
+                    variant="secondaryWarning"
                     disabled={m.workspaces[0].role === "none"}
                     onClick={() => onRevoke(m)}
                   />
diff --git a/front/pages/w/[wId]/a/[aId]/datasets/[name]/index.tsx b/front/pages/w/[wId]/a/[aId]/datasets/[name]/index.tsx
index 0fa51fe681e2..0b036824278e 100644
--- a/front/pages/w/[wId]/a/[aId]/datasets/[name]/index.tsx
+++ b/front/pages/w/[wId]/a/[aId]/datasets/[name]/index.tsx
@@ -197,7 +197,7 @@ export default function ViewDatasetView({
                         disabled={disable || loading}
                         onClick={() => handleSubmit()}
                         label="Update"
-                        type="primary"
+                        variant="primary"
                       />
                     </div>
                   </div>
diff --git a/front/pages/w/[wId]/a/[aId]/datasets/index.tsx b/front/pages/w/[wId]/a/[aId]/datasets/index.tsx
index a962d7fd5b18..34ba28492b9e 100644
--- a/front/pages/w/[wId]/a/[aId]/datasets/index.tsx
+++ b/front/pages/w/[wId]/a/[aId]/datasets/index.tsx
@@ -119,7 +119,7 @@ export default function DatasetsView({
               <div className="flex flex-row items-center justify-between">
                 <Button
                   disabled={readOnly}
-                  type="primary"
+                  variant="primary"
                   label="New Dataset"
                   icon={PlusIcon}
                   onClick={() => {
diff --git a/front/pages/w/[wId]/a/[aId]/datasets/new.tsx b/front/pages/w/[wId]/a/[aId]/datasets/new.tsx
index 670502407b8a..022d537850a2 100644
--- a/front/pages/w/[wId]/a/[aId]/datasets/new.tsx
+++ b/front/pages/w/[wId]/a/[aId]/datasets/new.tsx
@@ -158,7 +158,7 @@ export default function NewDatasetView({
                 <div className="flex-initial">
                   <Button
                     label="Create"
-                    type="primary"
+                    variant="primary"
                     disabled={disable || loading}
                     onClick={() => handleSubmit()}
                   />
diff --git a/front/pages/w/[wId]/a/[aId]/execute/index.tsx b/front/pages/w/[wId]/a/[aId]/execute/index.tsx
index bedf51a489ae..1f0b0391c3f2 100644
--- a/front/pages/w/[wId]/a/[aId]/execute/index.tsx
+++ b/front/pages/w/[wId]/a/[aId]/execute/index.tsx
@@ -607,7 +607,7 @@ export default function ExecuteView({
               <div className="flex flex-initial">
                 <div className="">
                   <Button
-                    type="primary"
+                    variant="primary"
                     disabled={!canRun()}
                     onClick={() => handleRun()}
                     icon={PlayCircleIcon}
diff --git a/front/pages/w/[wId]/a/[aId]/index.tsx b/front/pages/w/[wId]/a/[aId]/index.tsx
index 7034577d22ef..e1dadff0a71b 100644
--- a/front/pages/w/[wId]/a/[aId]/index.tsx
+++ b/front/pages/w/[wId]/a/[aId]/index.tsx
@@ -340,7 +340,7 @@ export default function AppView({
               small={false}
             />
             <Button
-              type="secondary"
+              variant="secondary"
               disabled={
                 !runnable || runRequested || run?.status.run == "running"
               }
@@ -365,7 +365,7 @@ export default function AppView({
             {readOnly && user ? (
               <div className="flex-initial">
                 <Button
-                  type="secondary"
+                  variant="secondary"
                   label="Clone"
                   icon={DocumentDuplicateIcon}
                   onClick={() => {
@@ -378,7 +378,7 @@ export default function AppView({
             {!readOnly ? (
               <div className="hidden flex-initial sm:block">
                 <Button
-                  type="tertiary"
+                  variant="tertiary"
                   icon={DocumentTextIcon}
                   label="Documentation"
                   onClick={() => {
@@ -421,7 +421,7 @@ export default function AppView({
               <p className="mt-4">To get started, add your first block or:</p>
               <p className="mt-4">
                 <Button
-                  type="tertiary"
+                  variant="tertiary"
                   icon={DocumentTextIcon}
                   label="Follow the QuickStart Guide"
                   onClick={() => {
@@ -447,7 +447,7 @@ export default function AppView({
               </div>
               <div className="flex">
                 <Button
-                  type="secondary"
+                  variant="secondary"
                   disabled={
                     !runnable || runRequested || run?.status.run == "running"
                   }
diff --git a/front/pages/w/[wId]/a/[aId]/runs/[runId]/index.tsx b/front/pages/w/[wId]/a/[aId]/runs/[runId]/index.tsx
index a5d6c47a1fc4..db165afd1a3a 100644
--- a/front/pages/w/[wId]/a/[aId]/runs/[runId]/index.tsx
+++ b/front/pages/w/[wId]/a/[aId]/runs/[runId]/index.tsx
@@ -201,7 +201,7 @@ export default function AppRun({
                   disabled={true}
                   icon={CheckCircleIcon}
                   label="Latest version"
-                  type="secondary"
+                  variant="secondary"
                 />
               )}
             </p>
diff --git a/front/pages/w/[wId]/a/[aId]/runs/index.tsx b/front/pages/w/[wId]/a/[aId]/runs/index.tsx
index 7f6d683208a4..c33573ad2992 100644
--- a/front/pages/w/[wId]/a/[aId]/runs/index.tsx
+++ b/front/pages/w/[wId]/a/[aId]/runs/index.tsx
@@ -172,7 +172,7 @@ export default function RunsView({
           <div className="flex flex-initial">
             <div className="flex">
               <Button
-                type="tertiary"
+                variant="tertiary"
                 disabled={offset < limit}
                 onClick={() => {
                   if (offset >= limit) {
@@ -186,7 +186,7 @@ export default function RunsView({
             </div>
             <div className="ml-2 flex">
               <Button
-                type="tertiary"
+                variant="tertiary"
                 disabled={offset + limit >= total}
                 onClick={() => {
                   if (offset + limit < total) {
diff --git a/front/pages/w/[wId]/a/[aId]/settings.tsx b/front/pages/w/[wId]/a/[aId]/settings.tsx
index 2a90271e6370..753cafc6b315 100644
--- a/front/pages/w/[wId]/a/[aId]/settings.tsx
+++ b/front/pages/w/[wId]/a/[aId]/settings.tsx
@@ -346,7 +346,7 @@ export default function SettingsView({
               <div className="flex-1"></div>
               <div className="flex">
                 <Button
-                  type="secondary"
+                  variant="secondary"
                   onClick={() => {
                     void router.push(`/w/${owner.sId}/a/${app.sId}/clone`);
                   }}
@@ -355,7 +355,7 @@ export default function SettingsView({
               </div>
               <div className="ml-2 flex">
                 <Button
-                  type="secondaryWarning"
+                  variant="secondaryWarning"
                   onClick={handleDelete}
                   disabled={isDeleting || isUpdating}
                   label={isDeleting ? "Deleting..." : "Delete"}
diff --git a/front/pages/w/[wId]/a/index.tsx b/front/pages/w/[wId]/a/index.tsx
index 69f57bb34d91..d2e92f4409a0 100644
--- a/front/pages/w/[wId]/a/index.tsx
+++ b/front/pages/w/[wId]/a/index.tsx
@@ -117,7 +117,7 @@ export function APIKeys({ owner }: { owner: WorkspaceType }) {
         description="Secrets used to communicate between your servers and Dust. Do not share them with anyone. Do not use them in client-side or browser code."
         action={{
           label: "Create Secret API Key",
-          type: "tertiary",
+          variant: "tertiary",
           onClick: async () => {
             await handleGenerate();
           },
@@ -183,7 +183,7 @@ export function APIKeys({ owner }: { owner: WorkspaceType }) {
                 {key.status === "active" ? (
                   <div>
                     <Button
-                      type="secondaryWarning"
+                      variant="secondaryWarning"
                       disabled={key.status != "active"}
                       onClick={async () => {
                         await handleRevoke(key);
@@ -316,7 +316,7 @@ export function Providers({ owner }: { owner: WorkspaceType }) {
                 </div>
                 <div>
                   <Button
-                    type={
+                    variant={
                       configs[provider.providerId] ? "tertiary" : "secondary"
                     }
                     disabled={!provider.built}
@@ -389,7 +389,7 @@ export function Providers({ owner }: { owner: WorkspaceType }) {
                 <div>
                   <Button
                     disabled={!provider.built}
-                    type={
+                    variant={
                       configs[provider.providerId] ? "tertiary" : "secondary"
                     }
                     onClick={() => {
@@ -451,7 +451,7 @@ export default function Developers({
           description="Your Large Language Model apps."
           action={{
             label: "Create App",
-            type: "tertiary",
+            variant: "tertiary",
             onClick: async () => {
               void router.push(`/w/${owner.sId}/a/new`);
             },
@@ -516,7 +516,7 @@ export default function Developers({
                   </p>
                   <p className="mt-2">
                     <Link href="https://docs.dust.tt" target="_blank">
-                      <Button type="tertiary" label="View Documentation" />
+                      <Button variant="tertiary" label="View Documentation" />
                     </Link>
                   </p>
                 </>
diff --git a/front/pages/w/[wId]/a/new.tsx b/front/pages/w/[wId]/a/new.tsx
index fa16034f8bf7..7950f628c143 100644
--- a/front/pages/w/[wId]/a/new.tsx
+++ b/front/pages/w/[wId]/a/new.tsx
@@ -263,7 +263,7 @@ export default function NewApp({
           <div className="flex flex-1"></div>
           <div className="flex">
             <Button
-              type="tertiary"
+              variant="tertiary"
               disabled={creating}
               onClick={async () => {
                 void router.push(`/w/${owner.sId}/a`);
diff --git a/front/pages/w/[wId]/builder/assistants/index.tsx b/front/pages/w/[wId]/builder/assistants/index.tsx
index 1275f10aa27e..578663e40b1e 100644
--- a/front/pages/w/[wId]/builder/assistants/index.tsx
+++ b/front/pages/w/[wId]/builder/assistants/index.tsx
@@ -75,7 +75,7 @@ export default function AssistantsBuilder({
           description="Build your own Assistant, use specific instructions and specific data sources to get better answers."
           action={{
             label: "Create a new Assistant",
-            type: "secondary",
+            variant: "secondary",
             icon: PlusIcon,
             size: "sm",
             onClick: () => {
diff --git a/front/pages/w/[wId]/builder/assistants/new.tsx b/front/pages/w/[wId]/builder/assistants/new.tsx
index 7dc8a86599af..fb7d63bc5fe6 100644
--- a/front/pages/w/[wId]/builder/assistants/new.tsx
+++ b/front/pages/w/[wId]/builder/assistants/new.tsx
@@ -1,6 +1,7 @@
 import {
   Avatar,
   Button,
+  ChevronUpDownIcon,
   Icon,
   InformationCircleStrokeIcon,
   PageHeader,
@@ -8,7 +9,6 @@ import {
   PlusIcon,
   RobotStrokeIcon,
 } from "@dust-tt/sparkle";
-import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 
@@ -96,7 +96,7 @@ export default function CreateAssistant({
             <Button
               labelVisible={true}
               label="Change"
-              type="tertiary"
+              variant="tertiary"
               size="xs"
               icon={PencilSquareIcon}
             />
@@ -202,7 +202,7 @@ export default function CreateAssistant({
               <Button
                 labelVisible={true}
                 label="Add a data source"
-                type="primary"
+                variant="primary"
                 size="md"
                 icon={PlusIcon}
               />
@@ -224,7 +224,7 @@ export default function CreateAssistant({
               <Button
                 labelVisible={true}
                 label="Auto (default)"
-                type="secondary"
+                variant="secondary"
                 size="sm"
                 icon={ChevronUpDownIcon}
               />
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
index dbd1359ef095..576413373758 100644
--- a/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
@@ -191,7 +191,7 @@ function StandardDataSourceView({
             ? undefined
             : {
                 label: "Settings",
-                type: "tertiary",
+                variant: "tertiary",
                 icon: Cog6ToothIcon,
                 onClick: () => {
                   void router.push(
@@ -209,7 +209,7 @@ function StandardDataSourceView({
               <div className="flex flex-initial">
                 <div className="flex">
                   <Button
-                    type="tertiary"
+                    variant="tertiary"
                     disabled={offset < limit}
                     onClick={() => {
                       if (offset >= limit) {
@@ -223,7 +223,7 @@ function StandardDataSourceView({
                 </div>
                 <div className="ml-2 flex">
                   <Button
-                    type="tertiary"
+                    variant="tertiary"
                     label="Next"
                     disabled={offset + limit >= total}
                     onClick={() => {
@@ -249,7 +249,7 @@ function StandardDataSourceView({
           <div className="">
             <div className="mt-0 flex-none">
               <Button
-                type="secondary"
+                variant="secondary"
                 icon={PlusIcon}
                 label="Document"
                 onClick={() => {
@@ -533,7 +533,7 @@ function ManagedDataSourceView({
               ? undefined
               : {
                   label: "Settings",
-                  type: "tertiary",
+                  variant: "tertiary",
                   icon: Cog6ToothIcon,
                   onClick: () => {
                     void router.push(
@@ -548,7 +548,7 @@ function ManagedDataSourceView({
           <div className="flex">
             <Button
               label="Search"
-              type="secondary"
+              variant="secondary"
               onClick={() => {
                 void router.push(
                   `/w/${owner.sId}/builder/data-sources/${dataSource.name}/search`
@@ -559,7 +559,7 @@ function ManagedDataSourceView({
           <div className={classNames(isAdmin ? "flex" : "hidden")}>
             <Button
               label="Edit permissions"
-              type="secondary"
+              variant="secondary"
               onClick={() => {
                 if (["slack", "google_drive"].includes(connectorProvider)) {
                   setShowPermissionModal(true);
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/settings.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/settings.tsx
index 85dc7871597f..ebea7ac06096 100644
--- a/front/pages/w/[wId]/builder/data-sources/[name]/settings.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/[name]/settings.tsx
@@ -360,7 +360,7 @@ function StandardDataSourceSettings({
       <div className="flex pt-6">
         <div className="flex">
           <Button
-            type="secondaryWarning"
+            variant="secondaryWarning"
             onClick={handleDelete}
             disabled={isDeleting || isUpdating}
             label={isDeleting ? "Deleting..." : "Delete"}
@@ -369,7 +369,7 @@ function StandardDataSourceSettings({
         <div className="flex-1"></div>
         <div className="ml-2 flex">
           <Button
-            type="tertiary"
+            variant="tertiary"
             onClick={() => {
               void router.push(
                 `/w/${owner.sId}/builder/data-sources/${dataSource.name}`
@@ -381,7 +381,7 @@ function StandardDataSourceSettings({
         </div>
         <div className="ml-2 flex">
           <Button
-            type="secondary"
+            variant="secondary"
             onClick={() => {
               void handleUpdate({
                 description: dataSourceDescription,
@@ -451,7 +451,7 @@ function ManagedDataSourceSettings({
           <div className="flex flex-1"></div>
           <div className="ml-2 flex">
             <Button
-              type="tertiary"
+              variant="tertiary"
               onClick={() => {
                 void router.push(
                   `/w/${owner.sId}/builder/data-sources/${dataSource.name}`
@@ -463,7 +463,7 @@ function ManagedDataSourceSettings({
           </div>
           <div className="ml-2 flex">
             <Button
-              type="secondary"
+              variant="secondary"
               onClick={() => {
                 void handleUpdate({
                   assistantDefaultSelected,
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/upsert.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/upsert.tsx
index c427368e5e40..a4ead9ceae36 100644
--- a/front/pages/w/[wId]/builder/data-sources/[name]/upsert.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/[name]/upsert.tsx
@@ -316,7 +316,7 @@ export default function DataSourceUpsert({
                         size="xs"
                         label="Add tag"
                         icon={PlusIcon}
-                        type="tertiary"
+                        variant="tertiary"
                         onClick={() => handleAddTag()}
                       />
                     </div>
@@ -353,7 +353,7 @@ export default function DataSourceUpsert({
                         }}
                       ></input>
                       <Button
-                        type="tertiary"
+                        variant="tertiary"
                         onClick={() => {
                           if (fileInputRef.current) {
                             fileInputRef.current.click();
@@ -399,7 +399,7 @@ export default function DataSourceUpsert({
           <div className="flex flex-row py-6">
             <div className="flex-1"></div>
             <Button
-              type="tertiary"
+              variant="tertiary"
               disabled={loading || readOnly}
               onClick={async () => {
                 void router.push(
@@ -409,7 +409,7 @@ export default function DataSourceUpsert({
               label="Cancel"
             />
             <Button
-              type="secondary"
+              variant="secondary"
               disabled={disabled || loading || readOnly}
               onClick={async () => {
                 await handleUpsert();
diff --git a/front/pages/w/[wId]/builder/data-sources/index.tsx b/front/pages/w/[wId]/builder/data-sources/index.tsx
index ded1f8611d45..641bdcbe6e26 100644
--- a/front/pages/w/[wId]/builder/data-sources/index.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/index.tsx
@@ -475,7 +475,7 @@ export default function DataSourcesView({
                         if (!ds || !ds.connector) {
                           return (
                             <Button
-                              type="primary"
+                              variant="primary"
                               icon={CloudArrowDownIcon}
                               disabled={
                                 !ds.isBuilt ||
@@ -512,7 +512,7 @@ export default function DataSourcesView({
                         } else {
                           return (
                             <Button
-                              type="secondary"
+                              variant="secondary"
                               icon={Cog6ToothIcon}
                               disabled={
                                 !ds.isBuilt ||
@@ -549,7 +549,7 @@ export default function DataSourcesView({
             !readOnly
               ? {
                   label: "Add a new Data Source",
-                  type: "secondary",
+                  variant: "secondary",
                   icon: PlusIcon,
                   onClick: () => {
                     // Enforce plan limits: DataSources count.
@@ -599,7 +599,7 @@ export default function DataSourcesView({
 
                     <div>
                       <Button
-                        type="secondary"
+                        variant="secondary"
                         icon={Cog6ToothIcon}
                         onClick={() => {
                           void router.push(
diff --git a/front/pages/w/[wId]/builder/data-sources/new.tsx b/front/pages/w/[wId]/builder/data-sources/new.tsx
index 01c2cc3be975..570207139e3b 100644
--- a/front/pages/w/[wId]/builder/data-sources/new.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/new.tsx
@@ -234,7 +234,7 @@ export default function DataSourceNew({
         <div className="flex flex-1"></div>
         <div className="flex">
           <Button
-            type="tertiary"
+            variant="tertiary"
             disabled={creating}
             onClick={async () => {
               void router.push(`/w/${owner.sId}/builder/data-sources`);
diff --git a/front/pages/w/[wId]/u/chat/[cId]/index.tsx b/front/pages/w/[wId]/u/chat/[cId]/index.tsx
index d2a21701dbe7..cacc430c9af8 100644
--- a/front/pages/w/[wId]/u/chat/[cId]/index.tsx
+++ b/front/pages/w/[wId]/u/chat/[cId]/index.tsx
@@ -1215,7 +1215,7 @@ export default function AppChat({
                   </p>
                   <div className="pt-4 text-center">
                     <Button
-                      type={"primary"}
+                      variant={"primary"}
                       icon={CloudArrowDownIcon}
                       label="Set up your first Data Source"
                       onClick={() => {
@@ -1326,7 +1326,7 @@ export default function AppChat({
                 {canTakeOwnership && (
                   <div className="mt-16 flex justify-center">
                     <Button
-                      type="primary"
+                      variant="primary"
                       label="Continue Conversation"
                       icon={RobotIcon}
                       onClick={handleTakeOwnership}
diff --git a/front/pages/w/[wId]/u/extract/events/[sId]/edit.tsx b/front/pages/w/[wId]/u/extract/events/[sId]/edit.tsx
index b27eac3a8122..b6a36e1b11a9 100644
--- a/front/pages/w/[wId]/u/extract/events/[sId]/edit.tsx
+++ b/front/pages/w/[wId]/u/extract/events/[sId]/edit.tsx
@@ -190,7 +190,7 @@ const BasicEventPropsEditor = ({
       <p className="mt-6 text-sm">{isValid ? "Valid JSON" : "Invalid JSON"}</p>
       <Button
         className="mt-6"
-        type="primary"
+        variant="primary"
         label={isProcessing ? "Submitting..." : "Submit"}
         disabled={!isValid || readOnly}
         onClick={async () => {
@@ -202,7 +202,7 @@ const BasicEventPropsEditor = ({
           router.push(`/w/${owner.sId}/u/extract/templates/${event.schema.sId}`)
         }
         label="Back"
-        type="secondary"
+        variant="secondary"
       />
     </div>
   );
diff --git a/front/pages/w/[wId]/u/extract/index.tsx b/front/pages/w/[wId]/u/extract/index.tsx
index 25573c5b1608..94d3fbde3a62 100644
--- a/front/pages/w/[wId]/u/extract/index.tsx
+++ b/front/pages/w/[wId]/u/extract/index.tsx
@@ -101,7 +101,7 @@ export default function AppExtractEvents({
                   <td className="whitespace-nowrap px-3 py-4">
                     <Button
                       label="See extracted data"
-                      type="tertiary"
+                      variant="tertiary"
                       onClick={() =>
                         router.push(
                           `/w/${owner.sId}/u/extract/templates/${schema.sId}`
diff --git a/front/pages/w/[wId]/u/extract/templates/[sId]/index.tsx b/front/pages/w/[wId]/u/extract/templates/[sId]/index.tsx
index 58ed05659b06..408e6593aecf 100644
--- a/front/pages/w/[wId]/u/extract/templates/[sId]/index.tsx
+++ b/front/pages/w/[wId]/u/extract/templates/[sId]/index.tsx
@@ -234,7 +234,7 @@ export default function AppExtractEventsReadData({
         <Button
           onClick={() => router.push(`/w/${owner.sId}/u/extract`)}
           label="Back"
-          type="secondary"
+          variant="secondary"
         />
       </div>
     </AppLayout>
@@ -389,7 +389,7 @@ const ExtractButtonAndModal = ({ event }: { event: ExtractedEventType }) => {
                     </div>
                     <div className="justify-center">
                       <Button
-                        type="secondary"
+                        variant="secondary"
                         size="sm"
                         label={
                           copySuccess === "Markdown"
@@ -406,7 +406,7 @@ const ExtractButtonAndModal = ({ event }: { event: ExtractedEventType }) => {
                     </div>
                     <div className="justify-center">
                       <Button
-                        type="secondary"
+                        variant="secondary"
                         size="sm"
                         label={
                           copySuccess === "JSON" ? "Copied!" : "Copy as JSON"
diff --git a/front/pages/w/[wId]/u/gens/index.tsx b/front/pages/w/[wId]/u/gens/index.tsx
index a832e8a6a623..4a2295af10c3 100644
--- a/front/pages/w/[wId]/u/gens/index.tsx
+++ b/front/pages/w/[wId]/u/gens/index.tsx
@@ -832,7 +832,7 @@ export function TemplatesView({
                       <div className="flex flex-initial">
                         <Button
                           onClick={() => setFormExpanded(false)}
-                          type="secondary"
+                          variant="secondary"
                           label={editable ? "Cancel" : "Close"}
                         />
                       </div>
@@ -1402,7 +1402,7 @@ export default function AppGens({
         <div className="">
           <div className="m-auto my-3">
             <Button
-              type="tertiary"
+              variant="tertiary"
               onClick={() => setExplainExpanded(true)}
               label="How does Gens work?"
             />
@@ -1477,7 +1477,7 @@ export default function AppGens({
                         />
                       ) : (
                         <Button
-                          type="secondaryWarning"
+                          variant="secondaryWarning"
                           disabled={!genLoading || genInterruptRef.current}
                           onClick={() => {
                             genInterruptRef.current = true;
@@ -1517,7 +1517,7 @@ export default function AppGens({
                         <div className="flex flex-1"></div>
                         <div className="flex flex-initial">
                           <Button
-                            type="secondary"
+                            variant="secondary"
                             disabled={
                               retrievalLoading || !(selecting || searchQuery)
                             }
diff --git a/front/pages/w/[wId]/workspace/index.tsx b/front/pages/w/[wId]/workspace/index.tsx
index 4f382941b230..787c6c8441c0 100644
--- a/front/pages/w/[wId]/workspace/index.tsx
+++ b/front/pages/w/[wId]/workspace/index.tsx
@@ -1,6 +1,12 @@
-import { Button, KeyIcon, PageHeader, SectionHeader } from "@dust-tt/sparkle";
+import {
+  Button,
+  ChevronUpDownIcon,
+  KeyIcon,
+  PageHeader,
+  SectionHeader,
+} from "@dust-tt/sparkle";
 import { Listbox } from "@headlessui/react";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { CheckIcon } from "@heroicons/react/20/solid";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import React, { useEffect, useState } from "react";
 import { mutate } from "swr";
@@ -289,7 +295,7 @@ export default function WorkspaceAdmin({
             <div className="flex flex-1"></div>
             <div className="flex">
               <Button
-                type="secondary"
+                variant="secondary"
                 disabled={disable || updating}
                 onClick={handleUpdateWorkspace}
                 label={updating ? "Updating..." : "Update"}
@@ -340,7 +346,7 @@ export default function WorkspaceAdmin({
                 <div className="flex flex-1"></div>
                 <div className="mt-0.5 flex">
                   <Button
-                    type="secondary"
+                    variant="secondary"
                     disabled={
                       !inviteEmail || !isEmailValid(inviteEmail) || isSending
                     }
@@ -379,7 +385,7 @@ export default function WorkspaceAdmin({
                     </div>
                     <div className="flex-shrink-0 text-sm text-gray-500">
                       <Button
-                        type="tertiary"
+                        variant="tertiary"
                         onClick={() => handleRevokeInvitation(invitation.id)}
                         label="Revoke"
                         size="xs"