diff --git a/.claude/skills/studio-mock-api-tests/SKILL.md b/.claude/skills/studio-mock-api-tests/SKILL.md
index bd09ea125f6..f073e305750 100644
--- a/.claude/skills/studio-mock-api-tests/SKILL.md
+++ b/.claude/skills/studio-mock-api-tests/SKILL.md
@@ -99,7 +99,7 @@ response: () => HttpResponse.json<MyResponse>({}, { status: 201 })
 
 ### 3. Submit buttons in Sheets/Modals need `fireEvent.click`
 
-The convention `<Button form={FORM_ID} htmlType="submit" />` (button
+The convention `<Button form={FORM_ID} type="submit" />` (button
 outside the form, associated by id) doesn't reliably trigger submission
 under `userEvent.click` in jsdom. Use `fireEvent.click` for the submit
 button. Continue to use `userEvent.type` for inputs.
diff --git a/apps/design-system/components/code-block-wrapper.tsx b/apps/design-system/components/code-block-wrapper.tsx
index cdb9a53ce5d..c8b1e43dc14 100644
--- a/apps/design-system/components/code-block-wrapper.tsx
+++ b/apps/design-system/components/code-block-wrapper.tsx
@@ -35,7 +35,7 @@ export function CodeBlockWrapper({
           )}
         >
           <CollapsibleTrigger asChild>
-            <Button type="secondary" className="h-8 text-xs">
+            <Button variant="secondary" className="h-8 text-xs">
               {isOpened ? 'Collapse' : expandButtonTitle}
             </Button>
           </CollapsibleTrigger>
diff --git a/apps/design-system/components/command-menu.tsx b/apps/design-system/components/command-menu.tsx
index 2fa3cfee17f..89886d4a59e 100644
--- a/apps/design-system/components/command-menu.tsx
+++ b/apps/design-system/components/command-menu.tsx
@@ -54,7 +54,7 @@ export function CommandMenu({ ...props }: DialogProps) {
   return (
     <>
       <Button
-        type="outline"
+        variant="outline"
         className={cn(
           `lg:flex hidden relative h-8 w-full justify-start rounded-lg bg-background text-sm font-normal text-foreground-muted shadow-none sm:pr-12 md:w-40 lg:w-64 hover:border-foreground-muted hover:bg-surface-100 hover:text-foreground-lighter
           `
@@ -69,7 +69,7 @@ export function CommandMenu({ ...props }: DialogProps) {
         </kbd>
       </Button>
       <Button
-        type="text"
+        variant="text"
         size="tiny"
         className="px-1 group lg:hidden"
         onClick={() => setOpen(true)}
diff --git a/apps/design-system/components/component-preview.tsx b/apps/design-system/components/component-preview.tsx
index 5e06d45aba4..8689633cf91 100644
--- a/apps/design-system/components/component-preview.tsx
+++ b/apps/design-system/components/component-preview.tsx
@@ -125,7 +125,7 @@ export function ComponentPreview({
               <Button
                 className="rounded-full"
                 onClick={() => setExpandState(!expand)}
-                type="default"
+                variant="default"
                 icon={<Expand className="text-foreground-lighter" />}
               >
                 {expand ? 'Collapse code' : 'Expand code'}
diff --git a/apps/design-system/components/copy-button.tsx b/apps/design-system/components/copy-button.tsx
index c54c37a97ad..18376f124d8 100644
--- a/apps/design-system/components/copy-button.tsx
+++ b/apps/design-system/components/copy-button.tsx
@@ -49,7 +49,7 @@ export function CopyButton({
   return (
     <Button
       size="small"
-      type="outline"
+      variant="outline"
       className={cn(
         'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0',
         className
@@ -106,7 +106,7 @@ export function CopyWithClassNames({
       <DropdownMenuTrigger asChild>
         <Button
           size="small"
-          type="outline"
+          variant="outline"
           className={cn(
             'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50',
             className
diff --git a/apps/design-system/components/source-panel.tsx b/apps/design-system/components/source-panel.tsx
index 91fdc6c6f1e..3f54cce4209 100644
--- a/apps/design-system/components/source-panel.tsx
+++ b/apps/design-system/components/source-panel.tsx
@@ -111,7 +111,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
               <div className="flex items-center gap-2 justify-end">
                 {doc.links?.doc && (
                   <Button
-                    type="outline"
+                    variant="outline"
                     className="rounded-full"
                     icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                   >
@@ -128,7 +128,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 )}
                 {doc.links?.api && (
                   <Button
-                    type="outline"
+                    variant="outline"
                     className="rounded-full"
                     icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                   >
@@ -205,7 +205,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 <div className="flex items-center gap-2 justify-end">
                   {doc.links?.doc && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
@@ -222,7 +222,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                   )}
                   {doc.links?.api && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
@@ -268,7 +268,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 <div className="flex items-center gap-2 justify-end">
                   {doc.links?.doc && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
@@ -279,7 +279,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                   )}
                   {doc.links?.api && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
diff --git a/apps/design-system/components/theme-switcher-dropdown.tsx b/apps/design-system/components/theme-switcher-dropdown.tsx
index 86aec9f5b2f..23b706a9c47 100644
--- a/apps/design-system/components/theme-switcher-dropdown.tsx
+++ b/apps/design-system/components/theme-switcher-dropdown.tsx
@@ -40,7 +40,7 @@ const ThemeSwitcherDropdown = () => {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             className="px-1 group"
             icon={
diff --git a/apps/design-system/components/top-navigation.tsx b/apps/design-system/components/top-navigation.tsx
index 232167a8528..a8968565fbf 100644
--- a/apps/design-system/components/top-navigation.tsx
+++ b/apps/design-system/components/top-navigation.tsx
@@ -18,7 +18,7 @@ export const TopNavigation = () => {
         <div className="max-w-site w-full flex flex-row items-center gap-6 mx-auto md:px-6 px-4 justify-between">
           <div className="flex items-center gap-2">
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               className="px-1 md:hidden"
               onClick={toggle}
diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx
index 2fe36168c07..7588d3262c8 100644
--- a/apps/design-system/content/docs/components/button.mdx
+++ b/apps/design-system/content/docs/components/button.mdx
@@ -14,11 +14,9 @@ import { Button } from '@/components/ui/button'
 ```
 
 ```tsx
-<Button type="outline">Button</Button>
+<Button variant="outline">Button</Button>
 ```
 
-_It is likely that the `type` prop will be changed to `variant` in the future._
-
 ## Link
 
 You can use the `buttonVariants` helper to create a link that looks like a button.
@@ -47,9 +45,9 @@ Use the `size` prop to determine the size of the button.
 
 <ComponentPreview name="button-sizes" />
 
-### Types
+### Variants
 
-These are all the different `type` variations.
+These are all the different `variant` variations.
 
 #### Primary
 
@@ -61,15 +59,15 @@ Used for data insertion actions, confirming purchases, strong positive actions.
 
 Used for opening dialogs, navigating to pages, and other non CRUD actions.
 
-This `type` will probably be the most used button type.
-It will probably be changed to be the default type in future.
+This `variant` will probably be the most used button variant.
+It will probably be changed to be the default variant in future.
 
 <ComponentPreview name="button-default" />
 
 #### Secondary
 
 Can be used for signaling a data or config change, but not as serious as a primary button.
-For destructive or side effect actions, use the `destructive` or `warning` type.
+For destructive or side effect actions, use the `destructive` or `warning` variant.
 
 <ComponentPreview name="button-secondary" />
 
@@ -83,7 +81,7 @@ Used for actions that might have a side effect, but not as serious as a destruct
 
 Used for actions that will have a serious destructive side effect, like deleting data.
 
-prop `type` will probably be changed to `destructive` in the future.
+prop `variant` will probably be changed to `destructive` in the future.
 
 <ComponentPreview name="button-destructive" />
 
@@ -97,7 +95,7 @@ Used for secondary actions, or actions that are not as important as the primary
 
 Used for actions that are not as important as the primary action, or for actions that are not as important as the primary action.
 
-prop `type` will probably be changed to `ghost` in the future.
+prop `variant` will probably be changed to `ghost` in the future.
 
 <ComponentPreview name="button-ghost" />
 
diff --git a/apps/design-system/content/docs/fragments/inner-side-menu.mdx b/apps/design-system/content/docs/fragments/inner-side-menu.mdx
index 3850cea469e..73e21d85e97 100644
--- a/apps/design-system/content/docs/fragments/inner-side-menu.mdx
+++ b/apps/design-system/content/docs/fragments/inner-side-menu.mdx
@@ -118,7 +118,7 @@ Use the `actions` prop to add any actions like a `<Button />`.
   title="No functions found"
   description="Create your first serverless function to get started."
   actions={
-    <Button type="default" onClick={createAction}>
+    <Button variant="default" onClick={createAction}>
       Create Function
     </Button>
   }
diff --git a/apps/design-system/content/docs/fragments/page-breadcrumbs.mdx b/apps/design-system/content/docs/fragments/page-breadcrumbs.mdx
index 9b995f4a5ad..40375274ee3 100644
--- a/apps/design-system/content/docs/fragments/page-breadcrumbs.mdx
+++ b/apps/design-system/content/docs/fragments/page-breadcrumbs.mdx
@@ -24,7 +24,7 @@ import { PageBreadcrumbs, PageBreadcrumbsActions } from 'ui-patterns/PageBreadcr
 <PageBreadcrumbs
   actions={
     <PageBreadcrumbsActions>
-      <Button type="primary" size="tiny">
+      <Button variant="primary" size="tiny">
         Create
       </Button>
     </PageBreadcrumbsActions>
diff --git a/apps/design-system/content/docs/fragments/page-header.mdx b/apps/design-system/content/docs/fragments/page-header.mdx
index dd754709723..05fa7a1d1f8 100644
--- a/apps/design-system/content/docs/fragments/page-header.mdx
+++ b/apps/design-system/content/docs/fragments/page-header.mdx
@@ -44,7 +44,7 @@ Compound header for page context: optional icon, title, description, and aside a
       <PageHeaderDescription>Manage email templates for your project.</PageHeaderDescription>
     </PageHeaderSummary>
     <PageHeaderAside>
-      <Button type="primary" size="tiny">
+      <Button variant="primary" size="tiny">
         Create template
       </Button>
     </PageHeaderAside>
diff --git a/apps/design-system/content/docs/fragments/text-confirm-dialog.mdx b/apps/design-system/content/docs/fragments/text-confirm-dialog.mdx
index 12f90b69c7a..3dc9d17280a 100644
--- a/apps/design-system/content/docs/fragments/text-confirm-dialog.mdx
+++ b/apps/design-system/content/docs/fragments/text-confirm-dialog.mdx
@@ -29,7 +29,7 @@ export default function TextConfirmDialogDemo() {
 
   return (
     <>
-      <Button type="danger" onClick={() => setVisible(true)}>
+      <Button variant="danger" onClick={() => setVisible(true)}>
         Show Text Confirm Dialog
       </Button>
 
diff --git a/apps/design-system/content/docs/ui-patterns/modality.mdx b/apps/design-system/content/docs/ui-patterns/modality.mdx
index ddb14d08fd0..adb2b0fc4e5 100644
--- a/apps/design-system/content/docs/ui-patterns/modality.mdx
+++ b/apps/design-system/content/docs/ui-patterns/modality.mdx
@@ -116,7 +116,7 @@ const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
 
 <Sheet open={visible} onOpenChange={handleOpenChange}>
   ...
-  <Button type="default" onClick={confirmOnClose}>
+  <Button variant="default" onClick={confirmOnClose}>
     Cancel
   </Button>
   ...
diff --git a/apps/design-system/registry/default/example/admonition-button.tsx b/apps/design-system/registry/default/example/admonition-button.tsx
index b6251de2bef..2296942ff60 100644
--- a/apps/design-system/registry/default/example/admonition-button.tsx
+++ b/apps/design-system/registry/default/example/admonition-button.tsx
@@ -10,14 +10,14 @@ export default function AdmonitionDemo() {
         title="Set up custom SMTP"
         description="You’re using the built-in email service. This service has rate limits and is not meant to be
         used for production apps."
-        actions={<Button type="default">Set up SMTP</Button>}
+        actions={<Button variant="default">Set up SMTP</Button>}
       />
       <Admonition
         type="destructive"
         layout="horizontal"
         title="Deleting this organization will also remove its projects"
         description="Make sure you have made a backup of your projects if you want to keep your data."
-        actions={<Button type="danger">Delete organization</Button>}
+        actions={<Button variant="danger">Delete organization</Button>}
       />
     </div>
   )
diff --git a/apps/design-system/registry/default/example/admonition-demo.tsx b/apps/design-system/registry/default/example/admonition-demo.tsx
index 75040b9fc63..78e8a2300ff 100644
--- a/apps/design-system/registry/default/example/admonition-demo.tsx
+++ b/apps/design-system/registry/default/example/admonition-demo.tsx
@@ -9,7 +9,7 @@ export default function AdmonitionDemo() {
       title="OAuth Server is disabled"
       description="Enable OAuth Server to make your project act as an identity provider for
             third-party applications."
-      actions={<Button type="default">OAuth Server Settings</Button>}
+      actions={<Button variant="default">OAuth Server Settings</Button>}
     />
   )
 }
diff --git a/apps/design-system/registry/default/example/admonition-responsive.tsx b/apps/design-system/registry/default/example/admonition-responsive.tsx
index 5ad40cdcc72..30b2d481ff8 100644
--- a/apps/design-system/registry/default/example/admonition-responsive.tsx
+++ b/apps/design-system/registry/default/example/admonition-responsive.tsx
@@ -8,7 +8,7 @@ export default function AdmonitionDemo() {
       layout="responsive"
       title="Disk management has moved"
       description="Disk management is now handled alongside Project Compute on the Compute and Disk page."
-      actions={<Button type="default">Go to Compute and Disk</Button>}
+      actions={<Button variant="default">Go to Compute and Disk</Button>}
     />
   )
 }
diff --git a/apps/design-system/registry/default/example/alert-dialog-async-error.tsx b/apps/design-system/registry/default/example/alert-dialog-async-error.tsx
index 21cd9c9d7c1..188a256861a 100644
--- a/apps/design-system/registry/default/example/alert-dialog-async-error.tsx
+++ b/apps/design-system/registry/default/example/alert-dialog-async-error.tsx
@@ -36,7 +36,7 @@ export default function AlertDialogAsyncError() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
diff --git a/apps/design-system/registry/default/example/alert-dialog-async.tsx b/apps/design-system/registry/default/example/alert-dialog-async.tsx
index a34c37fb463..47749ce1b84 100644
--- a/apps/design-system/registry/default/example/alert-dialog-async.tsx
+++ b/apps/design-system/registry/default/example/alert-dialog-async.tsx
@@ -19,7 +19,7 @@ export default function AlertDialogAsync() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
diff --git a/apps/design-system/registry/default/example/alert-dialog-close-only.tsx b/apps/design-system/registry/default/example/alert-dialog-close-only.tsx
index 204d3e3b970..975ae516372 100644
--- a/apps/design-system/registry/default/example/alert-dialog-close-only.tsx
+++ b/apps/design-system/registry/default/example/alert-dialog-close-only.tsx
@@ -14,7 +14,7 @@ export default function AlertDialogCloseOnly() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
diff --git a/apps/design-system/registry/default/example/alert-dialog-demo.tsx b/apps/design-system/registry/default/example/alert-dialog-demo.tsx
index 447be8975eb..d38011820e2 100644
--- a/apps/design-system/registry/default/example/alert-dialog-demo.tsx
+++ b/apps/design-system/registry/default/example/alert-dialog-demo.tsx
@@ -15,7 +15,7 @@ export default function AlertDialogDemo() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
diff --git a/apps/design-system/registry/default/example/alert-dialog-destructive.tsx b/apps/design-system/registry/default/example/alert-dialog-destructive.tsx
index 6edea2532a1..62446169204 100644
--- a/apps/design-system/registry/default/example/alert-dialog-destructive.tsx
+++ b/apps/design-system/registry/default/example/alert-dialog-destructive.tsx
@@ -15,7 +15,7 @@ export default function AlertDialogDestructive() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="danger">Show Alert Dialog</Button>
+        <Button variant="danger">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
diff --git a/apps/design-system/registry/default/example/alert-dialog-warning.tsx b/apps/design-system/registry/default/example/alert-dialog-warning.tsx
index 8b95feaa82a..82bd2d8c182 100644
--- a/apps/design-system/registry/default/example/alert-dialog-warning.tsx
+++ b/apps/design-system/registry/default/example/alert-dialog-warning.tsx
@@ -15,7 +15,7 @@ export default function AlertDialogWarning() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="warning">Show Alert Dialog</Button>
+        <Button variant="warning">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
diff --git a/apps/design-system/registry/default/example/button-default.tsx b/apps/design-system/registry/default/example/button-default.tsx
index 33b22371e51..1a3c0024e20 100644
--- a/apps/design-system/registry/default/example/button-default.tsx
+++ b/apps/design-system/registry/default/example/button-default.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonDemo() {
   return (
     <div className="flex gap-3">
-      <Button type="default">Button rest</Button>
-      <Button type="default" loading>
+      <Button variant="default">Button rest</Button>
+      <Button variant="default" loading>
         Button loading
       </Button>
-      <Button type="default" icon={<Mail />}>
+      <Button variant="default" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="default" iconRight={<Mail />}>
+      <Button variant="default" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-demo.tsx b/apps/design-system/registry/default/example/button-demo.tsx
index be612ebfafa..50e28157d2a 100644
--- a/apps/design-system/registry/default/example/button-demo.tsx
+++ b/apps/design-system/registry/default/example/button-demo.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonDemo() {
   return (
     <div className="flex gap-3">
-      <Button type="primary">Button rest</Button>
-      <Button type="primary" loading>
+      <Button variant="primary">Button rest</Button>
+      <Button variant="primary" loading>
         Button loading
       </Button>
-      <Button type="primary" icon={<Mail />}>
+      <Button variant="primary" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="primary" iconRight={<Mail />}>
+      <Button variant="primary" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-destructive.tsx b/apps/design-system/registry/default/example/button-destructive.tsx
index 33e1c7005ec..7eb3d779f5a 100644
--- a/apps/design-system/registry/default/example/button-destructive.tsx
+++ b/apps/design-system/registry/default/example/button-destructive.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonDestructive() {
   return (
     <div className="flex gap-3">
-      <Button type="danger">Button rest</Button>
-      <Button type="danger" loading>
+      <Button variant="danger">Button rest</Button>
+      <Button variant="danger" loading>
         Button loading
       </Button>
-      <Button type="danger" icon={<Mail />}>
+      <Button variant="danger" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="danger" iconRight={<Mail />}>
+      <Button variant="danger" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-ghost.tsx b/apps/design-system/registry/default/example/button-ghost.tsx
index 0230b5a104b..3fe558ea80b 100644
--- a/apps/design-system/registry/default/example/button-ghost.tsx
+++ b/apps/design-system/registry/default/example/button-ghost.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonGhost() {
   return (
     <div className="flex gap-3">
-      <Button type="text">Button rest</Button>
-      <Button type="text" loading>
+      <Button variant="text">Button rest</Button>
+      <Button variant="text" loading>
         Button loading
       </Button>
-      <Button type="text" icon={<Mail />}>
+      <Button variant="text" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="text" iconRight={<Mail />}>
+      <Button variant="text" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-icon.tsx b/apps/design-system/registry/default/example/button-icon.tsx
index f140520b763..e9cac7c1660 100644
--- a/apps/design-system/registry/default/example/button-icon.tsx
+++ b/apps/design-system/registry/default/example/button-icon.tsx
@@ -2,5 +2,5 @@ import { ChevronRight } from 'lucide-react'
 import { Button } from 'ui'
 
 export default function ButtonIcon() {
-  return <Button type="outline" icon={<ChevronRight className="h-4 w-4" />}></Button>
+  return <Button variant="outline" icon={<ChevronRight className="h-4 w-4" />}></Button>
 }
diff --git a/apps/design-system/registry/default/example/button-link.tsx b/apps/design-system/registry/default/example/button-link.tsx
index a34a15aa152..8710648d0b3 100644
--- a/apps/design-system/registry/default/example/button-link.tsx
+++ b/apps/design-system/registry/default/example/button-link.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonLink() {
   return (
     <div className="flex gap-3">
-      <Button type="link">Button rest</Button>
-      <Button type="link" loading>
+      <Button variant="link">Button rest</Button>
+      <Button variant="link" loading>
         Button loading
       </Button>
-      <Button type="link" icon={<Mail />}>
+      <Button variant="link" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="link" iconRight={<Mail />}>
+      <Button variant="link" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-outline.tsx b/apps/design-system/registry/default/example/button-outline.tsx
index da8039f0c4d..ce2f599701a 100644
--- a/apps/design-system/registry/default/example/button-outline.tsx
+++ b/apps/design-system/registry/default/example/button-outline.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonOutline() {
   return (
     <div className="flex gap-3">
-      <Button type="outline">Button rest</Button>
-      <Button type="outline" loading>
+      <Button variant="outline">Button rest</Button>
+      <Button variant="outline" loading>
         Button loading
       </Button>
-      <Button type="outline" icon={<Mail />}>
+      <Button variant="outline" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="outline" iconRight={<Mail />}>
+      <Button variant="outline" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-secondary.tsx b/apps/design-system/registry/default/example/button-secondary.tsx
index 59a1fdcdcaf..71f6cdc7e30 100644
--- a/apps/design-system/registry/default/example/button-secondary.tsx
+++ b/apps/design-system/registry/default/example/button-secondary.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonSecondary() {
   return (
     <div className="flex gap-3">
-      <Button type="secondary">Button rest</Button>
-      <Button type="secondary" loading>
+      <Button variant="secondary">Button rest</Button>
+      <Button variant="secondary" loading>
         Button loading
       </Button>
-      <Button type="secondary" icon={<Mail />}>
+      <Button variant="secondary" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="secondary" iconRight={<Mail />}>
+      <Button variant="secondary" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-sizes.tsx b/apps/design-system/registry/default/example/button-sizes.tsx
index d625a4e6305..9dbd9b642d2 100644
--- a/apps/design-system/registry/default/example/button-sizes.tsx
+++ b/apps/design-system/registry/default/example/button-sizes.tsx
@@ -4,19 +4,19 @@ import { Button } from 'ui'
 export default function ButtonDemo() {
   return (
     <div className="flex gap-3">
-      <Button type="default" size="tiny">
+      <Button variant="default" size="tiny">
         Tiny Button
       </Button>
-      <Button type="default" size="small">
+      <Button variant="default" size="small">
         Small button
       </Button>
-      <Button type="default" size="medium">
+      <Button variant="default" size="medium">
         Medium button
       </Button>
-      <Button type="default" size="large">
+      <Button variant="default" size="large">
         Large button
       </Button>
-      <Button type="default" size="xlarge">
+      <Button variant="default" size="xlarge">
         Huge button
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/button-warning.tsx b/apps/design-system/registry/default/example/button-warning.tsx
index e50b6abc8c7..9257d0e2980 100644
--- a/apps/design-system/registry/default/example/button-warning.tsx
+++ b/apps/design-system/registry/default/example/button-warning.tsx
@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonDemo() {
   return (
     <div className="flex gap-3">
-      <Button type="warning">Button rest</Button>
-      <Button type="warning" loading>
+      <Button variant="warning">Button rest</Button>
+      <Button variant="warning" loading>
         Button loading
       </Button>
-      <Button type="warning" icon={<Mail />}>
+      <Button variant="warning" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="warning" iconRight={<Mail />}>
+      <Button variant="warning" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/calendar-form.tsx b/apps/design-system/registry/default/example/calendar-form.tsx
index c94a7f56050..99846d6f4b8 100644
--- a/apps/design-system/registry/default/example/calendar-form.tsx
+++ b/apps/design-system/registry/default/example/calendar-form.tsx
@@ -57,7 +57,7 @@ export default function CalendarForm() {
                 <PopoverTrigger asChild>
                   <FormControl>
                     <Button
-                      type={'default'}
+                      variant="default"
                       size="small"
                       className={cn(
                         'w-[240px] justify-start',
@@ -84,7 +84,7 @@ export default function CalendarForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
index fd580854922..7cc4683d4ed 100644
--- a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
+++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
@@ -57,7 +57,7 @@ export default function CalendarForm() {
                 <PopoverTrigger asChild>
                   <FormControl>
                     <Button
-                      type={'outline'}
+                      variant="outline"
                       className={cn(
                         'w-[240px] pl-3 text-left font-normal',
                         !field.value && 'text-muted-foreground'
@@ -83,7 +83,7 @@ export default function CalendarForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
index bbf536fedad..006ad6bad2a 100644
--- a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
@@ -112,7 +112,7 @@ export default function CheckboxReactHookFormMultiple() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/apps/design-system/registry/default/example/checkbox-form-single.tsx b/apps/design-system/registry/default/example/checkbox-form-single.tsx
index 8a9dad9fffd..f18d4a172ef 100644
--- a/apps/design-system/registry/default/example/checkbox-form-single.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx
@@ -59,7 +59,7 @@ export default function CheckboxReactHookFormSingle() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/apps/design-system/registry/default/example/collapsible-demo.tsx b/apps/design-system/registry/default/example/collapsible-demo.tsx
index e989e8c154e..e9bf6e8d0c3 100644
--- a/apps/design-system/registry/default/example/collapsible-demo.tsx
+++ b/apps/design-system/registry/default/example/collapsible-demo.tsx
@@ -12,7 +12,7 @@ export default function CollapsibleDemo() {
       <div className="flex items-center justify-between space-x-4 px-4">
         <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
         <CollapsibleTrigger asChild>
-          <Button type="outline" size="medium" className="w-9 p-0">
+          <Button variant="outline" size="medium" className="w-9 p-0">
             <ChevronsUpDown className="h-4 w-4" />
             <span className="sr-only">Toggle</span>
           </Button>
diff --git a/apps/design-system/registry/default/example/combobox-demo.tsx b/apps/design-system/registry/default/example/combobox-demo.tsx
index b7f8fabd978..5216f8b4ada 100644
--- a/apps/design-system/registry/default/example/combobox-demo.tsx
+++ b/apps/design-system/registry/default/example/combobox-demo.tsx
@@ -48,7 +48,7 @@ export default function ComboboxDemo() {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           role="combobox"
           size={'small'}
           aria-expanded={open}
diff --git a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
index b9885ea531b..d98d978bd9a 100644
--- a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
+++ b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
@@ -49,7 +49,7 @@ export default function ComboboxDropdownMenu() {
       <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             icon={<MoreHorizontal className="text-foreground-muted" />}
           ></Button>
diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx
index b6cd2f507d1..a0a71ccd955 100644
--- a/apps/design-system/registry/default/example/combobox-form.tsx
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -73,7 +73,7 @@ export default function ComboboxForm() {
                 <PopoverTrigger asChild>
                   <FormControl>
                     <Button
-                      type="default"
+                      variant="default"
                       role="combobox"
                       className={cn(
                         'w-[200px] justify-between',
@@ -128,7 +128,7 @@ export default function ComboboxForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit" type="secondary" size="small">
+        <Button type="submit" variant="secondary" size="small">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/combobox-popover.tsx b/apps/design-system/registry/default/example/combobox-popover.tsx
index 4c2df6b951c..3ddb32386cc 100644
--- a/apps/design-system/registry/default/example/combobox-popover.tsx
+++ b/apps/design-system/registry/default/example/combobox-popover.tsx
@@ -69,7 +69,7 @@ export default function ComboboxPopover() {
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
-            type="default"
+            variant="default"
             size="small"
             className="w-[150px] justify-start rounded-full"
             icon={
diff --git a/apps/design-system/registry/default/example/combobox-responsive.tsx b/apps/design-system/registry/default/example/combobox-responsive.tsx
index 90dcb2f8506..9d48ceb272d 100644
--- a/apps/design-system/registry/default/example/combobox-responsive.tsx
+++ b/apps/design-system/registry/default/example/combobox-responsive.tsx
@@ -58,7 +58,7 @@ export default function ComboBoxResponsive() {
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
-            type="default"
+            variant="default"
             size="small"
             className="w-[150px] justify-start"
             icon={!selectedStatus && <Plus className="text-foreground-muted" />}
@@ -76,7 +76,7 @@ export default function ComboBoxResponsive() {
   return (
     <Drawer open={open} onOpenChange={setOpen}>
       <DrawerTrigger asChild>
-        <Button type="outline" className="w-[150px] justify-start">
+        <Button variant="outline" className="w-[150px] justify-start">
           {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
         </Button>
       </DrawerTrigger>
diff --git a/apps/design-system/registry/default/example/confirmation-modal-demo.tsx b/apps/design-system/registry/default/example/confirmation-modal-demo.tsx
index 49268e20a35..140ef286421 100644
--- a/apps/design-system/registry/default/example/confirmation-modal-demo.tsx
+++ b/apps/design-system/registry/default/example/confirmation-modal-demo.tsx
@@ -24,7 +24,7 @@ export default function ConfirmationModalDemo() {
 
   return (
     <>
-      <Button type="default" onClick={() => setVisible(!visible)}>
+      <Button variant="default" onClick={() => setVisible(!visible)}>
         Show Confirmation Modal
       </Button>
       <ConfirmationModal
diff --git a/apps/design-system/registry/default/example/copy-button-verbs.tsx b/apps/design-system/registry/default/example/copy-button-verbs.tsx
index 3cf3c071531..f02a41aaf52 100644
--- a/apps/design-system/registry/default/example/copy-button-verbs.tsx
+++ b/apps/design-system/registry/default/example/copy-button-verbs.tsx
@@ -7,15 +7,15 @@ export default function CopyButtonVerbs() {
     <div className="flex flex-row gap-16">
       <div className="flex flex-col gap-4">
         <span className="text-xs text-foreground-muted">Bad Example</span>
-        <Button type="primary">Table creation</Button>
-        <Button type="primary">Save action</Button>
-        <Button type="danger">Bucket deletion</Button>
+        <Button variant="primary">Table creation</Button>
+        <Button variant="primary">Save action</Button>
+        <Button variant="danger">Bucket deletion</Button>
       </div>
       <div className="flex flex-col gap-4">
         <span className="text-xs text-foreground-muted">Good Example</span>
-        <Button type="primary">Create table</Button>
-        <Button type="primary">Save changes</Button>
-        <Button type="danger">Delete bucket</Button>
+        <Button variant="primary">Create table</Button>
+        <Button variant="primary">Save changes</Button>
+        <Button variant="danger">Delete bucket</Button>
       </div>
     </div>
   )
diff --git a/apps/design-system/registry/default/example/copy-confirmations.tsx b/apps/design-system/registry/default/example/copy-confirmations.tsx
index a60d869ab1b..d99d184b00c 100644
--- a/apps/design-system/registry/default/example/copy-confirmations.tsx
+++ b/apps/design-system/registry/default/example/copy-confirmations.tsx
@@ -18,10 +18,10 @@ export default function CopyConfirmations() {
             </div>
           </div>
           <div className="flex gap-2 justify-end">
-            <Button type="default" size="tiny">
+            <Button variant="default" size="tiny">
               Cancel
             </Button>
-            <Button type="danger" size="tiny">
+            <Button variant="danger" size="tiny">
               Delete
             </Button>
           </div>
@@ -40,10 +40,10 @@ export default function CopyConfirmations() {
             </div>
           </div>
           <div className="flex gap-2 justify-end">
-            <Button type="default" size="tiny">
+            <Button variant="default" size="tiny">
               Cancel
             </Button>
-            <Button type="danger" size="tiny">
+            <Button variant="danger" size="tiny">
               Delete project
             </Button>
           </div>
diff --git a/apps/design-system/registry/default/example/copy-empty-states.tsx b/apps/design-system/registry/default/example/copy-empty-states.tsx
index cf0415f5c28..7008b7ef0cf 100644
--- a/apps/design-system/registry/default/example/copy-empty-states.tsx
+++ b/apps/design-system/registry/default/example/copy-empty-states.tsx
@@ -25,7 +25,7 @@ export default function CopyEmptyStates() {
             title="No API keys"
             description="Generate a key to connect your application."
           >
-            <Button type="primary">Generate key</Button>
+            <Button variant="primary">Generate key</Button>
           </EmptyStatePresentational>
         </div>
       </div>
diff --git a/apps/design-system/registry/default/example/copy-loading-states.tsx b/apps/design-system/registry/default/example/copy-loading-states.tsx
index db1259dc196..54c053276d5 100644
--- a/apps/design-system/registry/default/example/copy-loading-states.tsx
+++ b/apps/design-system/registry/default/example/copy-loading-states.tsx
@@ -8,13 +8,13 @@ export default function CopyLoadingStates() {
       <div className="flex flex-col gap-4">
         <span className="text-xs text-foreground-muted">Bad Example</span>
         <div className="flex flex-col gap-4">
-          <Button type="primary" loading>
+          <Button variant="primary" loading>
             Please wait...
           </Button>
-          <Button type="primary" loading>
+          <Button variant="primary" loading>
             Loading...
           </Button>
-          <Button type="danger" loading>
+          <Button variant="danger" loading>
             Processing...
           </Button>
         </div>
@@ -22,13 +22,13 @@ export default function CopyLoadingStates() {
       <div className="flex flex-col gap-4">
         <span className="text-xs text-foreground-muted">Good Example</span>
         <div className="flex flex-col gap-4">
-          <Button type="primary" loading>
+          <Button variant="primary" loading>
             Creating table...
           </Button>
-          <Button type="primary" loading>
+          <Button variant="primary" loading>
             Loading schema...
           </Button>
-          <Button type="danger" loading>
+          <Button variant="danger" loading>
             Deleting project...
           </Button>
         </div>
diff --git a/apps/design-system/registry/default/example/copy-tooltips.tsx b/apps/design-system/registry/default/example/copy-tooltips.tsx
index 2e564e5c813..9faeb3c3243 100644
--- a/apps/design-system/registry/default/example/copy-tooltips.tsx
+++ b/apps/design-system/registry/default/example/copy-tooltips.tsx
@@ -13,7 +13,7 @@ export default function CopyTooltips() {
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  type="text"
+                  variant="text"
                   className="flex items-center px-1.5"
                   icon={<Info size={20} strokeWidth={1.5} />}
                   aria-label="More info"
@@ -33,7 +33,7 @@ export default function CopyTooltips() {
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  type="text"
+                  variant="text"
                   className="flex items-center px-1.5"
                   icon={<Info size={20} strokeWidth={1.5} />}
                   aria-label="More info"
diff --git a/apps/design-system/registry/default/example/data-table-demo.tsx b/apps/design-system/registry/default/example/data-table-demo.tsx
index 76f51dcfc8c..a2eaa1b817d 100644
--- a/apps/design-system/registry/default/example/data-table-demo.tsx
+++ b/apps/design-system/registry/default/example/data-table-demo.tsx
@@ -139,7 +139,7 @@ export const columns: ColumnDef<Payment>[] = [
       return (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="default" className="px-1.5" icon={<MoreVertical />} />
+            <Button variant="default" className="px-1.5" icon={<MoreVertical />} />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="max-w-48">
             <DropdownMenuItem onClick={() => navigator.clipboard.writeText(payment.id)}>
@@ -200,7 +200,7 @@ export default function DataTableDemo() {
         />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="default" className="ml-auto" size="tiny" iconRight={<ChevronDown />}>
+            <Button variant="default" className="ml-auto" size="tiny" iconRight={<ChevronDown />}>
               Columns
             </Button>
           </DropdownMenuTrigger>
@@ -303,7 +303,7 @@ export default function DataTableDemo() {
         </div>
         <div className="space-x-2">
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
@@ -311,7 +311,7 @@ export default function DataTableDemo() {
             Previous
           </Button>
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
diff --git a/apps/design-system/registry/default/example/date-picker-demo.tsx b/apps/design-system/registry/default/example/date-picker-demo.tsx
index 3d1bd8ae6f8..8ac1d493670 100644
--- a/apps/design-system/registry/default/example/date-picker-demo.tsx
+++ b/apps/design-system/registry/default/example/date-picker-demo.tsx
@@ -14,7 +14,7 @@ export default function DatePickerDemo() {
     <Popover>
       <PopoverTrigger asChild>
         <Button
-          type={'outline'}
+          variant="outline"
           className={cn(
             'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground'
diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx
index 3e04211b3e4..26724729db3 100644
--- a/apps/design-system/registry/default/example/date-picker-form.tsx
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -57,7 +57,7 @@ export default function DatePickerForm() {
                 <PopoverTrigger asChild>
                   <FormControl>
                     <Button
-                      type={'outline'}
+                      variant="outline"
                       className={cn(
                         'w-[240px] pl-3 text-left font-normal',
                         !field.value && 'text-muted-foreground'
@@ -83,7 +83,7 @@ export default function DatePickerForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/apps/design-system/registry/default/example/date-picker-with-presets.tsx b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
index 0641cad33b1..c4faa7f1d2e 100644
--- a/apps/design-system/registry/default/example/date-picker-with-presets.tsx
+++ b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
@@ -25,7 +25,7 @@ export default function DatePickerWithPresets() {
     <Popover>
       <PopoverTrigger asChild>
         <Button
-          type={'outline'}
+          variant="outline"
           className={cn(
             'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground'
diff --git a/apps/design-system/registry/default/example/date-picker-with-range.tsx b/apps/design-system/registry/default/example/date-picker-with-range.tsx
index 5ba900c01a6..533c909e022 100644
--- a/apps/design-system/registry/default/example/date-picker-with-range.tsx
+++ b/apps/design-system/registry/default/example/date-picker-with-range.tsx
@@ -20,7 +20,7 @@ export default function DatePickerWithRange({ className }: React.HTMLAttributes<
         <PopoverTrigger asChild>
           <Button
             id="date"
-            type={'outline'}
+            variant="outline"
             className={cn(
               'w-[300px] justify-start text-left font-normal',
               !date && 'text-muted-foreground'
diff --git a/apps/design-system/registry/default/example/dialog-centered-off.tsx b/apps/design-system/registry/default/example/dialog-centered-off.tsx
index 6d23f99a6d9..ea35e2dd951 100644
--- a/apps/design-system/registry/default/example/dialog-centered-off.tsx
+++ b/apps/design-system/registry/default/example/dialog-centered-off.tsx
@@ -17,7 +17,7 @@ export default function DialogDemo() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="default">Edit profile</Button>
+        <Button variant="default">Edit profile</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]" centered={false}>
         <DialogHeader>
@@ -40,7 +40,7 @@ export default function DialogDemo() {
           </div>
         </DialogSection>
         <DialogFooter>
-          <Button htmlType="submit">Save changes</Button>
+          <Button type="submit">Save changes</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/apps/design-system/registry/default/example/dialog-close-button.tsx b/apps/design-system/registry/default/example/dialog-close-button.tsx
index c1258a255e8..da8b2ab7e78 100644
--- a/apps/design-system/registry/default/example/dialog-close-button.tsx
+++ b/apps/design-system/registry/default/example/dialog-close-button.tsx
@@ -19,7 +19,7 @@ export default function DialogCloseButton() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="default">Share</Button>
+        <Button variant="default">Share</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
@@ -35,7 +35,7 @@ export default function DialogCloseButton() {
               </Label>
               <Input id="link" defaultValue="https://ui.shadcn.com/docs/installation" readOnly />
             </div>
-            <Button htmlType="submit" size="small" type="secondary" className="px-3">
+            <Button type="submit" size="small" variant="secondary" className="px-3">
               <span className="sr-only">Copy</span>
               <Copy className="h-4 w-4" />
             </Button>
@@ -43,7 +43,7 @@ export default function DialogCloseButton() {
         </DialogSection>
         <DialogFooter className="sm:justify-start">
           <DialogClose asChild>
-            <Button type="default" htmlType="button">
+            <Button variant="default" type="button">
               Custom Close Button
             </Button>
           </DialogClose>
diff --git a/apps/design-system/registry/default/example/dialog-demo.tsx b/apps/design-system/registry/default/example/dialog-demo.tsx
index 455dd39f56e..9d6972d7b63 100644
--- a/apps/design-system/registry/default/example/dialog-demo.tsx
+++ b/apps/design-system/registry/default/example/dialog-demo.tsx
@@ -17,7 +17,7 @@ export default function DialogDemo() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="default">Show Dialog</Button>
+        <Button variant="default">Show Dialog</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
diff --git a/apps/design-system/registry/default/example/drawer-demo.tsx b/apps/design-system/registry/default/example/drawer-demo.tsx
index c1fd6d08a64..22ce3dd8566 100644
--- a/apps/design-system/registry/default/example/drawer-demo.tsx
+++ b/apps/design-system/registry/default/example/drawer-demo.tsx
@@ -67,7 +67,7 @@ export default function DrawerDemo() {
   return (
     <Drawer>
       <DrawerTrigger asChild>
-        <Button type="default" size="small">
+        <Button variant="default" size="small">
           Open Drawer
         </Button>
       </DrawerTrigger>
@@ -80,7 +80,7 @@ export default function DrawerDemo() {
           <div className="p-4 pb-0">
             <div className="flex items-center justify-center space-x-2">
               <Button
-                type="outline"
+                variant="outline"
                 size="small"
                 className="h-8 w-8 shrink-0 rounded-full"
                 onClick={() => onClick(-10)}
@@ -94,7 +94,7 @@ export default function DrawerDemo() {
                 <div className="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
               </div>
               <Button
-                type="outline"
+                variant="outline"
                 size="small"
                 className="h-8 w-8 shrink-0 rounded-full"
                 onClick={() => onClick(10)}
@@ -123,7 +123,7 @@ export default function DrawerDemo() {
           <DrawerFooter>
             <Button>Submit</Button>
             <DrawerClose asChild>
-              <Button type="outline">Cancel</Button>
+              <Button variant="outline">Cancel</Button>
             </DrawerClose>
           </DrawerFooter>
         </div>
diff --git a/apps/design-system/registry/default/example/drawer-dialog.tsx b/apps/design-system/registry/default/example/drawer-dialog.tsx
index c80bd29914f..b34a0df1ca9 100644
--- a/apps/design-system/registry/default/example/drawer-dialog.tsx
+++ b/apps/design-system/registry/default/example/drawer-dialog.tsx
@@ -32,7 +32,7 @@ export default function DrawerDialogDemo() {
     return (
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
-          <Button type="outline">Edit profile</Button>
+          <Button variant="outline">Edit profile</Button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
@@ -50,7 +50,7 @@ export default function DrawerDialogDemo() {
   return (
     <Drawer open={open} onOpenChange={setOpen}>
       <DrawerTrigger asChild>
-        <Button type="outline">Edit profile</Button>
+        <Button variant="outline">Edit profile</Button>
       </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader className="text-left">
@@ -62,7 +62,7 @@ export default function DrawerDialogDemo() {
         <ProfileForm className="px-4" />
         <DrawerFooter className="pt-2">
           <DrawerClose asChild>
-            <Button type="outline">Cancel</Button>
+            <Button variant="outline">Cancel</Button>
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
@@ -81,7 +81,7 @@ function ProfileForm({ className }: React.ComponentProps<'form'>) {
         <Label htmlFor="username">Username</Label>
         <Input id="username" defaultValue="@shadcn" />
       </div>
-      <Button htmlType="submit">Save changes</Button>
+      <Button type="submit">Save changes</Button>
     </form>
   )
 }
diff --git a/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
index 900ebe6903b..b830175419d 100644
--- a/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
+++ b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
@@ -22,7 +22,7 @@ export default function DropdownMenuCheckboxes() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button type="outline">Open</Button>
+        <Button variant="outline">Open</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
         <DropdownMenuLabel>Appearance</DropdownMenuLabel>
diff --git a/apps/design-system/registry/default/example/dropdown-menu-demo.tsx b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
index 56829f81456..40ca46ba1d3 100644
--- a/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
+++ b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
@@ -34,7 +34,7 @@ export default function DropdownMenuDemo() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button type="outline">Open</Button>
+        <Button variant="outline">Open</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
         <DropdownMenuLabel>My Account</DropdownMenuLabel>
diff --git a/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
index c9b7ab86b89..311bda5f61a 100644
--- a/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
+++ b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
@@ -18,7 +18,7 @@ export default function DropdownMenuRadioGroupDemo() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button type="outline">Open</Button>
+        <Button variant="outline">Open</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
         <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
diff --git a/apps/design-system/registry/default/example/empty-state-initial-state-informational.tsx b/apps/design-system/registry/default/example/empty-state-initial-state-informational.tsx
index 5c45d693e64..81832e46c20 100644
--- a/apps/design-system/registry/default/example/empty-state-initial-state-informational.tsx
+++ b/apps/design-system/registry/default/example/empty-state-initial-state-informational.tsx
@@ -4,7 +4,7 @@ import { Button, Card, Table, TableBody, TableCell, TableHead, TableHeader, Tabl
 export default function EmptyStateZeroItemsTable() {
   return (
     <div className="flex flex-col gap-y-4 w-full">
-      <Button className="w-fit self-end" type="primary" size="tiny" icon={<Plus size={14} />}>
+      <Button className="w-fit self-end" variant="primary" size="tiny" icon={<Plus size={14} />}>
         New table
       </Button>
       <Card>
diff --git a/apps/design-system/registry/default/example/empty-state-missing-route.tsx b/apps/design-system/registry/default/example/empty-state-missing-route.tsx
index 004dd0e1cbc..5f5c716b9a6 100644
--- a/apps/design-system/registry/default/example/empty-state-missing-route.tsx
+++ b/apps/design-system/registry/default/example/empty-state-missing-route.tsx
@@ -13,7 +13,7 @@ export default function EmptyStateMissingRoute() {
         title="Unable to find bucket"
         description={`${bucketId ? `The bucket “${bucketId}”` : 'This bucket'} doesn’t seem to exist.`}
       >
-        <Button asChild type="default" className="mt-2">
+        <Button asChild variant="default" className="mt-2">
           <Link
             href="/"
             onClick={(e) => {
diff --git a/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx b/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx
index e69553a9e26..0d548e96489 100644
--- a/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx
+++ b/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx
@@ -19,7 +19,7 @@ export default function EmptyStatePresentationalIcon() {
             <PageSectionTitle>Providers</PageSectionTitle>
           </PageSectionSummary>
           <PageSectionAside>
-            <Button size="tiny" type="primary" icon={<Plus size={14} />}>
+            <Button size="tiny" variant="primary" icon={<Plus size={14} />}>
               Add provider
             </Button>
           </PageSectionAside>
@@ -29,7 +29,7 @@ export default function EmptyStatePresentationalIcon() {
             title="Add a provider"
             description="Use third-party authentication systems to access your project."
           >
-            <Button size="tiny" type="default" icon={<Plus size={14} />}>
+            <Button size="tiny" variant="default" icon={<Plus size={14} />}>
               Add provider
             </Button>
           </EmptyStatePresentational>
diff --git a/apps/design-system/registry/default/example/empty-state-presentational-demo.tsx b/apps/design-system/registry/default/example/empty-state-presentational-demo.tsx
index 7b79318535a..cf33f0e62f3 100644
--- a/apps/design-system/registry/default/example/empty-state-presentational-demo.tsx
+++ b/apps/design-system/registry/default/example/empty-state-presentational-demo.tsx
@@ -8,7 +8,7 @@ export default function EmptyStatePresentationalIcon() {
       title="Create an auth hook"
       description="Use Postgres functions or HTTP endpoints to customize your authentication flow."
     >
-      <Button size="tiny" type="primary" icon={<Plus size={14} />}>
+      <Button size="tiny" variant="primary" icon={<Plus size={14} />}>
         Add hook
       </Button>
     </EmptyStatePresentational>
diff --git a/apps/design-system/registry/default/example/empty-state-presentational-icon.tsx b/apps/design-system/registry/default/example/empty-state-presentational-icon.tsx
index 2da35261df0..ba9e158d59b 100644
--- a/apps/design-system/registry/default/example/empty-state-presentational-icon.tsx
+++ b/apps/design-system/registry/default/example/empty-state-presentational-icon.tsx
@@ -10,7 +10,7 @@ export default function EmptyStatePresentationalIcon() {
       title="Create a vector bucket"
       description="Store, index, and query your vector embeddings at scale."
     >
-      <Button size="tiny" type="primary" icon={<Plus size={14} />}>
+      <Button size="tiny" variant="primary" icon={<Plus size={14} />}>
         Create bucket
       </Button>
     </EmptyStatePresentational>
diff --git a/apps/design-system/registry/default/example/field-demo.tsx b/apps/design-system/registry/default/example/field-demo.tsx
index 09fe7a26a82..7f73f348158 100644
--- a/apps/design-system/registry/default/example/field-demo.tsx
+++ b/apps/design-system/registry/default/example/field-demo.tsx
@@ -112,8 +112,8 @@ export default function FieldDemo() {
             </FieldGroup>
           </FieldSet>
           <Field orientation="horizontal">
-            <Button htmlType="submit">Submit</Button>
-            <Button htmlType="button" type="default">
+            <Button type="submit">Submit</Button>
+            <Button type="button" variant="default">
               Cancel
             </Button>
           </Field>
diff --git a/apps/design-system/registry/default/example/field-responsive.tsx b/apps/design-system/registry/default/example/field-responsive.tsx
index 1f00b1a2835..568e583485d 100644
--- a/apps/design-system/registry/default/example/field-responsive.tsx
+++ b/apps/design-system/registry/default/example/field-responsive.tsx
@@ -43,8 +43,8 @@ export default function FieldResponsive() {
             </Field>
             <FieldSeparator />
             <Field orientation="responsive">
-              <Button htmlType="submit">Submit</Button>
-              <Button htmlType="button" type="default">
+              <Button type="submit">Submit</Button>
+              <Button type="button" variant="default">
                 Cancel
               </Button>
             </Field>
diff --git a/apps/design-system/registry/default/example/filter-bar-demo.tsx b/apps/design-system/registry/default/example/filter-bar-demo.tsx
index 0b11a8889df..497a1ddecd8 100644
--- a/apps/design-system/registry/default/example/filter-bar-demo.tsx
+++ b/apps/design-system/registry/default/example/filter-bar-demo.tsx
@@ -25,11 +25,11 @@ function CustomDatePicker({ onChange, onCancel, search }: CustomOptionProps) {
         className="w-full"
       />
       <div className="flex justify-end gap-2 py-3 px-4 border-t">
-        <Button type="default" onClick={onCancel}>
+        <Button variant="default" onClick={onCancel}>
           Cancel
         </Button>
         <Button
-          type="primary"
+          variant="primary"
           onClick={() =>
             onChange(
               date?.from
diff --git a/apps/design-system/registry/default/example/form-item-layout-after-label.tsx b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
index bd0fbcfcabc..08d4e356f06 100644
--- a/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
@@ -42,7 +42,7 @@ export default function FormItemLayoutDemo() {
             </FormItemLayout>
           )}
         />
-        <Button size="small" type="secondary" htmlType="submit">
+        <Button size="small" variant="secondary" type="submit">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/form-item-layout-before-label.tsx b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
index a3c7813ec3d..22e5dd8ebbf 100644
--- a/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
@@ -42,7 +42,7 @@ export default function FormItemLayoutDemo() {
             </FormItemLayout>
           )}
         />
-        <Button size="small" type="secondary" htmlType="submit">
+        <Button size="small" variant="secondary" type="submit">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/form-item-layout-demo.tsx b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
index 6adef61bc1c..3c448902ab5 100644
--- a/apps/design-system/registry/default/example/form-item-layout-demo.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
@@ -45,7 +45,7 @@ export default function FormItemLayoutDemo() {
             </FormItemLayout>
           )}
         />
-        <Button size="small" type="secondary" htmlType="submit">
+        <Button size="small" variant="secondary" type="submit">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
index f9918829395..75eaccf274e 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
@@ -95,7 +95,7 @@ export default function FormItemLayoutDemo() {
             </FormItemLayout>
           )}
         />
-        <Button size="small" type="secondary" htmlType="submit">
+        <Button size="small" variant="secondary" type="submit">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
index eed49414ff1..7768d0a9559 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
@@ -39,7 +39,7 @@ export default function FormItemLayoutDemo() {
             </FormItemLayout>
           )}
         />
-        <Button size="small" type="secondary" htmlType="submit">
+        <Button size="small" variant="secondary" type="submit">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
index 73cf02f14ba..4ca0348f374 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
@@ -48,7 +48,7 @@ export default function FormItemLayoutDemo() {
         />
         <Separator />
         <div className="w-full flex justify-end">
-          <Button size="small" type="secondary" htmlType="submit">
+          <Button size="small" variant="secondary" type="submit">
             Submit
           </Button>
         </div>
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-select.tsx b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
index 171cff0daf9..735bfdfccaf 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
@@ -62,7 +62,7 @@ export default function FormItemLayoutDemo() {
             </FormItemLayout>
           )}
         />
-        <Button size="small" type="secondary" htmlType="submit">
+        <Button size="small" variant="secondary" type="submit">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
index f0bd8a5f991..c99009750a4 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
@@ -40,7 +40,7 @@ export default function FormItemLayoutDemo() {
             </FormItemLayout>
           )}
         />
-        <Button size="small" type="secondary" htmlType="submit">
+        <Button size="small" variant="secondary" type="submit">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
index 20cd3d30009..d3c6ef7d14d 100644
--- a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
@@ -336,7 +336,7 @@ export default function FormPatternsPageLayout() {
                             </button>
                             <div className="flex gap-2 items-center">
                               <Button
-                                type="default"
+                                variant="default"
                                 size="tiny"
                                 icon={<Upload size={14} />}
                                 onClick={() => uploadButtonRef.current?.click()}
@@ -345,7 +345,7 @@ export default function FormPatternsPageLayout() {
                               </Button>
                               {logoUrl && (
                                 <Button
-                                  type="default"
+                                  variant="default"
                                   size="tiny"
                                   icon={<Trash size={12} />}
                                   onClick={() => {
@@ -449,7 +449,7 @@ export default function FormPatternsPageLayout() {
                                         {file.name}
                                       </span>
                                       <Button
-                                        type="default"
+                                        variant="default"
                                         size="tiny"
                                         icon={<Trash size={12} />}
                                         onClick={() => {
@@ -674,7 +674,7 @@ export default function FormPatternsPageLayout() {
                           <Popover>
                             <PopoverTrigger asChild>
                               <Button
-                                type="outline"
+                                variant="outline"
                                 className="bg-control w-full justify-start text-left font-normal px-3 py-4"
                                 icon={<CalendarIcon className="h-4 w-4" />}
                               >
@@ -757,13 +757,13 @@ export default function FormPatternsPageLayout() {
                   >
                     <div className="flex gap-2 items-center justify-end">
                       <Button
-                        type="default"
+                        variant="default"
                         icon={<ExternalLink size={14} />}
                         onClick={() => console.log('Action performed')}
                       >
                         View documentation
                       </Button>
-                      <Button type="default" onClick={() => console.log('Reset action')}>
+                      <Button variant="default" onClick={() => console.log('Reset action')}>
                         Reset API key
                       </Button>
                     </div>
@@ -771,11 +771,11 @@ export default function FormPatternsPageLayout() {
                 </CardContent>
                 <CardFooter className="justify-end space-x-2">
                   {form.formState.isDirty && (
-                    <Button type="default" onClick={() => form.reset()}>
+                    <Button variant="default" onClick={() => form.reset()}>
                       Cancel
                     </Button>
                   )}
-                  <Button type="primary" htmlType="submit" disabled={!form.formState.isDirty}>
+                  <Button variant="primary" type="submit" disabled={!form.formState.isDirty}>
                     Save changes
                   </Button>
                 </CardFooter>
diff --git a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
index 6c729295442..99c75e107ec 100644
--- a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
@@ -143,7 +143,7 @@ export default function FormPatternsSidePanel() {
 
   return (
     <>
-      <Button type="primary" onClick={() => setOpen(true)}>
+      <Button variant="primary" onClick={() => setOpen(true)}>
         Open form panel
       </Button>
       <Sheet open={open} onOpenChange={setOpen}>
@@ -325,7 +325,7 @@ export default function FormPatternsSidePanel() {
                           </button>
                           <div className="flex gap-2 items-center">
                             <Button
-                              type="default"
+                              variant="default"
                               size="tiny"
                               icon={<Upload size={14} />}
                               onClick={() => uploadButtonRef.current?.click()}
@@ -334,7 +334,7 @@ export default function FormPatternsSidePanel() {
                             </Button>
                             {logoUrl && (
                               <Button
-                                type="default"
+                                variant="default"
                                 size="tiny"
                                 icon={<Trash size={12} />}
                                 onClick={() => {
@@ -440,7 +440,7 @@ export default function FormPatternsSidePanel() {
                                       {file.name}
                                     </span>
                                     <Button
-                                      type="default"
+                                      variant="default"
                                       size="tiny"
                                       icon={<Trash size={12} />}
                                       onClick={() => {
@@ -676,7 +676,7 @@ export default function FormPatternsSidePanel() {
                         <Popover>
                           <PopoverTrigger asChild>
                             <Button
-                              type="outline"
+                              variant="outline"
                               className="bg-control w-full justify-start text-left font-normal px-3 py-4"
                               icon={<CalendarIcon className="h-4 w-4" />}
                             >
@@ -769,13 +769,13 @@ export default function FormPatternsSidePanel() {
                 >
                   <div className="col-span-6 flex gap-2 items-center">
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<ExternalLink size={14} />}
                       onClick={() => console.log('Action performed')}
                     >
                       View documentation
                     </Button>
-                    <Button type="default" onClick={() => console.log('Reset action')}>
+                    <Button variant="default" onClick={() => console.log('Reset action')}>
                       Reset API key
                     </Button>
                   </div>
@@ -785,7 +785,7 @@ export default function FormPatternsSidePanel() {
           </Form>
           <SheetFooter>
             <Button
-              type="default"
+              variant="default"
               onClick={() => {
                 form.reset()
                 setOpen(false)
@@ -793,7 +793,7 @@ export default function FormPatternsSidePanel() {
             >
               Cancel
             </Button>
-            <Button type="primary" form={formId} htmlType="submit">
+            <Button variant="primary" form={formId} type="submit">
               Create
             </Button>
           </SheetFooter>
diff --git a/apps/design-system/registry/default/example/hover-card-demo.tsx b/apps/design-system/registry/default/example/hover-card-demo.tsx
index 251268b2960..2ed023b6710 100644
--- a/apps/design-system/registry/default/example/hover-card-demo.tsx
+++ b/apps/design-system/registry/default/example/hover-card-demo.tsx
@@ -13,7 +13,7 @@ export default function HoverCardDemo() {
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <Button type="link">@nextjs</Button>
+        <Button variant="link">@nextjs</Button>
       </HoverCardTrigger>
       <HoverCardContent className="w-80">
         <div className="flex justify-between space-x-4">
diff --git a/apps/design-system/registry/default/example/inner-side-menu-empty.tsx b/apps/design-system/registry/default/example/inner-side-menu-empty.tsx
index bf4bf8b2fe8..0dfb4c6d029 100644
--- a/apps/design-system/registry/default/example/inner-side-menu-empty.tsx
+++ b/apps/design-system/registry/default/example/inner-side-menu-empty.tsx
@@ -34,7 +34,7 @@ export default function InnerSideMenuEmpty() {
             description="Create your first serverless function to get started."
             illustration={<div className="text-4xl">🚀</div>}
             actions={
-              <Button type="default" onClick={() => setHasItems(true)}>
+              <Button variant="default" onClick={() => setHasItems(true)}>
                 Create Function
               </Button>
             }
@@ -62,7 +62,7 @@ export default function InnerSideMenuEmpty() {
               </figure>
             }
             actions={
-              <Button type="default" onClick={() => setHasItems(true)}>
+              <Button variant="default" onClick={() => setHasItems(true)}>
                 Create Function
               </Button>
             }
diff --git a/apps/design-system/registry/default/example/input-form.tsx b/apps/design-system/registry/default/example/input-form.tsx
index d0d229600d6..2bb3773c45f 100644
--- a/apps/design-system/registry/default/example/input-form.tsx
+++ b/apps/design-system/registry/default/example/input-form.tsx
@@ -57,7 +57,7 @@ export default function InputForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit" type="secondary">
+        <Button type="submit" variant="secondary">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/input-otp-form.tsx b/apps/design-system/registry/default/example/input-otp-form.tsx
index 8a76ba413b6..41c6cb342b8 100644
--- a/apps/design-system/registry/default/example/input-otp-form.tsx
+++ b/apps/design-system/registry/default/example/input-otp-form.tsx
@@ -71,7 +71,7 @@ export default function InputOTPForm() {
           )}
         />
 
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/apps/design-system/registry/default/example/input-with-button.tsx b/apps/design-system/registry/default/example/input-with-button.tsx
index 739d2f0ea19..d948c6f37ff 100644
--- a/apps/design-system/registry/default/example/input-with-button.tsx
+++ b/apps/design-system/registry/default/example/input-with-button.tsx
@@ -4,7 +4,7 @@ export default function InputWithButton() {
   return (
     <div className="flex w-full max-w-sm items-center space-x-2">
       <Input type="email" placeholder="Email" />
-      <Button htmlType="submit" type="secondary">
+      <Button type="submit" variant="secondary">
         Subscribe
       </Button>
     </div>
diff --git a/apps/design-system/registry/default/example/key-value-field-array-demo.tsx b/apps/design-system/registry/default/example/key-value-field-array-demo.tsx
index ba214ed192d..fa6a99f7015 100644
--- a/apps/design-system/registry/default/example/key-value-field-array-demo.tsx
+++ b/apps/design-system/registry/default/example/key-value-field-array-demo.tsx
@@ -64,7 +64,7 @@ export default function KeyValueFieldArrayDemo() {
         </FormItemLayout>
 
         <div className="mt-4">
-          <Button size="tiny" type="primary" htmlType="submit">
+          <Button size="tiny" variant="primary" type="submit">
             Submit
           </Button>
         </div>
diff --git a/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx b/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx
index 5d1dc8919ef..022667bee56 100644
--- a/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx
+++ b/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx
@@ -12,7 +12,7 @@ export default function KeyboardShortcutDemo() {
       <div className="flex flex-wrap gap-3">
         <Button iconRight={<KeyboardShortcut keys={['Meta', 'S']} variant="inline" />}>Save</Button>
         <Button
-          type="default"
+          variant="default"
           iconRight={<KeyboardShortcut keys={['Meta', 'Enter']} variant="inline" />}
         >
           Run query
diff --git a/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx b/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx
index 61944f8b3cb..22713eafc1e 100644
--- a/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx
+++ b/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx
@@ -6,7 +6,7 @@ export default function KeyboardShortcutInline() {
       <div className="flex flex-wrap gap-3">
         <Button iconRight={<KeyboardShortcut keys={['Meta', 'S']} variant="inline" />}>Save</Button>
         <Button
-          type="default"
+          variant="default"
           iconRight={<KeyboardShortcut keys={['Meta', 'Enter']} variant="inline" />}
         >
           Apply
diff --git a/apps/design-system/registry/default/example/mode-toggle.tsx b/apps/design-system/registry/default/example/mode-toggle.tsx
index 1cd699891d4..c1022386237 100644
--- a/apps/design-system/registry/default/example/mode-toggle.tsx
+++ b/apps/design-system/registry/default/example/mode-toggle.tsx
@@ -17,7 +17,7 @@ export default function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button type="outline" size="small">
+        <Button variant="outline" size="small">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
diff --git a/apps/design-system/registry/default/example/multi-select-badge-limit.tsx b/apps/design-system/registry/default/example/multi-select-badge-limit.tsx
index 7081eb253dc..9ae4e0d6070 100644
--- a/apps/design-system/registry/default/example/multi-select-badge-limit.tsx
+++ b/apps/design-system/registry/default/example/multi-select-badge-limit.tsx
@@ -16,13 +16,18 @@ export default function MultiSelectDemo() {
   return (
     <div className="flex flex-col items-center gap-4">
       <div className="flex items-center gap-2">
-        <Button size="tiny" type="default" onClick={() => setLimit(limit - 1)} disabled={limit < 1}>
+        <Button
+          size="tiny"
+          variant="default"
+          onClick={() => setLimit(limit - 1)}
+          disabled={limit < 1}
+        >
           <Minus size={12} />
         </Button>
         <span className="text-sm text-foreground/90 peer-checked:line-through font-semibold hover:cursor-pointer">
           Limit: {limit}
         </span>
-        <Button size="tiny" type="default" onClick={() => setLimit(limit + 1)}>
+        <Button size="tiny" variant="default" onClick={() => setLimit(limit + 1)}>
           <Plus size={12} />
         </Button>
       </div>
diff --git a/apps/design-system/registry/default/example/navigation-menu-demo.tsx b/apps/design-system/registry/default/example/navigation-menu-demo.tsx
index c36b5c6bd88..66a6fa24fac 100644
--- a/apps/design-system/registry/default/example/navigation-menu-demo.tsx
+++ b/apps/design-system/registry/default/example/navigation-menu-demo.tsx
@@ -57,7 +57,9 @@ export default function NavigationMenuDemo() {
       <NavigationMenu className="w-fit">
         <NavigationMenuList>
           <NavigationMenuItem>
-            <NavigationMenuTrigger className={cn(buttonVariants({ type: 'text', size: 'small' }))}>
+            <NavigationMenuTrigger
+              className={cn(buttonVariants({ variant: 'text', size: 'small' }))}
+            >
               Getting started
             </NavigationMenuTrigger>
             <NavigationMenuContent>
@@ -90,7 +92,9 @@ export default function NavigationMenuDemo() {
             </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <NavigationMenuTrigger className={cn(buttonVariants({ type: 'text', size: 'small' }))}>
+            <NavigationMenuTrigger
+              className={cn(buttonVariants({ variant: 'text', size: 'small' }))}
+            >
               Components
             </NavigationMenuTrigger>
             <NavigationMenuContent>
@@ -106,7 +110,7 @@ export default function NavigationMenuDemo() {
           <NavigationMenuItem>
             <NavigationMenuLink
               href="/docs"
-              className={buttonVariants({ type: 'text', size: 'small' })}
+              className={buttonVariants({ variant: 'text', size: 'small' })}
             >
               Documentation
             </NavigationMenuLink>
diff --git a/apps/design-system/registry/default/example/navigation-menu-responsive.tsx b/apps/design-system/registry/default/example/navigation-menu-responsive.tsx
index b5c4b309fd0..fdd08d09365 100644
--- a/apps/design-system/registry/default/example/navigation-menu-responsive.tsx
+++ b/apps/design-system/registry/default/example/navigation-menu-responsive.tsx
@@ -91,7 +91,9 @@ export default function NavigationMenuDemo() {
             </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <NavigationMenuTrigger className={cn(buttonVariants({ type: 'text', size: 'small' }))}>
+            <NavigationMenuTrigger
+              className={cn(buttonVariants({ variant: 'text', size: 'small' }))}
+            >
               Components
             </NavigationMenuTrigger>
             <NavigationMenuContent>
@@ -105,7 +107,9 @@ export default function NavigationMenuDemo() {
             </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <NavigationMenuTrigger className={cn(buttonVariants({ type: 'text', size: 'small' }))}>
+            <NavigationMenuTrigger
+              className={cn(buttonVariants({ variant: 'text', size: 'small' }))}
+            >
               Components
             </NavigationMenuTrigger>
             <NavigationMenuContent>
@@ -119,7 +123,9 @@ export default function NavigationMenuDemo() {
             </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <NavigationMenuTrigger className={cn(buttonVariants({ type: 'text', size: 'small' }))}>
+            <NavigationMenuTrigger
+              className={cn(buttonVariants({ variant: 'text', size: 'small' }))}
+            >
               Components
             </NavigationMenuTrigger>
             <NavigationMenuContent>
@@ -133,7 +139,9 @@ export default function NavigationMenuDemo() {
             </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <NavigationMenuTrigger className={cn(buttonVariants({ type: 'text', size: 'small' }))}>
+            <NavigationMenuTrigger
+              className={cn(buttonVariants({ variant: 'text', size: 'small' }))}
+            >
               Components
             </NavigationMenuTrigger>
             <NavigationMenuContent>
@@ -149,7 +157,7 @@ export default function NavigationMenuDemo() {
           <NavigationMenuItem>
             <NavigationMenuLink
               href="/docs"
-              className={buttonVariants({ type: 'text', size: 'small' })}
+              className={buttonVariants({ variant: 'text', size: 'small' })}
             >
               Documentation
             </NavigationMenuLink>
diff --git a/apps/design-system/registry/default/example/page-breadcrumbs-demo.tsx b/apps/design-system/registry/default/example/page-breadcrumbs-demo.tsx
index 52f7576f8a4..66d569de0e2 100644
--- a/apps/design-system/registry/default/example/page-breadcrumbs-demo.tsx
+++ b/apps/design-system/registry/default/example/page-breadcrumbs-demo.tsx
@@ -15,7 +15,7 @@ export default function PageBreadcrumbsDemo() {
       <PageBreadcrumbs
         actions={
           <PageBreadcrumbsActions>
-            <Button type="primary" size="tiny">
+            <Button variant="primary" size="tiny">
               Create
             </Button>
           </PageBreadcrumbsActions>
diff --git a/apps/design-system/registry/default/example/page-header-demo.tsx b/apps/design-system/registry/default/example/page-header-demo.tsx
index 2122eec82db..87fc94bcbb8 100644
--- a/apps/design-system/registry/default/example/page-header-demo.tsx
+++ b/apps/design-system/registry/default/example/page-header-demo.tsx
@@ -27,10 +27,10 @@ export default function PageHeaderDemo() {
             </PageHeaderDescription>
           </PageHeaderSummary>
           <PageHeaderAside>
-            <Button type="default" size="small">
+            <Button variant="default" size="small">
               Secondary
             </Button>
-            <Button type="primary" size="small">
+            <Button variant="primary" size="small">
               Deploy Function
             </Button>
           </PageHeaderAside>
diff --git a/apps/design-system/registry/default/example/page-layout-auth-emails.tsx b/apps/design-system/registry/default/example/page-layout-auth-emails.tsx
index 80b4d2ddd2d..34e10c0ec80 100644
--- a/apps/design-system/registry/default/example/page-layout-auth-emails.tsx
+++ b/apps/design-system/registry/default/example/page-layout-auth-emails.tsx
@@ -196,7 +196,7 @@ function TemplatesPage({ onNavigateToSmtp }: { onNavigateToSmtp: () => void }) {
             layout="horizontal"
             className="mb-4"
             actions={
-              <Button type="default" size="tiny" onClick={onNavigateToSmtp}>
+              <Button variant="default" size="tiny" onClick={onNavigateToSmtp}>
                 Set up SMTP
               </Button>
             }
@@ -272,13 +272,13 @@ function TemplatesPage({ onNavigateToSmtp }: { onNavigateToSmtp: () => void }) {
                   })}
                   <CardFooter className="justify-end space-x-2">
                     {notificationsForm.formState.isDirty && (
-                      <Button type="default" onClick={() => notificationsForm.reset()}>
+                      <Button variant="default" onClick={() => notificationsForm.reset()}>
                         Cancel
                       </Button>
                     )}
                     <Button
-                      type="primary"
-                      htmlType="submit"
+                      variant="primary"
+                      type="submit"
                       disabled={!notificationsForm.formState.isDirty}
                     >
                       Save changes
@@ -485,11 +485,11 @@ function SmtpPage() {
 
                   <CardFooter className="justify-end space-x-2">
                     {form.formState.isDirty && (
-                      <Button type="default" onClick={() => form.reset()}>
+                      <Button variant="default" onClick={() => form.reset()}>
                         Cancel
                       </Button>
                     )}
-                    <Button type="primary" htmlType="submit" disabled={!form.formState.isDirty}>
+                    <Button variant="primary" type="submit" disabled={!form.formState.isDirty}>
                       Save changes
                     </Button>
                   </CardFooter>
diff --git a/apps/design-system/registry/default/example/page-layout-detail.tsx b/apps/design-system/registry/default/example/page-layout-detail.tsx
index d00260180b6..da13e6047dc 100644
--- a/apps/design-system/registry/default/example/page-layout-detail.tsx
+++ b/apps/design-system/registry/default/example/page-layout-detail.tsx
@@ -82,7 +82,7 @@ export default function PageLayoutDetail() {
                     <p className="text-sm">March 15, 2024</p>
                   </div>
                   <div className="pt-2">
-                    <Button type="default" size="small">
+                    <Button variant="default" size="small">
                       Change Plan
                     </Button>
                   </div>
@@ -114,7 +114,7 @@ export default function PageLayoutDetail() {
                     <p className="text-sm">$234.50</p>
                   </div>
                   <div className="pt-2">
-                    <Button type="default" size="small">
+                    <Button variant="default" size="small">
                       Configure Limits
                     </Button>
                   </div>
@@ -146,7 +146,7 @@ export default function PageLayoutDetail() {
                     <p className="text-sm">12/2025</p>
                   </div>
                   <div className="pt-2">
-                    <Button type="default" size="small">
+                    <Button variant="default" size="small">
                       Update Payment Method
                     </Button>
                   </div>
diff --git a/apps/design-system/registry/default/example/page-layout-edge-function.tsx b/apps/design-system/registry/default/example/page-layout-edge-function.tsx
index 7920f39bb51..1a9aeeaa5bc 100644
--- a/apps/design-system/registry/default/example/page-layout-edge-function.tsx
+++ b/apps/design-system/registry/default/example/page-layout-edge-function.tsx
@@ -234,10 +234,10 @@ export default function PageLayoutEdgeFunction() {
       <PageBreadcrumbs
         actions={
           <PageBreadcrumbsActions>
-            <Button type="default" size="tiny">
+            <Button variant="default" size="tiny">
               Test
             </Button>
-            <Button type="primary" size="tiny">
+            <Button variant="primary" size="tiny">
               Deploy
             </Button>
           </PageBreadcrumbsActions>
@@ -394,7 +394,7 @@ function OverviewPage() {
                   {CHART_INTERVALS.map((item, index) => (
                     <Button
                       key={item.key}
-                      type={interval === item.key ? 'secondary' : 'default'}
+                      variant={interval === item.key ? 'secondary' : 'default'}
                       onClick={() => setInterval(item.key)}
                       className={getSegmentedButtonClassName(index, CHART_INTERVALS.length)}
                     >
@@ -425,7 +425,7 @@ function OverviewPage() {
               <PageSectionTitle>Errors since last deploy</PageSectionTitle>
             </PageSectionSummary>
             <PageSectionAside>
-              <Button type="default" size="tiny" icon={<ExternalLink size={14} />}>
+              <Button variant="default" size="tiny" icon={<ExternalLink size={14} />}>
                 View logs
               </Button>
             </PageSectionAside>
@@ -703,7 +703,7 @@ function CodePage() {
             <h3 className="text-sm font-normal font-mono uppercase text-lighter tracking-wide">
               Files
             </h3>
-            <Button size="tiny" type="default" icon={<Plus size={14} />} onClick={addNewFile}>
+            <Button size="tiny" variant="default" icon={<Plus size={14} />} onClick={addNewFile}>
               Add File
             </Button>
           </div>
@@ -735,7 +735,7 @@ function CodePage() {
 
       <div className="flex shrink-0 items-center justify-end border-t bg-surface-100 p-4">
         <Button
-          type="primary"
+          variant="primary"
           size="medium"
           iconRight={<CornerDownLeft size={10} strokeWidth={1.5} />}
         >
diff --git a/apps/design-system/registry/default/example/page-layout-full-width.tsx b/apps/design-system/registry/default/example/page-layout-full-width.tsx
index b760dce7a5f..bc917a05cea 100644
--- a/apps/design-system/registry/default/example/page-layout-full-width.tsx
+++ b/apps/design-system/registry/default/example/page-layout-full-width.tsx
@@ -20,7 +20,7 @@ export default function PageLayoutFullWidth() {
       <PageBreadcrumbs
         actions={
           <PageBreadcrumbsActions>
-            <Button type="default" size="tiny">
+            <Button variant="default" size="tiny">
               Docs
             </Button>
           </PageBreadcrumbsActions>
diff --git a/apps/design-system/registry/default/example/page-layout-list-simple.tsx b/apps/design-system/registry/default/example/page-layout-list-simple.tsx
index 766d91201d9..5c9766ed78e 100644
--- a/apps/design-system/registry/default/example/page-layout-list-simple.tsx
+++ b/apps/design-system/registry/default/example/page-layout-list-simple.tsx
@@ -63,7 +63,7 @@ export default function PageLayoutListSimple() {
             </PageHeaderDescription>
           </PageHeaderSummary>
           <PageHeaderAside>
-            <Button type="primary" size="small">
+            <Button variant="primary" size="small">
               Create Project
             </Button>
           </PageHeaderAside>
@@ -92,7 +92,7 @@ export default function PageLayoutListSimple() {
                       <TableCell className="text-right">
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                            <Button type="text" size="small">
+                            <Button variant="text" size="small">
                               Actions
                             </Button>
                           </DropdownMenuTrigger>
diff --git a/apps/design-system/registry/default/example/page-layout-list.tsx b/apps/design-system/registry/default/example/page-layout-list.tsx
index 12315fdc206..225c0428bcc 100644
--- a/apps/design-system/registry/default/example/page-layout-list.tsx
+++ b/apps/design-system/registry/default/example/page-layout-list.tsx
@@ -102,7 +102,7 @@ export default function PageLayoutList() {
                     </InputGroupAddon>
                   </InputGroup>
                 </div>
-                <Button type="primary">Create a new function</Button>
+                <Button variant="primary">Create a new function</Button>
               </div>
 
               <Card>
@@ -126,7 +126,7 @@ export default function PageLayoutList() {
                         <TableCell>
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                              <Button type="text" size="small">
+                              <Button variant="text" size="small">
                                 Actions
                               </Button>
                             </DropdownMenuTrigger>
diff --git a/apps/design-system/registry/default/example/page-layout-logs-content.tsx b/apps/design-system/registry/default/example/page-layout-logs-content.tsx
index c97b4eebeec..6826cb565fc 100644
--- a/apps/design-system/registry/default/example/page-layout-logs-content.tsx
+++ b/apps/design-system/registry/default/example/page-layout-logs-content.tsx
@@ -118,10 +118,10 @@ export function PageLayoutLogsContent() {
           />
         </div>
         <div className="flex shrink-0 items-center gap-2">
-          <Button type="default" size="tiny">
+          <Button variant="default" size="tiny">
             Live
           </Button>
-          <Button type="default" size="tiny">
+          <Button variant="default" size="tiny">
             Refresh
           </Button>
         </div>
diff --git a/apps/design-system/registry/default/example/page-layout-settings.tsx b/apps/design-system/registry/default/example/page-layout-settings.tsx
index f31f82337ba..85fb5a8d518 100644
--- a/apps/design-system/registry/default/example/page-layout-settings.tsx
+++ b/apps/design-system/registry/default/example/page-layout-settings.tsx
@@ -161,13 +161,13 @@ export default function PageLayoutSettings() {
                   </CardContent>
                   <CardFooter className="justify-end space-x-2">
                     {refreshTokenForm.formState.isDirty && (
-                      <Button type="default" onClick={() => refreshTokenForm.reset()}>
+                      <Button variant="default" onClick={() => refreshTokenForm.reset()}>
                         Cancel
                       </Button>
                     )}
                     <Button
-                      type="primary"
-                      htmlType="submit"
+                      variant="primary"
+                      type="submit"
                       disabled={!refreshTokenForm.formState.isDirty}
                     >
                       Save changes
@@ -266,13 +266,13 @@ export default function PageLayoutSettings() {
 
                   <CardFooter className="justify-end space-x-2">
                     {userSessionsForm.formState.isDirty && (
-                      <Button type="default" onClick={() => userSessionsForm.reset()}>
+                      <Button variant="default" onClick={() => userSessionsForm.reset()}>
                         Cancel
                       </Button>
                     )}
                     <Button
-                      type="primary"
-                      htmlType="submit"
+                      variant="primary"
+                      type="submit"
                       disabled={!userSessionsForm.formState.isDirty}
                     >
                       Save changes
diff --git a/apps/design-system/registry/default/example/page-section-demo.tsx b/apps/design-system/registry/default/example/page-section-demo.tsx
index ec9e9a71a22..f5061c80af7 100644
--- a/apps/design-system/registry/default/example/page-section-demo.tsx
+++ b/apps/design-system/registry/default/example/page-section-demo.tsx
@@ -21,7 +21,7 @@ export default function PageSectionDemo() {
             </PageSectionDescription>
           </PageSectionSummary>
           <PageSectionAside>
-            <Button type="default" size="small">
+            <Button variant="default" size="small">
               Action
             </Button>
           </PageSectionAside>
diff --git a/apps/design-system/registry/default/example/page-section-with-aside.tsx b/apps/design-system/registry/default/example/page-section-with-aside.tsx
index 98e32f8ac9c..bd6ae3f60e7 100644
--- a/apps/design-system/registry/default/example/page-section-with-aside.tsx
+++ b/apps/design-system/registry/default/example/page-section-with-aside.tsx
@@ -21,10 +21,10 @@ export default function PageSectionWithAside() {
             </PageSectionDescription>
           </PageSectionSummary>
           <PageSectionAside>
-            <Button type="default" size="small">
+            <Button variant="default" size="small">
               Secondary
             </Button>
-            <Button type="primary" size="small">
+            <Button variant="primary" size="small">
               Primary Action
             </Button>
           </PageSectionAside>
diff --git a/apps/design-system/registry/default/example/popover-demo.tsx b/apps/design-system/registry/default/example/popover-demo.tsx
index 97ef6f8b486..6495d03a289 100644
--- a/apps/design-system/registry/default/example/popover-demo.tsx
+++ b/apps/design-system/registry/default/example/popover-demo.tsx
@@ -4,7 +4,7 @@ export default function PopoverDemo() {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button type="outline">Open popover</Button>
+        <Button variant="outline">Open popover</Button>
       </PopoverTrigger>
       <PopoverContent className="w-80">
         <div className="grid gap-4">
diff --git a/apps/design-system/registry/default/example/radio-group-card-form.tsx b/apps/design-system/registry/default/example/radio-group-card-form.tsx
index 1987aaca024..c873f87056f 100644
--- a/apps/design-system/registry/default/example/radio-group-card-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-card-form.tsx
@@ -74,7 +74,7 @@ export default function RadioGroupForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit" type="secondary" size="small">
+        <Button type="submit" variant="secondary" size="small">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/radio-group-form.tsx b/apps/design-system/registry/default/example/radio-group-form.tsx
index aa9368758ab..edd035db328 100644
--- a/apps/design-system/registry/default/example/radio-group-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-form.tsx
@@ -76,7 +76,7 @@ export default function RadioGroupForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
index ef1a4df1cf2..bda3ef3925c 100644
--- a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
@@ -73,7 +73,7 @@ export default function RadioGroupForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit" type="secondary" size="small">
+        <Button type="submit" variant="secondary" size="small">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/select-form.tsx b/apps/design-system/registry/default/example/select-form.tsx
index c8089a74c3e..5fba20bbe34 100644
--- a/apps/design-system/registry/default/example/select-form.tsx
+++ b/apps/design-system/registry/default/example/select-form.tsx
@@ -73,7 +73,7 @@ export default function SelectForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit" type="secondary">
+        <Button type="submit" variant="secondary">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx b/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx
index 4270ad97ffb..d7a4aa06e3c 100644
--- a/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx
+++ b/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx
@@ -168,7 +168,7 @@ export default function SheetConfirmOnCloseDemo() {
 
   return (
     <>
-      <Button type="default" onClick={openSheet}>
+      <Button variant="default" onClick={openSheet}>
         Open endpoint sheet
       </Button>
 
@@ -210,7 +210,7 @@ export default function SheetConfirmOnCloseDemo() {
           </SheetSection>
           <Separator />
           <SheetFooter>
-            <Button type="default" onClick={confirmOnClose}>
+            <Button variant="default" onClick={confirmOnClose}>
               Cancel
             </Button>
             <Button onClick={saveChanges} disabled={!isDirty}>
diff --git a/apps/design-system/registry/default/example/sheet-demo.tsx b/apps/design-system/registry/default/example/sheet-demo.tsx
index bef18a2711f..5b9a1ce0eb5 100644
--- a/apps/design-system/registry/default/example/sheet-demo.tsx
+++ b/apps/design-system/registry/default/example/sheet-demo.tsx
@@ -17,7 +17,7 @@ export default function SheetDemo() {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button type="outline">Show Sheet</Button>
+        <Button variant="outline">Show Sheet</Button>
       </SheetTrigger>
       <SheetContent className="flex flex-col gap-0">
         <SheetHeader>
@@ -44,7 +44,7 @@ export default function SheetDemo() {
         </div>
         <SheetFooter>
           <SheetClose asChild>
-            <Button type="primary">Save changes</Button>
+            <Button variant="primary">Save changes</Button>
           </SheetClose>
         </SheetFooter>
       </SheetContent>
diff --git a/apps/design-system/registry/default/example/sheet-nonmodal.tsx b/apps/design-system/registry/default/example/sheet-nonmodal.tsx
index 203b68fe4bc..fb0bbf2871e 100644
--- a/apps/design-system/registry/default/example/sheet-nonmodal.tsx
+++ b/apps/design-system/registry/default/example/sheet-nonmodal.tsx
@@ -14,7 +14,7 @@ export default function SheetNonmodal() {
   return (
     <Sheet modal={false}>
       <SheetTrigger asChild>
-        <Button type="outline">Show Sheet</Button>
+        <Button variant="outline">Show Sheet</Button>
       </SheetTrigger>
       <SheetContent className="flex flex-col gap-0">
         <SheetHeader>
@@ -29,7 +29,7 @@ export default function SheetNonmodal() {
         </div>
         <SheetFooter>
           <SheetClose asChild>
-            <Button type="outline">Close</Button>
+            <Button variant="outline">Close</Button>
           </SheetClose>
         </SheetFooter>
       </SheetContent>
diff --git a/apps/design-system/registry/default/example/sheet-side.tsx b/apps/design-system/registry/default/example/sheet-side.tsx
index aee3e308180..85011f61b49 100644
--- a/apps/design-system/registry/default/example/sheet-side.tsx
+++ b/apps/design-system/registry/default/example/sheet-side.tsx
@@ -24,7 +24,7 @@ export default function SheetSide() {
       {SHEET_SIDES.map((side) => (
         <Sheet key={side}>
           <SheetTrigger asChild>
-            <Button type="outline">From {side}</Button>
+            <Button variant="outline">From {side}</Button>
           </SheetTrigger>
           <SheetContent side={side}>
             <SheetHeader>
@@ -49,7 +49,7 @@ export default function SheetSide() {
             </div>
             <SheetFooter>
               <SheetClose asChild>
-                <Button htmlType="submit" type="secondary">
+                <Button type="submit" variant="secondary">
                   Save changes
                 </Button>
               </SheetClose>
diff --git a/apps/design-system/registry/default/example/single-value-field-array-demo.tsx b/apps/design-system/registry/default/example/single-value-field-array-demo.tsx
index 9c30dc9dbf7..fa7c94c5339 100644
--- a/apps/design-system/registry/default/example/single-value-field-array-demo.tsx
+++ b/apps/design-system/registry/default/example/single-value-field-array-demo.tsx
@@ -45,7 +45,7 @@ export default function SingleValueFieldArrayDemo() {
         </FormItemLayout>
 
         <div className="mt-4">
-          <Button size="tiny" type="primary" htmlType="submit">
+          <Button size="tiny" variant="primary" type="submit">
             Submit
           </Button>
         </div>
diff --git a/apps/design-system/registry/default/example/sonner-demo.tsx b/apps/design-system/registry/default/example/sonner-demo.tsx
index d2687e6071e..60df9fe7902 100644
--- a/apps/design-system/registry/default/example/sonner-demo.tsx
+++ b/apps/design-system/registry/default/example/sonner-demo.tsx
@@ -4,7 +4,7 @@ import { Button } from 'ui'
 export default function SonnerDemo() {
   return (
     <Button
-      type="default"
+      variant="default"
       onClick={() =>
         toast('Event has been created', {
           description: 'Sunday, December 03, 2023 at 9:00 AM',
diff --git a/apps/design-system/registry/default/example/sonner-types.tsx b/apps/design-system/registry/default/example/sonner-types.tsx
index 0fc1212baee..90720d275b9 100644
--- a/apps/design-system/registry/default/example/sonner-types.tsx
+++ b/apps/design-system/registry/default/example/sonner-types.tsx
@@ -7,11 +7,11 @@ export default function SonnerDemo() {
 
   return (
     <div className="flex gap-1">
-      <Button type="default" onClick={() => toast('Event has been created')}>
+      <Button variant="default" onClick={() => toast('Event has been created')}>
         Default
       </Button>
       <Button
-        type="default"
+        variant="default"
         onClick={() =>
           toast.message('Event has been created', {
             description: 'Monday, January 3rd at 6:00pm',
@@ -21,7 +21,7 @@ export default function SonnerDemo() {
         description
       </Button>
       <Button
-        type="default"
+        variant="default"
         onClick={() =>
           toast.success('Event has been created', {
             description: 'Sunday, December 03, 2023 at 9:00 AM',
@@ -30,26 +30,26 @@ export default function SonnerDemo() {
       >
         Success
       </Button>
-      <Button type="default" onClick={() => toast.success('Event has been created')}>
+      <Button variant="default" onClick={() => toast.success('Event has been created')}>
         Show Toast
       </Button>
       <Button
-        type="default"
+        variant="default"
         onClick={() => toast.info('Be at the area 10 minutes before the event time')}
       >
         Info
       </Button>
       <Button
-        type="warning"
+        variant="warning"
         onClick={() => toast.warning('Event start time cannot be earlier than 8am')}
       >
         Warning
       </Button>
-      <Button type="danger" onClick={() => toast.error('Event has not been created')}>
+      <Button variant="danger" onClick={() => toast.error('Event has not been created')}>
         Error
       </Button>
       <Button
-        type="primary"
+        variant="primary"
         onClick={() =>
           toast('Event has been created', {
             action: {
@@ -61,11 +61,11 @@ export default function SonnerDemo() {
       >
         Action
       </Button>
-      <Button type="default" onClick={() => toast.loading('Event has been created')}>
+      <Button variant="default" onClick={() => toast.loading('Event has been created')}>
         Loading
       </Button>
       <Button
-        type="default"
+        variant="default"
         onClick={() =>
           toast.promise(promise, {
             loading: 'Loading...',
@@ -80,12 +80,12 @@ export default function SonnerDemo() {
         Promise
       </Button>
       <Button
-        type="default"
+        variant="default"
         onClick={() =>
           toast(
             <>
               <div>A custom toast with default styling</div>
-              <Button type="default">Hello world</Button>
+              <Button variant="default">Hello world</Button>
             </>
           )
         }
diff --git a/apps/design-system/registry/default/example/sonner-upload.tsx b/apps/design-system/registry/default/example/sonner-upload.tsx
index 5d2fcc38b1b..6ccffee9a3b 100644
--- a/apps/design-system/registry/default/example/sonner-upload.tsx
+++ b/apps/design-system/registry/default/example/sonner-upload.tsx
@@ -60,7 +60,7 @@ export default function SonnerUpload() {
   return (
     <div className="flex flex-col gap-3">
       <Button
-        type="default"
+        variant="default"
         onClick={async () => {
           // random id
           const toastId = Math.random()
diff --git a/apps/design-system/registry/default/example/switch-form.tsx b/apps/design-system/registry/default/example/switch-form.tsx
index f0b4a29b0a7..172b5c1f76f 100644
--- a/apps/design-system/registry/default/example/switch-form.tsx
+++ b/apps/design-system/registry/default/example/switch-form.tsx
@@ -83,7 +83,7 @@ export default function SwitchForm() {
             />
           </div>
         </div>
-        <Button htmlType="submit" type="alternative">
+        <Button type="submit" variant="alternative">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/table-actions.tsx b/apps/design-system/registry/default/example/table-actions.tsx
index 3c59609353a..679cfb7cb7d 100644
--- a/apps/design-system/registry/default/example/table-actions.tsx
+++ b/apps/design-system/registry/default/example/table-actions.tsx
@@ -54,13 +54,13 @@ export default function TableActions() {
               <TableCell>{user.name}</TableCell>
               <TableCell className="text-foreground-lighter">{user.email}</TableCell>
               <TableCell className="flex items-center gap-x-2">
-                <Button type="default" size="tiny" className="hit-area-2">
+                <Button variant="default" size="tiny" className="hit-area-2">
                   Inspect
                 </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<EllipsisVertical />}
                       aria-label="More actions"
                       className="w-7 hit-area-2"
diff --git a/apps/design-system/registry/default/example/table-cross-link.tsx b/apps/design-system/registry/default/example/table-cross-link.tsx
index d50db827a93..211641d80bc 100644
--- a/apps/design-system/registry/default/example/table-cross-link.tsx
+++ b/apps/design-system/registry/default/example/table-cross-link.tsx
@@ -84,13 +84,13 @@ export default function TableCrossLink() {
                 </Link>
               </TableCell>
               <TableCell className="flex items-center gap-x-2">
-                <Button type="default" size="tiny" icon={<Edit2 />} className="hit-area-2">
+                <Button variant="default" size="tiny" icon={<Edit2 />} className="hit-area-2">
                   Edit
                 </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<EllipsisVertical />}
                       aria-label="More actions"
                       className="w-7 hit-area-2"
diff --git a/apps/design-system/registry/default/example/table-row-link-actions.tsx b/apps/design-system/registry/default/example/table-row-link-actions.tsx
index a66611974c7..7e744df1b89 100644
--- a/apps/design-system/registry/default/example/table-row-link-actions.tsx
+++ b/apps/design-system/registry/default/example/table-row-link-actions.tsx
@@ -103,7 +103,7 @@ export default function TableRowLinkActions() {
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button
-                        type="default"
+                        variant="default"
                         icon={<EllipsisVertical />}
                         aria-label="More actions"
                         className="w-7 hit-area-2"
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
index 09292b5bfa0..5218106f9f2 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
@@ -10,7 +10,7 @@ export default function TextConfirmDialogDemo() {
 
   return (
     <>
-      <Button type="danger" onClick={() => setVisible(true)}>
+      <Button variant="danger" onClick={() => setVisible(true)}>
         Show Text Confirm Dialog
       </Button>
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
index e61c211dbcd..cea3f602613 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
@@ -24,7 +24,7 @@ const TextConfirmModalWithCancelButton = () => {
 
   return (
     <>
-      <Button type="danger" onClick={onVisibleChange}>
+      <Button variant="danger" onClick={onVisibleChange}>
         Show Text Confirm Dialog
       </Button>
       <TextConfirmModal
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
index d4d8e644ae5..4116ddb75fd 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
@@ -25,7 +25,7 @@ const TextConfirmModalWithChildren = () => {
 
   return (
     <>
-      <Button type="danger" onClick={onVisibleChange}>
+      <Button variant="danger" onClick={onVisibleChange}>
         Show Text Confirm Dialog
       </Button>
       <TextConfirmModal
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
index 54603c6234a..6daabb31159 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
@@ -24,7 +24,7 @@ const TextConfirmModalWithSize = () => {
 
   return (
     <>
-      <Button type="danger" onClick={onVisibleChange}>
+      <Button variant="danger" onClick={onVisibleChange}>
         Show Text Confirm Dialog
       </Button>
       <TextConfirmModal
diff --git a/apps/design-system/registry/default/example/textarea-form.tsx b/apps/design-system/registry/default/example/textarea-form.tsx
index 6f2510aed44..56c59f50332 100644
--- a/apps/design-system/registry/default/example/textarea-form.tsx
+++ b/apps/design-system/registry/default/example/textarea-form.tsx
@@ -65,7 +65,7 @@ export default function TextareaForm() {
             </FormItem>
           )}
         />
-        <Button htmlType="submit" type="alternative">
+        <Button type="submit" variant="alternative">
           Submit
         </Button>
       </form>
diff --git a/apps/design-system/registry/default/example/tooltip-demo.tsx b/apps/design-system/registry/default/example/tooltip-demo.tsx
index f347278c438..d6abaf36db2 100644
--- a/apps/design-system/registry/default/example/tooltip-demo.tsx
+++ b/apps/design-system/registry/default/example/tooltip-demo.tsx
@@ -5,7 +5,7 @@ export default function TooltipDemo() {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button type="outline">Hover</Button>
+          <Button variant="outline">Hover</Button>
         </TooltipTrigger>
         <TooltipContent>
           <p>Add to library</p>
diff --git a/apps/docs/app/error.tsx b/apps/docs/app/error.tsx
index 088bd8ee81d..716873821f0 100644
--- a/apps/docs/app/error.tsx
+++ b/apps/docs/app/error.tsx
@@ -16,10 +16,10 @@ const ErrorPage = ({ error }) => {
         Sorry, something went wrong
       </span>
       <div className="flex flex-row items-center gap-4">
-        <Button asChild type="secondary" className="w-fit p-4 text-lg">
+        <Button asChild variant="secondary" className="w-fit p-4 text-lg">
           <Link href="/">Return to homepage</Link>
         </Button>
-        <Button type="secondary" className="w-fit p-4 text-lg" onClick={() => location.reload()}>
+        <Button variant="secondary" className="w-fit p-4 text-lg" onClick={() => location.reload()}>
           Refresh page
         </Button>
       </div>
diff --git a/apps/docs/app/not-found.tsx b/apps/docs/app/not-found.tsx
index 14606cd8c1e..0df7cfa32b2 100644
--- a/apps/docs/app/not-found.tsx
+++ b/apps/docs/app/not-found.tsx
@@ -1,11 +1,9 @@
-import { type Metadata } from 'next'
-import Link from 'next/link'
-
-import { Button } from 'ui'
-
 import { Recommendations, SearchButton } from '~/features/recommendations/NotFound.client'
 import { LayoutMainContent } from '~/layouts/DefaultLayout'
 import { SidebarSkeleton } from '~/layouts/MainSkeleton'
+import { type Metadata } from 'next'
+import Link from 'next/link'
+import { Button } from 'ui'
 
 export default function NotFound() {
   return (
@@ -19,12 +17,12 @@ export default function NotFound() {
           </p>
           <div className="flex flex-wrap gap-4 pt-4">
             <SearchButton />
-            <Button type="default" size="small" className="p-4" asChild>
+            <Button variant="default" size="small" className="p-4" asChild>
               <Link href="/" className="no-underline">
                 Return to homepage
               </Link>
             </Button>
-            <Button type="text" size="small" asChild>
+            <Button variant="text" size="small" asChild>
               <Link
                 href="https://github.com/supabase/supabase/issues/new?assignees=&labels=documentation&projects=&template=2.Improve_docs.md"
                 target="_blank"
diff --git a/apps/docs/components/Breadcrumbs.tsx b/apps/docs/components/Breadcrumbs.tsx
index e8684cbe5f0..11d330664f6 100644
--- a/apps/docs/components/Breadcrumbs.tsx
+++ b/apps/docs/components/Breadcrumbs.tsx
@@ -118,7 +118,7 @@ const BreadcrumbsInternal = ({
                     </div>
                     <DrawerFooter className="pt-4">
                       <DrawerClose asChild>
-                        <Button type="outline">Close</Button>
+                        <Button variant="outline">Close</Button>
                       </DrawerClose>
                     </DrawerFooter>
                   </DrawerContent>
diff --git a/apps/docs/components/Feedback/Feedback.tsx b/apps/docs/components/Feedback/Feedback.tsx
index d62a9f0f475..ba4afd00ace 100644
--- a/apps/docs/components/Feedback/Feedback.tsx
+++ b/apps/docs/components/Feedback/Feedback.tsx
@@ -152,7 +152,7 @@ function Feedback({ className }: { className?: string }) {
           className="relative flex gap-2 items-center"
         >
           <Button
-            type="outline"
+            variant="outline"
             rounded
             className={cn(
               'px-1 w-7 h-7',
@@ -171,7 +171,7 @@ function Feedback({ className }: { className?: string }) {
             <span className="sr-only">No</span>
           </Button>
           <Button
-            type="outline"
+            variant="outline"
             rounded
             className={cn(
               'px-1 w-7 h-7',
diff --git a/apps/docs/components/Feedback/FeedbackModal.tsx b/apps/docs/components/Feedback/FeedbackModal.tsx
index 8022817fb61..271edf329cc 100644
--- a/apps/docs/components/Feedback/FeedbackModal.tsx
+++ b/apps/docs/components/Feedback/FeedbackModal.tsx
@@ -106,10 +106,10 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps
         </Form>
         <DialogFooter>
           <div className="flex items-center justify-end gap-2">
-            <Button htmlType="reset" type="default" onClick={handleCancel} disabled={isSubmitting}>
+            <Button type="reset" variant="default" onClick={handleCancel} disabled={isSubmitting}>
               Cancel
             </Button>
-            <Button htmlType="submit" form={formId} loading={isSubmitting} disabled={isSubmitting}>
+            <Button type="submit" form={formId} loading={isSubmitting} disabled={isSubmitting}>
               Submit feedback
             </Button>
           </div>
diff --git a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
index 82a6bf3a196..7c9fb2c367a 100644
--- a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
@@ -162,7 +162,7 @@ const GlobalMobileMenu = ({ open, setOpen }: Props) => {
                     </Button>
                   ) : (
                     <>
-                      <Button block size="medium" type="default" asChild>
+                      <Button block size="medium" variant="default" asChild>
                         <Link href="https://supabase.com/dashboard/sign-in">Sign in</Link>
                       </Button>
                       <Button block size="medium" asChild>
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
index ed7537aab81..7c2101cd27b 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
@@ -57,7 +57,7 @@ const TopNavBar: FC = () => {
               <button
                 title="Menu dropdown button"
                 className={cn(
-                  buttonVariants({ type: 'default' }),
+                  buttonVariants({ variant: 'default' }),
                   'flex lg:hidden border-default bg-surface-100/75 text-foreground-light rounded-md min-w-[30px] w-[30px] h-[30px] data-open:bg-overlay-hover/30'
                 )}
                 onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
@@ -99,7 +99,7 @@ const HeaderLogo = memo(() => {
     <Link
       href="/"
       className={cn(
-        buttonVariants({ type: 'default' }),
+        buttonVariants({ variant: 'default' }),
         'flex shrink-0 items-center w-fit bg-transparent! border-none! shadow-none!'
       )}
     >
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavDropdown.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavDropdown.tsx
index a9e8b09f61a..530c8820949 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavDropdown.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavDropdown.tsx
@@ -1,10 +1,13 @@
 'use client'
 
-import React, { Fragment } from 'react'
-import Link from 'next/link'
-import { useTheme } from 'next-themes'
+import { isFeatureEnabled } from 'common'
 import { Menu } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import Link from 'next/link'
+import React, { Fragment } from 'react'
 import {
+  buttonVariants,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
@@ -15,12 +18,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Theme,
-  buttonVariants,
-  cn,
   themes,
 } from 'ui'
+
 import MenuIconPicker from './MenuIconPicker'
-import { isFeatureEnabled } from 'common'
 
 const menu = [
   [
@@ -69,7 +70,7 @@ const TopNavDropdown = () => {
         <button
           title="Menu dropdown button"
           className={cn(
-            buttonVariants({ type: 'default' }),
+            buttonVariants({ variant: 'default' }),
             'text-foreground-light border-default w-[30px] min-w-[30px] h-[30px] data-open:bg-overlay-hover/30 hover:border-strong data-open:border-stronger hover:bg-overlay-hover/50! bg-transparent'
           )}
         >
diff --git a/apps/docs/components/RealtimeLimitsEstimator/RealtimeLimitsEstimator.tsx b/apps/docs/components/RealtimeLimitsEstimator/RealtimeLimitsEstimator.tsx
index cef1f172a2b..e1a3659de8e 100644
--- a/apps/docs/components/RealtimeLimitsEstimator/RealtimeLimitsEstimator.tsx
+++ b/apps/docs/components/RealtimeLimitsEstimator/RealtimeLimitsEstimator.tsx
@@ -154,7 +154,7 @@ export default function RealtimeLimitsEstimater({}) {
           <div className="py-1 flex items-center">
             <p className="text-sm">View raw throughput table</p>
             <Button
-              type="text"
+              variant="text"
               icon={
                 <ChevronDown
                   size={18}
diff --git a/apps/docs/content/_partials/uiLibCta.mdx b/apps/docs/content/_partials/uiLibCta.mdx
index befedb97925..8973997dfc9 100644
--- a/apps/docs/content/_partials/uiLibCta.mdx
+++ b/apps/docs/content/_partials/uiLibCta.mdx
@@ -2,7 +2,7 @@
 
 UI components built on shadcn/ui that connect to Supabase via a single command.
 
-<Button type="primary" asChild>
+<Button variant="primary" asChild>
   <a href="https://supabase.com/ui">Explore Components</a>
 </Button>
 
diff --git a/apps/docs/features/recommendations/NotFound.client.tsx b/apps/docs/features/recommendations/NotFound.client.tsx
index aa63e278fc2..b418fb2128b 100644
--- a/apps/docs/features/recommendations/NotFound.client.tsx
+++ b/apps/docs/features/recommendations/NotFound.client.tsx
@@ -14,7 +14,7 @@ function SearchButton() {
   const setCommandMenuOpen = useSetCommandMenuOpen()
 
   return (
-    <Button type="primary" size="small" onClick={() => setCommandMenuOpen(true)}>
+    <Button variant="primary" size="small" onClick={() => setCommandMenuOpen(true)}>
       Search for page
     </Button>
   )
diff --git a/apps/docs/features/ui/InfoTooltip.tsx b/apps/docs/features/ui/InfoTooltip.tsx
index d604a0047b1..84cd2767d05 100644
--- a/apps/docs/features/ui/InfoTooltip.tsx
+++ b/apps/docs/features/ui/InfoTooltip.tsx
@@ -111,7 +111,7 @@ const InfoTooltip = ({
                   <InfoIcon className="p-px min-w-4 min-h-4 text-foreground-lighter" />
                   <p className="italic text-foreground-light truncate">{children}</p>
                 </div>
-                <Button type="text" onClick={() => setMobileSheetOpen(false)} className="px-1">
+                <Button variant="text" onClick={() => setMobileSheetOpen(false)} className="px-1">
                   <XIcon className="w-4 h-4 text-foreground-lighter" />
                 </Button>
               </SheetHeader>
diff --git a/apps/docs/features/ui/McpConfigPanel.tsx b/apps/docs/features/ui/McpConfigPanel.tsx
index ec2cd3c752f..d8823dc2bc3 100644
--- a/apps/docs/features/ui/McpConfigPanel.tsx
+++ b/apps/docs/features/ui/McpConfigPanel.tsx
@@ -104,7 +104,7 @@ function ProjectSelector({
         </span>
 
         {!isUserLoading && !isLoggedIn ? (
-          <Button size="small" type="default" className="gap-0 rounded-l-none" asChild>
+          <Button size="small" variant="default" className="gap-0 rounded-l-none" asChild>
             <Link href="https://supabase.com/dashboard" rel="noreferrer noopener" target="_blank">
               <div className="flex items-center gap-2">Log in to choose a project</div>
             </Link>
@@ -113,7 +113,7 @@ function ProjectSelector({
           <PopoverTrigger asChild disabled={isUserLoading || isLoading || isError}>
             <Button
               size="small"
-              type="default"
+              variant="default"
               className="gap-0 rounded-l-none"
               iconRight={
                 <ChevronDown
@@ -214,7 +214,7 @@ function PlatformSelector({
         <PopoverTrigger asChild>
           <Button
             size="small"
-            type="default"
+            variant="default"
             className="gap-0 rounded-l-none"
             iconRight={
               <ChevronDown
diff --git a/apps/learn/app/(app)/page.tsx b/apps/learn/app/(app)/page.tsx
index ad096eaaa0e..27cafc41a0e 100644
--- a/apps/learn/app/(app)/page.tsx
+++ b/apps/learn/app/(app)/page.tsx
@@ -114,7 +114,7 @@ export default function Home() {
                                       {course.chapters} chapters
                                     </span>
                                   </div>
-                                  <Button type="text" size="small" asChild>
+                                  <Button variant="text" size="small" asChild>
                                     <Link href="/...">Start course ➔</Link>
                                   </Button>
                                 </div>
diff --git a/apps/learn/components/command-menu.tsx b/apps/learn/components/command-menu.tsx
index 75f055f9a8f..597f5a00fce 100644
--- a/apps/learn/components/command-menu.tsx
+++ b/apps/learn/components/command-menu.tsx
@@ -53,7 +53,7 @@ export function CommandMenu({ ...props }: DialogProps) {
   return (
     <>
       <Button
-        type="outline"
+        variant="outline"
         className={cn(
           `relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-foreground-muted shadow-none sm:pr-12
             hover:border-foreground-muted hover:bg-surface-100 hover:text-foreground-lighter
diff --git a/apps/learn/components/copy-button.tsx b/apps/learn/components/copy-button.tsx
index f2e84e2429e..8dc79c45651 100644
--- a/apps/learn/components/copy-button.tsx
+++ b/apps/learn/components/copy-button.tsx
@@ -2,7 +2,6 @@
 
 import { Check, Copy } from 'lucide-react'
 import * as React from 'react'
-
 import { Button, cn, copyToClipboard } from 'ui'
 
 interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -22,7 +21,7 @@ export function CopyButton({ value, className, src, ...props }: CopyButtonProps)
   return (
     <Button
       size="small"
-      type="outline"
+      variant="outline"
       className={cn(
         'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0',
         className
diff --git a/apps/learn/components/next-up.tsx b/apps/learn/components/next-up.tsx
index b05ee51b4bf..cb48761dc0a 100644
--- a/apps/learn/components/next-up.tsx
+++ b/apps/learn/components/next-up.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
 import { ArrowRight } from 'lucide-react'
+import Link from 'next/link'
 import { Button } from 'ui'
 
 interface NextUpProps {
@@ -23,7 +23,7 @@ export function NextUp({ title, description, href, chapterNumber }: NextUpProps)
           <div className="mt-2">
             <Link href={href}>
               <Button
-                type="default"
+                variant="default"
                 iconRight={<ArrowRight className="h-4 w-4" />}
                 className="flex items-center gap-2"
               >
diff --git a/apps/learn/components/sidebar.tsx b/apps/learn/components/sidebar.tsx
index 7b6e4c93fdd..285e50be300 100644
--- a/apps/learn/components/sidebar.tsx
+++ b/apps/learn/components/sidebar.tsx
@@ -15,7 +15,7 @@ export function Sidebar() {
       <div className="md:hidden fixed top-0 left-0 right-0 z-50 bg-background justify-between flex items-center px-8 py-3 border-b">
         <MobileMenuSheet>
           <SheetTrigger asChild>
-            <Button type="outline" icon={<Menu />} />
+            <Button variant="outline" icon={<Menu />} />
           </SheetTrigger>
           <SheetContent side="left" className="p-0 w-80" showClose={false}>
             <ScrollArea className="h-full">
diff --git a/apps/learn/components/theme-switcher-dropdown.tsx b/apps/learn/components/theme-switcher-dropdown.tsx
index 9aa0292f43b..9a53adadb1d 100644
--- a/apps/learn/components/theme-switcher-dropdown.tsx
+++ b/apps/learn/components/theme-switcher-dropdown.tsx
@@ -56,7 +56,7 @@ const ThemeSwitcherDropdown = () => {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             className="px-1 group"
             icon={
diff --git a/apps/lite-studio/app/routes/projects.$ref.tsx b/apps/lite-studio/app/routes/projects.$ref.tsx
index b734ecb8a2e..2fc27badfef 100644
--- a/apps/lite-studio/app/routes/projects.$ref.tsx
+++ b/apps/lite-studio/app/routes/projects.$ref.tsx
@@ -75,11 +75,11 @@ export default function ProjectPage() {
             <h3>Quick Actions</h3>
             <Separator />
             <div className="flex flex-wrap gap-3">
-              <Button type="primary">New Table</Button>
-              <Button type="default">SQL Editor</Button>
-              <Button type="default">View Logs</Button>
+              <Button variant="primary">New Table</Button>
+              <Button variant="default">SQL Editor</Button>
+              <Button variant="default">View Logs</Button>
               <Button
-                type="outline"
+                variant="outline"
                 loading={loading}
                 onClick={() => {
                   setLoading(true)
@@ -114,7 +114,7 @@ export default function ProjectPage() {
                     <span className="font-mono text-sm">{table}</span>
                     <Badge variant="default">public</Badge>
                   </div>
-                  <Button type="text" size="tiny">
+                  <Button variant="text" size="tiny">
                     View
                   </Button>
                 </div>
@@ -168,8 +168,8 @@ export default function ProjectPage() {
             </div>
 
             <div className="flex gap-3">
-              <Button type="primary">Save Changes</Button>
-              <Button type="default">Cancel</Button>
+              <Button variant="primary">Save Changes</Button>
+              <Button variant="default">Cancel</Button>
             </div>
           </Card>
         </TabsContent>
diff --git a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
index a546af127e1..d0133a7f547 100644
--- a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
+++ b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
@@ -141,13 +141,17 @@ function BaseEditor<TRow, TSummaryRow = unknown>({
           <div className="flex">
             {isNullable ? (
               <>
-                <Button type="default" className="rounded-r-none" onClick={() => saveChanges(null)}>
+                <Button
+                  variant="default"
+                  className="rounded-r-none"
+                  onClick={() => saveChanges(null)}
+                >
                   Set NULL
                 </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<ChevronDown />}
                       className="px-1 rounded-l-none border-l-0"
                     />
@@ -158,7 +162,7 @@ function BaseEditor<TRow, TSummaryRow = unknown>({
                 </DropdownMenu>
               </>
             ) : (
-              <Button type="default" onClick={setToNow}>
+              <Button variant="default" onClick={setToNow}>
                 Set to NOW
               </Button>
             )}
diff --git a/apps/studio/components/grid/components/editor/TextEditor.tsx b/apps/studio/components/grid/components/editor/TextEditor.tsx
index 0b3bfe907c4..59f37c33a1b 100644
--- a/apps/studio/components/grid/components/editor/TextEditor.tsx
+++ b/apps/studio/components/grid/components/editor/TextEditor.tsx
@@ -160,7 +160,7 @@ export const TextEditor = <TRow, TSummaryRow = unknown>({
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <Button
-                          type="default"
+                          variant="default"
                           className="px-1"
                           onClick={() => onSelectExpand()}
                           icon={<Maximize size={12} strokeWidth={2} />}
@@ -172,8 +172,8 @@ export const TextEditor = <TRow, TSummaryRow = unknown>({
                     {isNullable && (
                       <Button
                         size="tiny"
-                        type="default"
-                        htmlType="button"
+                        variant="default"
+                        type="button"
                         onClick={() => {
                           // Skip confirmation when queue mode is enabled - changes can be reviewed/cancelled
                           if (isQueueEnabled) {
diff --git a/apps/studio/components/grid/components/editor/TruncatedWarningOverlay.tsx b/apps/studio/components/grid/components/editor/TruncatedWarningOverlay.tsx
index ef387e05fde..5be0d578bad 100644
--- a/apps/studio/components/grid/components/editor/TruncatedWarningOverlay.tsx
+++ b/apps/studio/components/grid/components/editor/TruncatedWarningOverlay.tsx
@@ -22,7 +22,7 @@ export const TruncatedWarningOverlay = ({
           You may try to render the entire value, but your browser may run into performance issues
         </p>
       </div>
-      <Button type="default" loading={isLoading} onClick={loadFullValue}>
+      <Button variant="default" loading={isLoading} onClick={loadFullValue}>
         Load full value
       </Button>
     </div>
diff --git a/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx b/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx
index 5320b2c5e38..5e096526974 100644
--- a/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx
+++ b/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx
@@ -60,7 +60,7 @@ export const SaveQueueActionBar = () => {
                 <div className="flex items-center gap-x-2">
                   <Button
                     size="tiny"
-                    type="primary"
+                    variant="primary"
                     onClick={handleSave}
                     disabled={isSaving}
                     loading={isSaving}
@@ -75,7 +75,7 @@ export const SaveQueueActionBar = () => {
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button
-                        type="outline"
+                        variant="outline"
                         className="w-7"
                         icon={<MoreVertical />}
                         aria-label="More options"
diff --git a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
index 9f7a4d1065c..ae41b4119c7 100644
--- a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
+++ b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
@@ -41,7 +41,7 @@ const RowCountSelector = ({
       side="top"
       align="start"
     >
-      <Button asChild type="outline" style={{ padding: '3px 10px' }}>
+      <Button asChild variant="outline" style={{ padding: '3px 10px' }}>
         <span>{`${tableEditorSnap.rowsPerPage} rows`}</span>
       </Button>
     </DropdownControl>
@@ -197,7 +197,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
         <Button
           aria-label="Previous page"
           icon={<ArrowLeft />}
-          type="outline"
+          variant="outline"
           className="px-1.5"
           disabled={page <= 1}
           onClick={onPreviousPage}
@@ -223,7 +223,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
         <Button
           aria-label="Next page"
           icon={<ArrowRight />}
-          type="outline"
+          variant="outline"
           className="px-1.5"
           disabled={isLastPage || !enableForeignRowsQuery}
           loading={isLoadingRows && enableForeignRowsQuery}
@@ -240,7 +240,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
         <Button
           aria-label="Previous page"
           icon={<ArrowLeft />}
-          type="outline"
+          variant="outline"
           className="px-1.5"
           disabled={page <= 1 || isLoading}
           onClick={onPreviousPage}
@@ -274,7 +274,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
         <Button
           aria-label="Next page"
           icon={<ArrowRight />}
-          type="outline"
+          variant="outline"
           className="px-1.5"
           disabled={isLastPage}
           onClick={onNextPage}
@@ -284,13 +284,17 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
       </div>
 
       {isLoading ? (
-        <Button type="text" className="w-7" icon={<Loader2 size={12} className="animate-spin" />} />
+        <Button
+          variant="text"
+          className="w-7"
+          icon={<Loader2 size={12} className="animate-spin" />}
+        />
       ) : isError ? (
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
               size="tiny"
-              type="text"
+              variant="text"
               className="w-7"
               loading={isFetching}
               icon={<AlertCircle />}
@@ -312,7 +316,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
               <TooltipTrigger asChild>
                 <Button
                   size="tiny"
-                  type="text"
+                  variant="text"
                   className="w-7"
                   loading={isFetching}
                   icon={<HelpCircle />}
diff --git a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
index 176283f0969..50e8bb81595 100644
--- a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
+++ b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
@@ -76,7 +76,7 @@ export const ForeignKeyFormatter = (props: Props) => {
             <Popover>
               <PopoverTrigger asChild>
                 <ButtonTooltip
-                  type="default"
+                  variant="default"
                   className="w-6 h-6"
                   aria-label="View referencing record"
                   icon={<ArrowRight />}
diff --git a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx
index ace88f95002..f45858e7ca5 100644
--- a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx
+++ b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx
@@ -162,7 +162,7 @@ export const ReferenceRecordPeek = ({ table, column, value }: ReferenceRecordPee
           id={String(table.id)}
           filters={[{ column, operator: '=', value: String(value) }]}
         >
-          <Button type="default">Open table</Button>
+          <Button variant="default">Open table</Button>
         </EditorTablePageLink>
       </div>
     </>
diff --git a/apps/studio/components/grid/components/grid/AddColumn.tsx b/apps/studio/components/grid/components/grid/AddColumn.tsx
index 69c0a4dbef8..d877d2d2d42 100644
--- a/apps/studio/components/grid/components/grid/AddColumn.tsx
+++ b/apps/studio/components/grid/components/grid/AddColumn.tsx
@@ -32,7 +32,7 @@ const AddColumnHeader = () => {
 
   return (
     <div className="flex h-full w-full py-1.5 flex items-center">
-      <Button block type="text" onClick={tableEditorSnap.onAddColumn} icon={<Plus />} />
+      <Button block variant="text" onClick={tableEditorSnap.onAddColumn} icon={<Plus />} />
     </div>
   )
 }
diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx
index f4d9f757a00..04cad32dd0b 100644
--- a/apps/studio/components/grid/components/grid/Grid.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.tsx
@@ -299,7 +299,7 @@ export const Grid = memo(
                       <p className="text-sm text-light">This page does not have any data</p>
                       <div className="flex items-center space-x-2 mt-4">
                         <Button
-                          type="default"
+                          variant="default"
                           className="pointer-events-auto"
                           onClick={() => snap.setPage(1)}
                         >
@@ -325,7 +325,7 @@ export const Grid = memo(
                       ) : (
                         <div className="flex flex-col items-center gap-4 mt-4">
                           <Button
-                            type="default"
+                            variant="default"
                             className="pointer-events-auto"
                             onClick={() => {
                               tableEditorSnap.onImportData()
@@ -347,7 +347,7 @@ export const Grid = memo(
                       </p>
                       <div className="flex items-center space-x-2 mt-4">
                         <Button
-                          type="default"
+                          variant="default"
                           className="pointer-events-auto"
                           onClick={() => removeAllFilters()}
                         >
diff --git a/apps/studio/components/grid/components/grid/GridError.tsx b/apps/studio/components/grid/components/grid/GridError.tsx
index cc8cb6b30a2..d18894c8208 100644
--- a/apps/studio/components/grid/components/grid/GridError.tsx
+++ b/apps/studio/components/grid/components/grid/GridError.tsx
@@ -125,7 +125,7 @@ const FilterError = ({ removeAllFilters }: { removeAllFilters: () => void }) =>
         One or more of your filters may have a value or operator that doesn't match the column's
         data type. Try updating or removing the filter.
       </p>
-      <Button type="default" onClick={removeAllFilters}>
+      <Button variant="default" onClick={removeAllFilters}>
         Remove filters
       </Button>
     </Admonition>
@@ -158,7 +158,7 @@ const InvalidOrderingOperatorError = ({ error }: { error: ResponseError }) => {
         Error: <code className="text-code-inline">{error.message}</code>
       </p>
 
-      <Button type="default" onClick={() => onApplySorts([])}>
+      <Button variant="default" onClick={() => onApplySorts([])}>
         Remove sorts
       </Button>
     </Admonition>
diff --git a/apps/studio/components/grid/components/grid/SelectColumn.tsx b/apps/studio/components/grid/components/grid/SelectColumn.tsx
index 77ca3527b95..3434f3845d1 100644
--- a/apps/studio/components/grid/components/grid/SelectColumn.tsx
+++ b/apps/studio/components/grid/components/grid/SelectColumn.tsx
@@ -147,7 +147,7 @@ function SelectCellFormatter({
       </ShortcutTooltip>
       {row && (
         <ButtonTooltip
-          type="text"
+          variant="text"
           size="tiny"
           className="px-1 rdg-row__select-column__edit-action"
           icon={<Maximize2 />}
diff --git a/apps/studio/components/grid/components/header/ExportDialog.tsx b/apps/studio/components/grid/components/header/ExportDialog.tsx
index 0ab3441398b..727ffb603fa 100644
--- a/apps/studio/components/grid/components/header/ExportDialog.tsx
+++ b/apps/studio/components/grid/components/header/ExportDialog.tsx
@@ -148,7 +148,7 @@ pg_dump -h ${db_host} -p ${db_port} -d ${db_name} -U ${db_user} --table="${table
           )}
         </DialogSection>
         <DialogFooter>
-          <Button type="default" onClick={() => onOpenChange(false)}>
+          <Button variant="default" onClick={() => onOpenChange(false)}>
             Close
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx
index 0ea1eb2e2fe..e264ec62670 100644
--- a/apps/studio/components/grid/components/header/Header.tsx
+++ b/apps/studio/components/grid/components/header/Header.tsx
@@ -343,7 +343,12 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
           {!snap.allRowsSelected ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button type="default" size="tiny" iconRight={<ChevronDown />} loading={isCopying}>
+                <Button
+                  variant="default"
+                  size="tiny"
+                  iconRight={<ChevronDown />}
+                  loading={isCopying}
+                >
                   Copy
                 </Button>
               </DropdownMenuTrigger>
@@ -356,7 +361,7 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
           ) : (
             <ButtonTooltip
               disabled
-              type="default"
+              variant="default"
               tooltip={{
                 content: {
                   side: 'bottom',
@@ -371,7 +376,12 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
 
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button type="default" size="tiny" iconRight={<ChevronDown />} loading={isExporting}>
+              <Button
+                variant="default"
+                size="tiny"
+                iconRight={<ChevronDown />}
+                loading={isExporting}
+              >
                 Export
               </Button>
             </DropdownMenuTrigger>
@@ -402,7 +412,7 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
                 options={{ registerInCommandMenu: true }}
                 side="bottom"
               >
-                <Button type="text" onClick={onToggleSelectAllInTable}>
+                <Button variant="text" onClick={onToggleSelectAllInTable}>
                   {snap.allRowsSelected ? 'Deselect all rows in table' : 'Select all rows in table'}
                 </Button>
               </Shortcut>
@@ -421,7 +431,7 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
             }}
           >
             <ButtonTooltip
-              type="danger"
+              variant="danger"
               size="tiny"
               icon={<Trash />}
               onClick={onRowsDelete}
diff --git a/apps/studio/components/grid/components/header/RefreshButton.tsx b/apps/studio/components/grid/components/header/RefreshButton.tsx
index d71f8945867..5c9cdf67f89 100644
--- a/apps/studio/components/grid/components/header/RefreshButton.tsx
+++ b/apps/studio/components/grid/components/header/RefreshButton.tsx
@@ -32,7 +32,7 @@ export const RefreshButton = ({ tableId, isRefetching }: RefreshButtonProps) =>
       side="bottom"
     >
       <Button
-        type="outline"
+        variant="outline"
         loading={isRefetching}
         icon={<RefreshCw />}
         onClick={() => onClick()}
diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
index b7db625bdda..c96808d761f 100644
--- a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
+++ b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
@@ -77,10 +77,10 @@ function DatePickerOption({ onChange, onCancel, search }: CustomOptionProps) {
         className="w-full"
       />
       <div className="flex justify-end gap-2 py-3 px-4 border-t">
-        <Button type="default" onClick={onCancel}>
+        <Button variant="default" onClick={onCancel}>
           Cancel
         </Button>
-        <Button type="primary" onClick={() => onChange(date ? format(date, 'yyyy-MM-dd') : '')}>
+        <Button variant="primary" onClick={() => onChange(date ? format(date, 'yyyy-MM-dd') : '')}>
           Apply
         </Button>
       </div>
diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
index eb584ba0d37..d0b5f646f43 100644
--- a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
@@ -82,7 +82,7 @@ export const FilterPopoverPrimitive = ({
   return (
     <Popover open={open} onOpenChange={setOpen} modal={false}>
       <PopoverTrigger asChild>
-        <Button type={filters.length > 0 ? 'link' : 'text'} icon={<FilterIcon />}>
+        <Button variant={filters.length > 0 ? 'link' : 'text'} icon={<FilterIcon />}>
           {displayButtonText}
         </Button>
       </PopoverTrigger>
@@ -110,12 +110,12 @@ export const FilterPopoverPrimitive = ({
           </div>
           <PopoverSeparator />
           <div className="px-3 flex flex-row justify-between">
-            <Button icon={<Plus />} type="dashed" onClick={onAddFilter}>
+            <Button icon={<Plus />} variant="dashed" onClick={onAddFilter}>
               Add filter
             </Button>
             <Button
               disabled={isEqual(localFilters, filters)}
-              type="default"
+              variant="default"
               onClick={() => onSelectApplyFilters()}
             >
               Apply filter
diff --git a/apps/studio/components/grid/components/header/filter/FilterRow.tsx b/apps/studio/components/grid/components/header/filter/FilterRow.tsx
index 5d21c86bfd1..04dafe05db8 100644
--- a/apps/studio/components/grid/components/header/filter/FilterRow.tsx
+++ b/apps/studio/components/grid/components/header/filter/FilterRow.tsx
@@ -39,7 +39,7 @@ const FilterRow = ({ filter, filterIdx, onChange, onDelete, onKeyDown }: FilterR
       >
         <Button
           asChild
-          type="outline"
+          variant="outline"
           icon={
             <div className="text-foreground-lighter">
               <ChevronDown strokeWidth={1.5} />
@@ -62,7 +62,7 @@ const FilterRow = ({ filter, filterIdx, onChange, onDelete, onKeyDown }: FilterR
       >
         <Button
           asChild
-          type="outline"
+          variant="outline"
           icon={
             <div className="text-foreground-lighter">
               <ChevronDown strokeWidth={1.5} />
@@ -86,7 +86,7 @@ const FilterRow = ({ filter, filterIdx, onChange, onDelete, onKeyDown }: FilterR
         onKeyDown={onKeyDown}
       />
       <Button
-        type="text"
+        variant="text"
         className="px-1"
         icon={<X strokeWidth={1.5} />}
         onClick={() => onDelete(filterIdx)}
diff --git a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
index 0853bfa803d..0be00fd5cd4 100644
--- a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
@@ -233,7 +233,7 @@ export const SortPopoverPrimitive = ({
     <>
       <Popover modal={false} open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button type={localSorts.length > 0 ? 'link' : 'text'} icon={<List />}>
+          <Button variant={localSorts.length > 0 ? 'link' : 'text'} icon={<List />}>
             {displayButtonText}
           </Button>
         </PopoverTrigger>
@@ -288,7 +288,7 @@ export const SortPopoverPrimitive = ({
                 >
                   <Button
                     asChild
-                    type="dashed"
+                    variant="dashed"
                     iconRight={<ChevronDown size="14" className="text-foreground-light" />}
                     className="sb-grid-dropdown__item-trigger"
                     data-testid="table-editor-pick-column-to-sort-button"
@@ -302,7 +302,7 @@ export const SortPopoverPrimitive = ({
               <div className="flex items-center">
                 <Button
                   disabled={!hasChanges}
-                  type="default"
+                  variant="default"
                   onClick={() => {
                     if (isLargeTable && localSorts.length > 0) {
                       // [Joshen] Note we're only checking PKs - unable to check indexes properly
diff --git a/apps/studio/components/grid/components/header/sort/SortRow.tsx b/apps/studio/components/grid/components/header/sort/SortRow.tsx
index edae30e92ee..59f66857874 100644
--- a/apps/studio/components/grid/components/header/sort/SortRow.tsx
+++ b/apps/studio/components/grid/components/header/sort/SortRow.tsx
@@ -61,7 +61,7 @@ const SortRow = ({ index, columnName, sort, onDelete, onToggle }: SortRowProps)
       <Button
         icon={<X strokeWidth={1.5} />}
         size="tiny"
-        type="text"
+        variant="text"
         className="w-7"
         onClick={() => onDelete(columnName)}
       />
diff --git a/apps/studio/components/grid/components/menu/ColumnMenu.tsx b/apps/studio/components/grid/components/menu/ColumnMenu.tsx
index 514daaade65..968cc98afc7 100644
--- a/apps/studio/components/grid/components/menu/ColumnMenu.tsx
+++ b/apps/studio/components/grid/components/menu/ColumnMenu.tsx
@@ -159,7 +159,7 @@ export const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
         <DropdownMenuTrigger asChild>
           <Button
             className="opacity-50 flex"
-            type="text"
+            variant="text"
             style={{ padding: '3px' }}
             onClick={(e) => {
               e.stopPropagation()
diff --git a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
index 13ff46ed830..b667236ecf7 100644
--- a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
+++ b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
@@ -91,7 +91,7 @@ export const APIKeyRow = ({
               <DropdownMenu>
                 <DropdownMenuTrigger className="px-1 focus-visible:outline-hidden" asChild>
                   <Button
-                    type="text"
+                    variant="text"
                     size="tiny"
                     icon={
                       <MoreVertical
diff --git a/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx b/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx
index 2bb4c76bd64..b46c07b230d 100644
--- a/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx
+++ b/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx
@@ -111,7 +111,7 @@ export function ApiKeyPill({
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
-              type="outline"
+              variant="outline"
               aria-label={show ? 'Hide API key' : 'Reveal API key'}
               className="rounded-full px-2 pointer-events-auto"
               loading={show && isLoading}
@@ -135,7 +135,7 @@ export function ApiKeyPill({
       <Tooltip>
         <TooltipTrigger asChild>
           <CopyButton
-            type="default"
+            variant="default"
             aria-label="Copy API key"
             asyncText={onCopy}
             iconOnly
diff --git a/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx b/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx
index 0aff6d43928..fc7d131377b 100644
--- a/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx
+++ b/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx
@@ -86,7 +86,7 @@ export const CreatePublishableAPIKeyDialog = () => {
         side="bottom"
         tooltipOpen={visible === 'publishable' ? false : undefined}
       >
-        <Button type="default" icon={<Plus />} onClick={openDialog}>
+        <Button variant="default" icon={<Plus />} onClick={openDialog}>
           New publishable key
         </Button>
       </Shortcut>
@@ -148,7 +148,7 @@ export const CreatePublishableAPIKeyDialog = () => {
             options={{ enabled: visible === 'publishable' && !isCreatingAPIKey }}
             side="top"
           >
-            <Button form={FORM_ID} htmlType="submit" loading={isCreatingAPIKey}>
+            <Button form={FORM_ID} type="submit" loading={isCreatingAPIKey}>
               Create Publishable API key
             </Button>
           </Shortcut>
diff --git a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx
index aea1fe5c20e..5fe74bb1673 100644
--- a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx
+++ b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx
@@ -92,7 +92,7 @@ export const CreateSecretAPIKeyDialog = () => {
         side="bottom"
         tooltipOpen={visible === 'secret' ? false : undefined}
       >
-        <Button type="default" className="mt-2" icon={<Plus />} onClick={openDialog}>
+        <Button variant="default" className="mt-2" icon={<Plus />} onClick={openDialog}>
           New secret key
         </Button>
       </Shortcut>
@@ -176,7 +176,7 @@ export const CreateSecretAPIKeyDialog = () => {
             options={{ enabled: visible === 'secret' && !isCreatingAPIKey }}
             side="top"
           >
-            <Button form={FORM_ID} htmlType="submit" loading={isCreatingAPIKey}>
+            <Button form={FORM_ID} type="submit" loading={isCreatingAPIKey}>
               Create API key
             </Button>
           </Shortcut>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
index 681ff45e120..d5ea3576b33 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
@@ -118,7 +118,7 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="default"
+                      variant="default"
                       title="More options"
                       className="w-7"
                       icon={<MoreVertical />}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx
index 72b5de4a626..c50888afe70 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx
@@ -34,7 +34,7 @@ export const AccessTokenNewBanner = <T,>({
       className="mb-6 relative"
       actions={
         <Button
-          type="text"
+          variant="text"
           icon={<X />}
           className="w-7 h-7 absolute top-2.5 right-2.5"
           onClick={onClose}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/TokenPermissionSection.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/TokenPermissionSection.tsx
index 663e3f6fac4..271420f9ff7 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/TokenPermissionSection.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/TokenPermissionSection.tsx
@@ -26,7 +26,7 @@ export const TokenPermissionsSection = ({
         <Collapsible open={permissionsOpen} onOpenChange={setPermissionsOpen}>
           <CollapsibleTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               className="w-full justify-start px-0.5 h-auto text-sm font-medium text-foreground-light hover:text-foreground"
             >
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx
index 887e53a467c..15c8a674e96 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx
@@ -34,7 +34,7 @@ export const NewTokenButton = ({ onCreateToken }: NewAccessTokenButtonProps) =>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              type="primary"
+              variant="primary"
               title="Choose token scope"
               className="rounded-l-none px-[4px] py-[5px]"
               icon={<ChevronDown />}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
index 72b1db3e997..47972387791 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
@@ -158,7 +158,7 @@ export const NewTokenDialog = ({
                   be very careful when using this API.
                 </p>
                 <div className="mt-4">
-                  <Button asChild type="default" icon={<ExternalLink />}>
+                  <Button asChild variant="default" icon={<ExternalLink />}>
                     <a href="https://api.supabase.com/api/v0" target="_blank" rel="noreferrer">
                       Experimental API documentation
                     </a>
@@ -251,7 +251,7 @@ export const NewTokenDialog = ({
         </DialogSection>
         <DialogFooter>
           <Button
-            type="default"
+            variant="default"
             disabled={isPending}
             onClick={() => {
               form.reset()
@@ -262,7 +262,7 @@ export const NewTokenDialog = ({
           >
             Cancel
           </Button>
-          <Button form={formId} htmlType="submit" loading={isPending}>
+          <Button form={formId} type="submit" loading={isPending}>
             Generate token
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx
index f1d2e54c9d2..e0d823e77ee 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx
@@ -41,7 +41,7 @@ export const PermissionResourceSelector = <TFormValues extends PermissionsFormVa
   return (
     <Popover open={open} onOpenChange={onOpenChange} modal={true}>
       <PopoverTrigger asChild>
-        <Button type="default" size="tiny" icon={<Plus className="h-4 w-4" />}>
+        <Button variant="default" size="tiny" icon={<Plus className="h-4 w-4" />}>
           Add permission
         </Button>
       </PopoverTrigger>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/Permissions.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/Permissions.tsx
index 8c252188997..f22efce175d 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/Permissions.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/Permissions.tsx
@@ -25,7 +25,7 @@ export const Permissions = <TFormValues extends PermissionsFormValues = Permissi
           <div className="flex items-center gap-2">
             {permissionRows.length > 0 && (
               <ButtonTooltip
-                type="default"
+                variant="default"
                 size="tiny"
                 className="p-1"
                 onClick={() => {
@@ -82,7 +82,7 @@ export const Permissions = <TFormValues extends PermissionsFormValues = Permissi
                         <Popover>
                           <PopoverTrigger asChild>
                             <Button
-                              type="default"
+                              variant="default"
                               size="tiny"
                               className="w-[150px] flex text-sm justify-between h-7 "
                               iconRight={
@@ -131,7 +131,7 @@ export const Permissions = <TFormValues extends PermissionsFormValues = Permissi
                         </Popover>
                       )}
                       <Button
-                        type="text"
+                        variant="text"
                         size="tiny"
                         className="p-1"
                         onClick={() => {
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenButton.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenButton.tsx
index dea527cb529..8e25f29e8a9 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenButton.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenButton.tsx
@@ -14,7 +14,7 @@ export const NewScopedTokenButton = ({ onCreateToken }: NewScopedTokenButtonProp
   return (
     <>
       <Button
-        type="primary"
+        variant="primary"
         onClick={() => {
           setVisible(true)
         }}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
index 7943c87529b..d2b90f9c91d 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
@@ -271,7 +271,7 @@ export const NewScopedTokenSheet = ({
                         such, be very careful when using this API.
                       </p>
                       <div className="mt-4">
-                        <Button asChild type="default" icon={<ExternalLink />}>
+                        <Button asChild variant="default" icon={<ExternalLink />}>
                           <Link
                             href="https://api.supabase.com/api/v0"
                             target="_blank"
@@ -314,7 +314,7 @@ export const NewScopedTokenSheet = ({
         </ScrollArea>
         <SheetFooter className="justify-end! w-full mt-auto py-4 border-t">
           <div className="flex gap-2">
-            <Button type="default" disabled={isPending} onClick={handleClose}>
+            <Button variant="default" disabled={isPending} onClick={handleClose}>
               Cancel
             </Button>
             <Button onClick={form.handleSubmit(onSubmit)} loading={isPending}>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx
index 750b92de976..44c8570e811 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx
@@ -126,7 +126,7 @@ export const ScopedTokenList = ({ searchString = '', onDeleteSuccess }: ScopedTo
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="default"
+                      variant="default"
                       title="More options"
                       className="w-7"
                       icon={<MoreVertical />}
diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx
index c8058b89873..017640064cb 100644
--- a/apps/studio/components/interfaces/Account/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Account/AuditLogs.tsx
@@ -157,7 +157,7 @@ export const AuditLogs = () => {
                 )}
               </div>
               <Button
-                type="default"
+                variant="default"
                 disabled={isLoading || isRefetching}
                 icon={<RefreshCw className={isRefetching ? 'animate-spin' : ''} />}
                 onClick={() => refetch()}
@@ -202,7 +202,7 @@ export const AuditLogs = () => {
                           <div className="flex items-center space-x-2">
                             <p>Date</p>
                             <ButtonTooltip
-                              type="text"
+                              variant="text"
                               className="px-1"
                               icon={
                                 dateSortDesc ? (
@@ -284,7 +284,7 @@ export const AuditLogs = () => {
                                 <TimestampInfo className="text-sm" utcTimestamp={isoTimestamp} />
                               </Table.td>
                               <Table.td align="right">
-                                <Button type="default">View details</Button>
+                                <Button variant="default">View details</Button>
                               </Table.td>
                             </Table.tr>
                           )
diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
index a78ad171776..15f38bab788 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
@@ -110,7 +110,7 @@ export const AccountConnections = () => {
                     <Badge variant="success">Connected</Badge>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
-                        <Button iconRight={<ChevronDown size={14} />} type="default">
+                        <Button iconRight={<ChevronDown size={14} />} variant="default">
                           <span>Manage</span>
                         </Button>
                       </DropdownMenuTrigger>
@@ -137,7 +137,7 @@ export const AccountConnections = () => {
                     </DropdownMenu>
                   </>
                 ) : (
-                  <Button type="primary" onClick={handleConnect}>
+                  <Button variant="primary" onClick={handleConnect}>
                     Connect
                   </Button>
                 )}
diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx
index 24487ace02a..14e6971e4bc 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx
@@ -139,12 +139,12 @@ export const AccountIdentities = () => {
                     </div>
                     <div className="flex items-center gap-x-1">
                       {provider === 'email' && (
-                        <Button asChild type="default">
+                        <Button asChild variant="default">
                           <Link href="/reset-password?type=change">Change password</Link>
                         </Button>
                       )}
                       <ButtonTooltip
-                        type="text"
+                        variant="text"
                         icon={<Edit />}
                         className="w-7"
                         onClick={() => setSelectedProviderUpdateEmail(provider)}
@@ -152,7 +152,7 @@ export const AccountIdentities = () => {
                       />
                       {identities.length > 1 && (
                         <ButtonTooltip
-                          type="text"
+                          variant="text"
                           icon={<Unlink />}
                           className="w-7"
                           onClick={() => setSelectedProviderUnlink(provider)}
diff --git a/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx b/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx
index b7a1167d364..6a9fe4cfd1a 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx
@@ -113,10 +113,10 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
         </DialogSection>
 
         <DialogFooter>
-          <Button type="default" disabled={isPending} onClick={onClose}>
+          <Button variant="default" disabled={isPending} onClick={onClose}>
             Cancel
           </Button>
-          <Button htmlType="submit" loading={isPending} disabled={isPending}>
+          <Button type="submit" loading={isPending} disabled={isPending}>
             Confirm
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
index 244fdd24f2e..d421f5ffc2d 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
@@ -106,7 +106,7 @@ export const DeleteAccountButton = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button type="danger" loading={!accountEmail}>
+        <Button variant="danger" loading={!accountEmail}>
           Request to delete account
         </Button>
       </DialogTrigger>
@@ -144,7 +144,7 @@ export const DeleteAccountButton = () => {
                   </span>
                 </DialogSection>
                 <DialogFooter>
-                  <Button block type="primary" size="medium" onClick={() => setIsOpen(false)}>
+                  <Button block variant="primary" size="medium" onClick={() => setIsOpen(false)}>
                     Understood
                   </Button>
                 </DialogFooter>
@@ -184,8 +184,8 @@ export const DeleteAccountButton = () => {
                     <Button
                       block
                       size="small"
-                      type="danger"
-                      htmlType="submit"
+                      variant="danger"
+                      type="submit"
                       loading={isPending}
                       disabled={account !== accountEmail || isPending}
                     >
diff --git a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
index 89ac65362a0..f0a960730ed 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
@@ -193,13 +193,13 @@ export const ProfileInformation = () => {
               </CardContent>
               <CardFooter className="justify-end space-x-2">
                 {form.formState.isDirty && (
-                  <Button type="default" onClick={() => form.reset()}>
+                  <Button variant="default" onClick={() => form.reset()}>
                     Cancel
                   </Button>
                 )}
                 <Button
-                  type="primary"
-                  htmlType="submit"
+                  variant="primary"
+                  type="submit"
                   loading={isUpdatingProfile || isIdentitiesLoading}
                   disabled={!form.formState.isDirty}
                 >
diff --git a/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx
index 63a318f171b..bc21899f4ab 100644
--- a/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx
@@ -92,7 +92,7 @@ export const TimezoneSettings = () => {
                     aria-expanded={open}
                     aria-controls={listboxId}
                     className="w-full justify-between"
-                    type="default"
+                    variant="default"
                     size="small"
                     icon={<Globe />}
                     iconRight={<ChevronsUpDown size={14} strokeWidth={1.5} />}
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
index 98f1737f5af..19a44f4cdeb 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
@@ -54,7 +54,7 @@ export const TOTPFactors = () => {
                         </p>
                         <Button
                           size="tiny"
-                          type="default"
+                          variant="default"
                           onClick={() => setFactorToBeDeleted(factor.id)}
                         >
                           Remove
diff --git a/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx b/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx
index b01066a5f65..5eeb1be51c7 100644
--- a/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx
+++ b/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx
@@ -123,7 +123,7 @@ export const AdvisorRuleItem = ({ lint }: AdvisorRuleItemProps) => {
               <div className="flex items-center gap-x-2">
                 <DocsButton href={lint.docsLink} />
                 <Button
-                  type="default"
+                  variant="default"
                   onClick={(e) => {
                     e.stopPropagation()
                     setOpen(true)
@@ -187,7 +187,7 @@ export const AdvisorRuleItem = ({ lint }: AdvisorRuleItemProps) => {
                           tooltip={{ content: { side: 'bottom', text: 'Edit rule' } }}
                         /> */}
                         <ButtonTooltip
-                          type="default"
+                          variant="default"
                           icon={<Trash />}
                           className="w-7"
                           onClick={() => setSelectedRuleToDelete(rule.id)}
diff --git a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
index 2de2a5c872d..174aa7dc054 100644
--- a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
@@ -234,10 +234,10 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
           </Form>
         </SheetSection>
         <SheetFooter>
-          <Button disabled={isCreating} type="default" onClick={() => onOpenChange(false)}>
+          <Button disabled={isCreating} variant="default" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button form={formId} htmlType="submit" loading={isCreating}>
+          <Button form={formId} type="submit" loading={isCreating}>
             Create rule
           </Button>
         </SheetFooter>
diff --git a/apps/studio/components/interfaces/Advisors/DisableRuleModal.tsx b/apps/studio/components/interfaces/Advisors/DisableRuleModal.tsx
index 77a2adcf599..f65e2143b26 100644
--- a/apps/studio/components/interfaces/Advisors/DisableRuleModal.tsx
+++ b/apps/studio/components/interfaces/Advisors/DisableRuleModal.tsx
@@ -63,7 +63,7 @@ export const DisableRuleModal = ({ lint }: DisableRuleModalProps) => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button type="default">Disable rule</Button>
+        <Button variant="default">Disable rule</Button>
       </DialogTrigger>
       <DialogContent size="small">
         <DialogHeader>
@@ -77,10 +77,10 @@ export const DisableRuleModal = ({ lint }: DisableRuleModalProps) => {
           </p>
         </DialogSection>
         <DialogFooter>
-          <Button disabled={isCreating} type="default" onClick={() => setOpen(false)}>
+          <Button disabled={isCreating} variant="default" onClick={() => setOpen(false)}>
             Cancel
           </Button>
-          <Button loading={isCreating} type="primary" onClick={onCreateRule}>
+          <Button loading={isCreating} variant="primary" onClick={onCreateRule}>
             Disable
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx b/apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx
index 223c2ea075a..85553b1bb60 100644
--- a/apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx
+++ b/apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx
@@ -42,7 +42,7 @@ export const EnableRuleModal = ({ lint, rule }: EnableRuleModalProps) => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button type="default">Enable rule</Button>
+        <Button variant="default">Enable rule</Button>
       </DialogTrigger>
       <DialogContent size="small">
         <DialogHeader>
@@ -56,10 +56,10 @@ export const EnableRuleModal = ({ lint, rule }: EnableRuleModalProps) => {
           </p>
         </DialogSection>
         <DialogFooter>
-          <Button disabled={isDeleting} type="default" onClick={() => setOpen(false)}>
+          <Button disabled={isDeleting} variant="default" onClick={() => setOpen(false)}>
             Cancel
           </Button>
-          <Button loading={isDeleting} type="primary" onClick={onDeleteRule}>
+          <Button loading={isDeleting} variant="primary" onClick={onDeleteRule}>
             Enable
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx
index 4a1f5cfe1c9..76c592f511b 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx
@@ -27,7 +27,7 @@ export function ApiAuthorizationErrorScreen({
             </>
           }
         />
-        <Button type="default" block asChild>
+        <Button variant="default" block asChild>
           <Link href="/">Back to dashboard</Link>
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
index 8d97a2337c5..932f837d994 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
@@ -299,7 +299,7 @@ function FormFooter({
         onApprove={onApprove}
       />
       <Button
-        type="text"
+        variant="text"
         block
         loading={approvalState === 'declining'}
         disabled={approvalState !== 'indeterminate'}
@@ -333,7 +333,7 @@ function ApprovalButton({
 }: ApprovalButtonProps): ReactNode {
   return (
     <Button
-      type="primary"
+      variant="primary"
       block
       loading={approvalState === 'approving'}
       disabled={disabled}
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx
index 52e28b67ff5..aaf83f38c76 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx
@@ -27,7 +27,7 @@ export function ApiAuthorizationInvalidScreen({
             isPlural ? 's' : ''
           }: ${missingParameters.join(', ')}.`}
         />
-        <Button type="default" block asChild>
+        <Button variant="default" block asChild>
           <Link href="/">Back to dashboard</Link>
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
index cf38d45a091..65df1c6c1d7 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -157,7 +157,7 @@ export const FeaturePreviewModal = () => {
                   <p>{selectedFeature?.name}</p>
                   <div className="flex items-center gap-x-2">
                     {selectedFeature?.discussionsUrl !== undefined && (
-                      <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+                      <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
                         <Link
                           href={selectedFeature.discussionsUrl}
                           target="_blank"
@@ -167,7 +167,7 @@ export const FeaturePreviewModal = () => {
                         </Link>
                       </Button>
                     )}
-                    <Button type="default" onClick={() => toggleFeature()}>
+                    <Button variant="default" onClick={() => toggleFeature()}>
                       {isSelectedFeatureEnabled ? 'Disable' : 'Enable'} feature
                     </Button>
                   </div>
@@ -186,7 +186,7 @@ export const FeaturePreviewModal = () => {
                   Have an idea for the dashboard? Let us know via GitHub Discussions!
                 </p>
               </div>
-              <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+              <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
                 <Link
                   href="https://github.com/orgs/supabase/discussions/categories/feature-requests"
                   target="_blank"
diff --git a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
index 5c187bd0d45..e7033ebe929 100644
--- a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
@@ -185,13 +185,13 @@ export const AuditLogsForm = () => {
 
               <CardFooter className="justify-end space-x-2">
                 {isDirty && (
-                  <Button type="default" onClick={() => form.reset()}>
+                  <Button variant="default" onClick={() => form.reset()}>
                     Cancel
                   </Button>
                 )}
                 <Button
-                  type="primary"
-                  htmlType="submit"
+                  variant="primary"
+                  type="submit"
                   disabled={!canUpdateConfig || isUpdatingConfig || !isDirty}
                   loading={isUpdatingConfig}
                 >
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthAlert.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthAlert.tsx
index 15b6ca2c69c..cd1f1969b35 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthAlert.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthAlert.tsx
@@ -46,7 +46,7 @@ export const AuthAlert = ({
             </AlertTitle>
             <AlertDescription className="flex flex-col gap-y-3">
               <p>The SMS hook will be used in place of the SMS provider configured</p>
-              <Button asChild type="default" className="w-min" icon={<ExternalLink />}>
+              <Button asChild variant="default" className="w-min" icon={<ExternalLink />}>
                 <Link href={`/project/${ref}/auth/hooks`}>View auth hooks</Link>
               </Button>
             </AlertDescription>
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
index 5d458564f57..f6520fc841d 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -122,7 +122,7 @@ const FormField = ({
                     <Popover>
                       <PopoverTrigger asChild>
                         <Button
-                          type="outline"
+                          variant="outline"
                           className="w-full justify-start text-left font-normal px-3 py-4"
                           icon={<CalendarIcon className="h-4 w-4" />}
                           size="small"
@@ -299,7 +299,7 @@ const FormField = ({
                       {description ? <Markdown content={description} /> : null}
                       {properties.link && (
                         <span>
-                          <Button asChild type="default" size="tiny" icon={<ExternalLink />}>
+                          <Button asChild variant="default" size="tiny" icon={<ExternalLink />}>
                             <a href={properties.link} target="_blank" rel="noreferrer noopener">
                               Documentation
                             </a>
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 1a090036cbf..f8329d926bd 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -279,8 +279,8 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
               <DocsButton href={provider.link} />
               <div className="flex items-center gap-x-3">
                 <Button
-                  type="default"
-                  htmlType="reset"
+                  variant="default"
+                  type="reset"
                   onClick={() => {
                     setOpen(false)
                     setUrlProvider(null)
@@ -292,7 +292,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
                 </Button>
                 <ButtonTooltip
                   form={formId}
-                  htmlType="submit"
+                  type="submit"
                   loading={isUpdatingConfig}
                   disabled={isUpdatingConfig || !canUpdateConfig || !form.formState.isDirty}
                   tooltip={{
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx
index 55d8667a681..f8ee6ecb6f7 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx
@@ -58,7 +58,7 @@ export const AuthProvidersForm = () => {
                       set to more than an hour. It is recommended to set this value to less than an
                       hour.
                     </p>
-                    <Button asChild type="default" className="w-min" icon={<ExternalLink />}>
+                    <Button asChild variant="default" className="w-min" icon={<ExternalLink />}>
                       <Link href="https://supabase.com/docs/guides/platform/going-into-prod#security">
                         View security recommendations
                       </Link>
diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
index 016d5340a4d..982d361637d 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
@@ -276,7 +276,12 @@ export const BasicAuthSettingsForm = () => {
                             </Link>{' '}
                             to ensure that access to your data is restricted where required.
                           </p>
-                          <Button asChild type="default" className="w-min" icon={<ExternalLink />}>
+                          <Button
+                            asChild
+                            variant="default"
+                            className="w-min"
+                            icon={<ExternalLink />}
+                          >
                             <Link href={`${DOCS_URL}/guides/auth/auth-anonymous#access-control`}>
                               View access control docs
                             </Link>
@@ -327,13 +332,13 @@ export const BasicAuthSettingsForm = () => {
                 </CardContent>
                 <CardFooter className="justify-end space-x-2">
                   {isDirty && (
-                    <Button type="default" onClick={() => form.reset()}>
+                    <Button variant="default" onClick={() => form.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={!canUpdateConfig || isUpdatingConfig || !isDirty}
                     loading={isUpdatingConfig}
                   >
diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
index 5a99cb1646a..1fa18fbba32 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
@@ -518,10 +518,10 @@ export const CreateOrUpdateCustomProviderSheet = ({
           </form>
         </Form>
         <SheetFooter>
-          <Button type="default" onClick={confirmOnClose}>
+          <Button variant="default" onClick={confirmOnClose}>
             Cancel
           </Button>
-          <Button htmlType="submit" form={FORM_ID} loading={isCreating || isUpdating}>
+          <Button type="submit" form={FORM_ID} loading={isCreating || isUpdating}>
             {isEditMode ? 'Update provider' : 'Create and enable provider'}
           </Button>
         </SheetFooter>
diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
index e1b28051a8f..fdf156cf7c3 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
@@ -80,7 +80,7 @@ const NewProviderButton = ({
 }) => {
   return (
     <Button
-      type="primary"
+      variant="primary"
       disabled={!canCreateProvider}
       icon={<Plus />}
       onClick={() => setShowCreateSheet(true)}
@@ -264,7 +264,7 @@ export const CustomAuthProvidersList = () => {
         description="Enable custom OAuth/OIDC providers to configure your own identity providers for authentication."
       >
         <Button
-          type="primary"
+          variant="primary"
           loading={isEnabling}
           disabled={isEnabling}
           onClick={handleEnableCustomProviders}
@@ -284,7 +284,7 @@ export const CustomAuthProvidersList = () => {
           description="Enable custom OAuth/OIDC providers to configure your own identity providers for authentication."
         >
           <Button
-            type="primary"
+            variant="primary"
             loading={isEnabling}
             disabled={isEnabling}
             onClick={handleEnableCustomProviders}
@@ -341,7 +341,7 @@ export const CustomAuthProvidersList = () => {
             />
             {hasActiveFilters && (
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
                 className="px-1"
                 icon={<X />}
@@ -367,7 +367,7 @@ export const CustomAuthProvidersList = () => {
                     <div className="flex flex-col gap-y-2">
                       <p>Custom providers are not enabled for this project.</p>
                       <Button
-                        type="primary"
+                        variant="primary"
                         size="tiny"
                         loading={isEnabling}
                         disabled={isEnabling}
@@ -395,7 +395,7 @@ export const CustomAuthProvidersList = () => {
                 side="bottom"
               >
                 <Button
-                  type="primary"
+                  variant="primary"
                   disabled={!canCreateProvider}
                   icon={<Plus />}
                   onClick={() => setShowCreateSheet(true)}
@@ -455,7 +455,7 @@ export const CustomAuthProvidersList = () => {
                     <TableRow key={provider.id} className="w-full">
                       <TableCell className="flex" title={provider.name}>
                         <Button
-                          type="text"
+                          variant="text"
                           className="text-link-table-cell text-sm p-0 hover:bg-transparent title [&>span]:w-full!"
                           onClick={() => setSelectedProviderToEdit(provider.id)}
                           title={provider.name}
@@ -478,7 +478,7 @@ export const CustomAuthProvidersList = () => {
                         <div className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center border-l @[944px]:border-l-0">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                              <Button type="default" className="px-1" icon={<MoreVertical />} />
+                              <Button variant="default" className="px-1" icon={<MoreVertical />} />
                             </DropdownMenuTrigger>
                             <DropdownMenuContent side="bottom" align="end" className="w-48">
                               <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx
index 1ac63e3accc..d7cd05b2781 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx
@@ -27,7 +27,7 @@ export const CustomEmailTemplateRestrictionAdmonition = () => {
         <div className="flex w-full @lg:w-auto">
           <Button
             asChild
-            type="default"
+            variant="default"
             className="flex-1 rounded-r-none px-3 @lg:flex-none hover:z-10"
           >
             <Link href={`/project/${projectRef}/auth/smtp`}>Set up SMTP</Link>
@@ -35,7 +35,7 @@ export const CustomEmailTemplateRestrictionAdmonition = () => {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 aria-label="More email template editing options"
                 className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px"
                 icon={<ChevronDown />}
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
index fa390f874e0..e8f79f55cab 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -155,7 +155,7 @@ export const EmailTemplates = () => {
                 }
                 layout="horizontal"
                 actions={
-                  <Button asChild type="default">
+                  <Button asChild variant="default">
                     <Link href={`/project/${projectRef}/auth/smtp`}>Set up SMTP</Link>
                   </Button>
                 }
@@ -258,13 +258,13 @@ export const EmailTemplates = () => {
                     )}
                     <CardFooter className="justify-end space-x-2">
                       {notificationsForm.formState.isDirty && (
-                        <Button type="default" onClick={() => notificationsForm.reset()}>
+                        <Button variant="default" onClick={() => notificationsForm.reset()}>
                           Cancel
                         </Button>
                       )}
                       <Button
-                        type="primary"
-                        htmlType="submit"
+                        variant="primary"
+                        type="submit"
                         disabled={
                           !canUpdateConfig ||
                           isUpdatingConfig ||
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/ResetTemplateDialog.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/ResetTemplateDialog.tsx
index 4ebe7269a37..6c54b1dd732 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/ResetTemplateDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/ResetTemplateDialog.tsx
@@ -60,7 +60,7 @@ export const ResetTemplateDialog = ({
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger asChild>
-        <Button type="default" htmlType="button" disabled={!canUpdateConfig}>
+        <Button variant="default" type="button" disabled={!canUpdateConfig}>
           Reset template
         </Button>
       </AlertDialogTrigger>
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index be691be50fc..8a2a43b66b2 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -377,7 +377,7 @@ export const TemplateEditor = ({ template, isReadOnly = false }: TemplateEditorP
                         <Tooltip key={variable.value}>
                           <TooltipTrigger asChild>
                             <Button
-                              type="outline"
+                              variant="outline"
                               size="tiny"
                               className="rounded-full"
                               onClick={() => insertTextAtCursor(variable.value)}
@@ -447,8 +447,8 @@ export const TemplateEditor = ({ template, isReadOnly = false }: TemplateEditorP
               <div className="ml-auto flex flex-row gap-2">
                 {hasChanges && (
                   <Button
-                    type="default"
-                    htmlType="button"
+                    variant="default"
+                    type="button"
                     onClick={() => {
                       form.reset(INITIAL_VALUES)
                       setBodyValue((authConfig && authConfig[messageSlug]) ?? '')
@@ -459,8 +459,8 @@ export const TemplateEditor = ({ template, isReadOnly = false }: TemplateEditorP
                   </Button>
                 )}
                 <ButtonTooltip
-                  type="primary"
-                  htmlType="submit"
+                  variant="primary"
+                  type="submit"
                   disabled={!canEdit || isSavingTemplate || !hasChanges}
                   loading={isSavingTemplate}
                   tooltip={{ content: { side: 'bottom', text: saveChangesTooltip } }}
diff --git a/apps/studio/components/interfaces/Auth/Hooks/AddHookDropdown.tsx b/apps/studio/components/interfaces/Auth/Hooks/AddHookDropdown.tsx
index d002751b0fe..93203b6ed76 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/AddHookDropdown.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/AddHookDropdown.tsx
@@ -24,7 +24,7 @@ import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganizati
 interface AddHookDropdownProps {
   buttonText?: string
   align?: 'end' | 'center'
-  type?: 'primary' | 'default'
+  variant?: 'primary' | 'default'
   open?: boolean
   onOpenChange?: (open: boolean) => void
   onSelectHook: (hook: HOOK_DEFINITION_TITLE) => void
@@ -33,7 +33,7 @@ interface AddHookDropdownProps {
 export const AddHookDropdown = ({
   buttonText = 'Add hook',
   align = 'end',
-  type = 'primary',
+  variant = 'primary',
   open,
   onOpenChange,
   onSelectHook,
@@ -71,7 +71,7 @@ export const AddHookDropdown = ({
     return (
       <ButtonTooltip
         disabled
-        type={type}
+        variant={variant}
         tooltip={{
           content: { side: 'bottom', text: 'You need additional permissions to add auth hooks' },
         }}
@@ -84,7 +84,7 @@ export const AddHookDropdown = ({
   return (
     <DropdownMenu open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>
-        <Button type={type} iconRight={<ChevronDown />}>
+        <Button variant={variant} iconRight={<ChevronDown />}>
           {buttonText}
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
index 3b4dcde3670..8363f32de1c 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
@@ -492,7 +492,7 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
                           <div className="flex flex-row">
                             <Input {...field} className="rounded-r-none border-r-0" />
                             <Button
-                              type="default"
+                              variant="default"
                               size="small"
                               className="rounded-l-none text-xs"
                               onClick={() => {
@@ -517,18 +517,18 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
         <SheetFooter>
           {!isCreating && (
             <div className="flex-1">
-              <Button type="danger" onClick={() => onDelete()}>
+              <Button variant="danger" onClick={() => onDelete()}>
                 Delete hook
               </Button>
             </div>
           )}
 
-          <Button disabled={isUpdatingAuthHooks} type="default" onClick={confirmOnClose}>
+          <Button disabled={isUpdatingAuthHooks} variant="default" onClick={confirmOnClose}>
             Cancel
           </Button>
           <Button
             form={FORM_ID}
-            htmlType="submit"
+            type="submit"
             disabled={isUpdatingAuthHooks}
             loading={isUpdatingAuthHooks}
           >
diff --git a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
index bf910543a2e..79c79626086 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
@@ -105,7 +105,7 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
         </div>
         <div className="flex flex-row gap-2">
           <ButtonTooltip
-            type="default"
+            variant="default"
             disabled={!canUpdateAuthHook}
             onClick={() => onSelect()}
             tooltip={{
diff --git a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
index b4d56c94656..8f0ad3fa09a 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
@@ -143,7 +143,7 @@ export const HooksListing = () => {
             description="Use Postgres functions or HTTP endpoints to customize your authentication flow."
           >
             <AddHookDropdown
-              type="default"
+              variant="default"
               align="center"
               buttonText="Add a new hook"
               open={addHookEmptyOpen}
diff --git a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
index 4e7ab960cc8..372554d3a6d 100644
--- a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
@@ -422,13 +422,13 @@ export const MfaAuthSettingsForm = () => {
 
                 <CardFooter className="justify-end space-x-2">
                   {totpForm.formState.isDirty && (
-                    <Button type="default" onClick={() => totpForm.reset()}>
+                    <Button variant="default" onClick={() => totpForm.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={!canUpdateConfig || isUpdatingTotpForm || !totpForm.formState.isDirty}
                     loading={isUpdatingTotpForm}
                   >
@@ -569,13 +569,13 @@ export const MfaAuthSettingsForm = () => {
 
                 <CardFooter className="justify-end space-x-2">
                   {phoneForm.formState.isDirty && (
-                    <Button type="default" onClick={() => phoneForm.reset()}>
+                    <Button variant="default" onClick={() => phoneForm.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type={promptProPlanUpgrade ? 'default' : 'primary'}
-                    htmlType="submit"
+                    variant={promptProPlanUpgrade ? 'default' : 'primary'}
+                    type="submit"
                     disabled={
                       !canUpdateConfig ||
                       isUpdatingPhoneForm ||
@@ -658,13 +658,13 @@ export const MfaAuthSettingsForm = () => {
                 )}
                 <CardFooter className="justify-end space-x-2">
                   {securityForm.formState.isDirty && (
-                    <Button type="default" onClick={() => securityForm.reset()}>
+                    <Button variant="default" onClick={() => securityForm.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={
                       !canUpdateConfig || isUpdatingSecurityForm || !securityForm.formState.isDirty
                     }
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
index e97e0fdcbcf..ff6e87750ca 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
@@ -330,7 +330,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                                     />
                                     {projectRef ? (
                                       <Button
-                                        type="default"
+                                        variant="default"
                                         size="tiny"
                                         icon={<Storage strokeWidth={1.5} />}
                                         className="absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 justify-center overflow-hidden px-1 transition-all duration-150 group-hover:w-36 group-focus-within:w-36 [&_span]:hidden group-hover:[&_span]:block group-focus-within:[&_span]:block"
@@ -344,7 +344,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                                   </div>
                                   {field.value ? (
                                     <Button
-                                      type="default"
+                                      variant="default"
                                       size="tiny"
                                       icon={<Trash2 size={12} />}
                                       onClick={handleRemoveLogo}
@@ -409,7 +409,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                               />
 
                               <Button
-                                type="default"
+                                variant="default"
                                 onClick={handleRegenerateSecret}
                                 className="w-min"
                                 disabled={isRegenerating}
@@ -516,10 +516,10 @@ export const CreateOrUpdateOAuthAppSheet = ({
             </Form>
           </SheetSection>
           <SheetFooter>
-            <Button type="default" disabled={isCreating || isUpdating} onClick={onClose}>
+            <Button variant="default" disabled={isCreating || isUpdating} onClick={onClose}>
               Cancel
             </Button>
-            <Button htmlType="submit" form={FORM_ID} loading={isCreating || isUpdating}>
+            <Button type="submit" form={FORM_ID} loading={isCreating || isUpdating}>
               {isEditMode ? 'Update app' : 'Create app'}
             </Button>
           </SheetFooter>
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/LogoPicker.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/LogoPicker.tsx
index 3c5dd5305f7..34e9b4010b3 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/LogoPicker.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/LogoPicker.tsx
@@ -48,7 +48,7 @@ export function LogoPicker({ open, onOpenChange, onSelect }: StorageFilePickerPr
             {selectedBucket ? (
               <SheetHeader className="flex flex-row items-center gap-2 border-b border-overlay px-6 py-4">
                 <Button
-                  type="text"
+                  variant="text"
                   size="tiny"
                   icon={<ChevronLeft size={16} />}
                   className="shrink-0"
@@ -87,7 +87,7 @@ export function LogoPicker({ open, onOpenChange, onSelect }: StorageFilePickerPr
             {selectedBucket ? (
               <DialogHeader className="flex flex-row items-center gap-2 border-b border-overlay px-6 py-4 h-[60px]">
                 <Button
-                  type="text"
+                  variant="text"
                   size="tiny"
                   icon={<ChevronLeft size={16} />}
                   className="shrink-0"
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx
index 008715408de..96554d1f4e3 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx
@@ -48,7 +48,7 @@ export const NewOAuthAppBanner = ({ oauthApp, onClose }: NewOAuthAppBannerProps)
       }
     >
       <Button
-        type="text"
+        variant="text"
         icon={<X />}
         className="w-7 h-7 absolute top-0 right-0"
         onClick={onClose}
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
index 1b04a3d7739..1a2a128334c 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
@@ -241,7 +241,7 @@ export const OAuthAppsList = () => {
             title="OAuth Server is disabled"
             description="Enable OAuth Server to make your project act as an identity provider for third-party applications."
             actions={
-              <Button asChild type="default">
+              <Button asChild variant="default">
                 <Link href={`/project/${projectRef}/auth/oauth-server`}>OAuth Server Settings</Link>
               </Button>
             }
@@ -288,7 +288,7 @@ export const OAuthAppsList = () => {
             />
             {hasActiveFilters && (
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
                 className="px-1"
                 icon={<X />}
@@ -305,7 +305,7 @@ export const OAuthAppsList = () => {
                 side="bottom"
               >
                 <Button
-                  type="primary"
+                  variant="primary"
                   icon={<Plus />}
                   onClick={() => setShowCreateSheet(true)}
                   className="grow"
@@ -388,7 +388,7 @@ export const OAuthAppsList = () => {
                     <TableRow key={app.client_id} className="w-full">
                       <TableCell title={app.client_name}>
                         <Button
-                          type="text"
+                          variant="text"
                           className="text-link-table-cell text-sm p-0 hover:bg-transparent title [&>span]:w-full!"
                           onClick={() => setSelectedAppToEdit(app.client_id)}
                           title={app.client_name}
@@ -412,7 +412,7 @@ export const OAuthAppsList = () => {
                         <div className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center border-l @[944px]:border-l-0">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                              <Button type="default" className="px-1" icon={<MoreVertical />} />
+                              <Button variant="default" className="px-1" icon={<MoreVertical />} />
                             </DropdownMenuTrigger>
                             <DropdownMenuContent side="bottom" align="end" className="w-48">
                               <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
index 44ba297c29a..37d08c9199c 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
@@ -345,12 +345,12 @@ export const OAuthServerSettingsForm = () => {
                 )}
 
                 <CardFooter className="justify-end space-x-2">
-                  <Button type="default" onClick={() => form.reset()} disabled={isPending}>
+                  <Button variant="default" onClick={() => form.reset()} disabled={isPending}>
                     Cancel
                   </Button>
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={!canUpdateConfig || !form.formState.isDirty}
                     loading={isPending}
                   >
diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
index 10c28ecf210..ec3c456d73d 100644
--- a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
+++ b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
@@ -146,7 +146,7 @@ export const OverviewLearnMore = () => {
                           <Button
                             key={action.label}
                             className="inline-flex"
-                            type="default"
+                            variant="default"
                             icon={action.icon}
                             asChild
                           >
@@ -160,7 +160,7 @@ export const OverviewLearnMore = () => {
                           <Button
                             key={action.label}
                             onClick={action.onClick}
-                            type="default"
+                            variant="default"
                             className="inline-flex"
                             icon={action.icon}
                           >
diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
index 25166092e76..2873f7bf9c7 100644
--- a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
+++ b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
@@ -103,7 +103,7 @@ const LogsLink = ({ href }: { href: string }) => (
   <Tooltip>
     <TooltipTrigger asChild>
       <Button
-        type="text"
+        variant="text"
         size="tiny"
         className="p-1.5 text-foreground-lighter hover:text-foreground"
         asChild
diff --git a/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx b/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
index dcddd12a6df..571222901c7 100644
--- a/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
@@ -379,15 +379,15 @@ export const PasskeysSettingsForm = () => {
 
           <CardFooter className="justify-end space-x-2">
             <Button
-              type="default"
+              variant="default"
               onClick={() => form.reset(buildPasskeysFormValues(authConfig, project))}
               disabled={isPending}
             >
               Cancel
             </Button>
             <Button
-              type="primary"
-              htmlType="submit"
+              variant="primary"
+              type="submit"
               disabled={!canUpdateConfig || !form.formState.isDirty}
               loading={isPending}
             >
diff --git a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
index 52d2abcf147..8041604cc19 100644
--- a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
@@ -266,13 +266,13 @@ export const PerformanceSettingsForm = () => {
 
               <CardFooter className="justify-end space-x-2">
                 {requestDurationForm.formState.isDirty && (
-                  <Button type="default" onClick={() => requestDurationForm.reset()}>
+                  <Button variant="default" onClick={() => requestDurationForm.reset()}>
                     Cancel
                   </Button>
                 )}
                 <Button
-                  type={promptUpgrade ? 'default' : 'primary'}
-                  htmlType="submit"
+                  variant={promptUpgrade ? 'default' : 'primary'}
+                  type="submit"
                   disabled={
                     !canUpdateConfig ||
                     isUpdatingRequestDurationForm ||
@@ -416,13 +416,13 @@ export const PerformanceSettingsForm = () => {
 
               <CardFooter className="justify-end space-x-2">
                 {databaseForm.formState.isDirty && (
-                  <Button type="default" onClick={() => databaseForm.reset()}>
+                  <Button variant="default" onClick={() => databaseForm.reset()}>
                     Cancel
                   </Button>
                 )}
                 <Button
-                  type={promptUpgrade ? 'default' : 'primary'}
-                  htmlType="submit"
+                  variant={promptUpgrade ? 'default' : 'primary'}
+                  type="submit"
                   disabled={
                     !canUpdateConfig || isUpdatingDatabaseForm || !databaseForm.formState.isDirty
                   }
diff --git a/apps/studio/components/interfaces/Auth/Policies/Policies.tsx b/apps/studio/components/interfaces/Auth/Policies/Policies.tsx
index 9c73bc7b7d9..084d6b57ffe 100644
--- a/apps/studio/components/interfaces/Auth/Policies/Policies.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/Policies.tsx
@@ -136,7 +136,7 @@ export const Policies = ({
             RLS Policies control per-user access to table rows. Create a table in this schema first
             before creating a policy.
           </p>
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href={`/project/${ref}/editor`}>Create a table</Link>
           </Button>
         </CardContent>
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
index 4cb1b279e9a..dd9f848b7cb 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
@@ -14,11 +14,11 @@ const PolicyEditorFooter = ({
 }: PolicyEditorFooterProps) => (
   <DialogFooter>
     {showTemplates && (
-      <Button type="default" onClick={onViewTemplates}>
+      <Button variant="default" onClick={onViewTemplates}>
         View templates
       </Button>
     )}
-    <Button type="primary" onClick={onReviewPolicy}>
+    <Button variant="primary" onClick={onReviewPolicy}>
       Review
     </Button>
   </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
index 75bca0fd602..ba194252cb3 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
@@ -56,7 +56,7 @@ const PolicyEditorModalTitle = ({
       </h4>
       <div className="flex items-center gap-x-2 pr-6">
         {showAssistantPreview && view === POLICY_MODAL_VIEWS.EDITOR && (
-          <Button type="default" icon={<FlaskConical />} onClick={onToggleFeaturePreviewModal}>
+          <Button variant="default" icon={<FlaskConical />} onClick={onToggleFeaturePreviewModal}>
             Try Supabase Assistant
           </Button>
         )}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
index 01340314da6..a590b3ad327 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
@@ -157,7 +157,7 @@ export const PolicyDetailsV2 = ({
                     <Popover open={open} onOpenChange={setOpen} modal={false}>
                       <PopoverTrigger asChild>
                         <Button
-                          type="default"
+                          variant="default"
                           disabled={!canUpdatePolicies}
                           className="w-full [&>span]:w-full h-[38px] text-sm"
                           iconRight={
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
index 57655955d15..ea7da926e6f 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
@@ -144,7 +144,7 @@ export const PolicyTemplates = ({
                 </SimpleCodeBlock>
                 <CopyButton
                   iconOnly
-                  type="default"
+                  variant="default"
                   className="px-1 absolute top-1.5 right-1.5"
                   text={template.statement}
                 />
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/QueryError.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/QueryError.tsx
index 260698852a6..3edd410b0d8 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/QueryError.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/QueryError.tsx
@@ -53,7 +53,7 @@ export const QueryError = ({
               <CollapsibleTrigger asChild>
                 <Button
                   size="tiny"
-                  type="outline"
+                  variant="outline"
                   className={cn('group', styles['ai-icon__container--allow-hover-effect'])}
                 >
                   {open ? 'Hide error details' : 'Show error details'}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
index fccdb111fe6..6c13c6756ef 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
@@ -520,7 +520,7 @@ export const PolicyEditorPanel = memo(function ({
                     )}
                     <SheetFooter className="flex items-center justify-end! px-5 py-4 w-full border-t">
                       <Button
-                        type="default"
+                        variant="default"
                         disabled={isExecuting || isUpdating}
                         onClick={confirmOnClose}
                       >
@@ -529,7 +529,7 @@ export const PolicyEditorPanel = memo(function ({
 
                       <ButtonTooltip
                         form={FORM_ID}
-                        htmlType="submit"
+                        type="submit"
                         loading={isExecuting || isUpdating}
                         disabled={!canUpdatePolicies || isExecuting || isUpdating}
                         tooltip={{
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
index 3b097cd5a21..c0366f3add0 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
@@ -54,10 +54,15 @@ export const PolicyReview = ({
         </div>
       </DialogSection>
       <DialogFooter>
-        <Button type="default" onClick={onSelectBack}>
+        <Button variant="default" onClick={onSelectBack}>
           Back to edit
         </Button>
-        <Button type="primary" disabled={isEmpty(policy)} onClick={onSavePolicy} loading={isSaving}>
+        <Button
+          variant="primary"
+          disabled={isEmpty(policy)}
+          onClick={onSavePolicy}
+          loading={isSaving}
+        >
           Save policy
         </Button>
       </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicySelection.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
index 90559aee151..c1a7fc666cf 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
@@ -71,10 +71,10 @@ const PolicySelection = ({
             Create RLS policies for your tables with the help of AI
           </AlertDescription>
           <div className="flex items-center gap-x-2 mt-3">
-            <Button type="default" onClick={onToggleFeaturePreviewModal}>
+            <Button variant="default" onClick={onToggleFeaturePreviewModal}>
               Toggle feature preview
             </Button>
-            <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+            <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
               <a
                 href="https://supabase.com/blog/studio-introducing-assistant#introducing-the-supabase-assistant"
                 target="_blank"
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
index d37b04f4a02..6a2a3a40da3 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
@@ -70,7 +70,7 @@ export const PolicyRow = ({
       <TableCell className="w-[40%] truncate">
         <div className="flex items-center gap-x-2 min-w-0">
           <Button
-            type="text"
+            variant="text"
             className="text-foreground text-sm p-0 hover:bg-transparent w-full truncate justify-start"
             onClick={() => onSelectEditPolicy(policy)}
           >
@@ -123,7 +123,7 @@ export const PolicyRow = ({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 className="px-1.5"
                 icon={<MoreVertical />}
                 data-testid={`policy-${policy.name}-actions-button`}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
index f3e67d0d64c..fc4df51adea 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
@@ -80,7 +80,7 @@ export const PolicyTableRowHeader = ({
           <div className="flex flex-row justify-end gap-x-2">
             {!isRealtimeMessagesTable && (
               <ButtonTooltip
-                type="default"
+                variant="default"
                 disabled={!canToggleRLS}
                 onClick={() => onSelectToggleRLS(table)}
                 data-testid={`${table.name}-toggle-rls`}
@@ -97,7 +97,7 @@ export const PolicyTableRowHeader = ({
               </ButtonTooltip>
             )}
             <ButtonTooltip
-              type="default"
+              variant="default"
               disabled={!canToggleRLS || !canCreatePolicies}
               onClick={() => onSelectCreatePolicy(table)}
               data-testid={`${table.name}-create-policy`}
@@ -116,7 +116,7 @@ export const PolicyTableRowHeader = ({
             </ButtonTooltip>
 
             <ButtonTooltip
-              type="default"
+              variant="default"
               className="px-1"
               onClick={() => {
                 openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
index e3537d8f7a0..201e0adbb9f 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
@@ -35,7 +35,7 @@ const PolicyTemplates = ({
           This will override any existing code you've written
         </span>
         <Button
-          type="primary"
+          variant="primary"
           disabled={isEmpty(selectedTemplate)}
           onClick={() => onUseTemplate(selectedTemplate)}
         >
diff --git a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
index 5ecf33fa254..1b4876e86e8 100644
--- a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
@@ -358,7 +358,7 @@ export const ProtectionAuthSettingsForm = () => {
                           {field.value ? 'Enabled' : 'Disabled'}
                         </Badge>
                         <Link href={`/project/${projectRef}/auth/providers?provider=Email`}>
-                          <Button type="default">Configure in email provider</Button>
+                          <Button variant="default">Configure in email provider</Button>
                         </Link>
                       </div>
                     </FormItemLayout>
@@ -368,13 +368,13 @@ export const ProtectionAuthSettingsForm = () => {
 
               <CardFooter className="justify-end space-x-2">
                 {isDirty && (
-                  <Button type="default" onClick={() => protectionForm.reset()}>
+                  <Button variant="default" onClick={() => protectionForm.reset()}>
                     Cancel
                   </Button>
                 )}
                 <Button
-                  type="primary"
-                  htmlType="submit"
+                  variant="primary"
+                  type="submit"
                   disabled={!canUpdateConfig || isUpdatingConfig || !isDirty}
                   loading={isUpdatingConfig}
                 >
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTableCard.tsx b/apps/studio/components/interfaces/Auth/RLSTester/RLSTableCard.tsx
index b57ae9c168e..e1a9da41bea 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/RLSTableCard.tsx
+++ b/apps/studio/components/interfaces/Auth/RLSTester/RLSTableCard.tsx
@@ -170,7 +170,7 @@ const TableAccessPolicySummary = ({
               </p>
             </div>
             <ButtonTooltip
-              type="text"
+              variant="text"
               icon={<Edit />}
               className="w-7"
               tooltip={{ content: { side: 'bottom', text: 'Edit policy' } }}
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx b/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx
index 098a170034f..d56074cc27c 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx
@@ -154,7 +154,7 @@ const RLSTesterSheetContents = ({ handleSelectEditPolicy }: RLSTesterSheetProps)
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button type="default" icon={<Code />}>
+        <Button variant="default" icon={<Code />}>
           Test
         </Button>
       </SheetTrigger>
@@ -290,7 +290,7 @@ const RLSTesterSheetContents = ({ handleSelectEditPolicy }: RLSTesterSheetProps)
         </div>
 
         <SheetFooter className="sm:justify-between">
-          <Button asChild type="default" icon={<ExternalLink />}>
+          <Button asChild variant="default" icon={<ExternalLink />}>
             <a
               target="_blank"
               rel="noopener noreferrer"
@@ -300,11 +300,11 @@ const RLSTesterSheetContents = ({ handleSelectEditPolicy }: RLSTesterSheetProps)
             </a>
           </Button>
           <div className="flex items-center gap-x-2">
-            <Button type="default" disabled={isLoading} onClick={() => setOpen(false)}>
+            <Button variant="default" disabled={isLoading} onClick={() => setOpen(false)}>
               Cancel
             </Button>
             <Button
-              type="primary"
+              variant="primary"
               loading={isInferring || isLoading}
               disabled={format === 'lib' && !inferredSQL}
               onClick={onRunQuery}
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/SandboxManagement.tsx b/apps/studio/components/interfaces/Auth/RLSTester/SandboxManagement.tsx
index a7ce45ebcc9..6e367139c36 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/SandboxManagement.tsx
+++ b/apps/studio/components/interfaces/Auth/RLSTester/SandboxManagement.tsx
@@ -16,7 +16,7 @@ export const SandboxManagement = () => {
         layout="horizontal"
         className="min-h-min border-none [&>div>div>div>div>p]:!mb-0"
         actions={[
-          <Button key="set-up" type="default" onClick={() => startSandbox()}>
+          <Button key="set-up" variant="default" onClick={() => startSandbox()}>
             Set up sandbox
           </Button>,
         ]}
@@ -58,7 +58,7 @@ export const SandboxManagement = () => {
         description={error ?? 'Please try again'}
         className="min-h-min border-none"
         actions={[
-          <Button key="set-up" type="default" onClick={() => startSandbox()}>
+          <Button key="set-up" variant="default" onClick={() => startSandbox()}>
             Retry set up
           </Button>,
         ]}
@@ -75,7 +75,7 @@ export const SandboxManagement = () => {
       actions={[
         <ButtonTooltip
           key="destroy"
-          type="default"
+          variant="default"
           icon={<LogOut />}
           className="w-7"
           disabled={isSyncing}
@@ -84,7 +84,7 @@ export const SandboxManagement = () => {
         />,
         <ButtonTooltip
           key="refresh"
-          type="default"
+          variant="default"
           icon={<RefreshCw />}
           className="w-7"
           loading={isSyncing}
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx b/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
index bd26666b3da..1d2a88544b2 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
+++ b/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
@@ -71,7 +71,7 @@ export const UserSelector = () => {
         <PopoverTrigger asChild>
           <Button
             block
-            type="default"
+            variant="default"
             role="combobox"
             size="small"
             aria-expanded={open}
diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
index 9b60e029926..49fbcf5abd3 100644
--- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
@@ -263,7 +263,7 @@ export const RateLimits = () => {
                                     Enable email-based logins to update this rate limit
                                   </p>
                                   <div className="mt-3">
-                                    <Button asChild type="default" size="tiny">
+                                    <Button asChild variant="default" size="tiny">
                                       <Link href={`/project/${projectRef}/auth/providers`}>
                                         View auth providers
                                       </Link>
@@ -282,12 +282,12 @@ export const RateLimits = () => {
                                     your email rate limit
                                   </p>
                                   <div className="mt-3 flex gap-2">
-                                    <Button asChild type="default" size="tiny">
+                                    <Button asChild variant="default" size="tiny">
                                       <Link href={`/project/${projectRef}/auth/smtp`}>
                                         View SMTP settings
                                       </Link>
                                     </Button>
-                                    <Button asChild type="default" size="tiny">
+                                    <Button asChild variant="default" size="tiny">
                                       <Link href={`/project/${projectRef}/auth/hooks`}>
                                         View hooks
                                       </Link>
@@ -338,7 +338,7 @@ export const RateLimits = () => {
                                 Enable phone-based logins to update this rate limit
                               </p>
                               <div className="mt-3">
-                                <Button asChild type="default" size="tiny">
+                                <Button asChild variant="default" size="tiny">
                                   <Link href={`/project/${projectRef}/auth/providers`}>
                                     View auth providers
                                   </Link>
@@ -481,7 +481,7 @@ export const RateLimits = () => {
                                 control this rate limit.
                               </p>
                               <div className="mt-3">
-                                <Button asChild type="default" size="tiny">
+                                <Button asChild variant="default" size="tiny">
                                   <Link href={`/project/${projectRef}/auth/providers`}>
                                     View auth settings
                                   </Link>
@@ -576,7 +576,7 @@ export const RateLimits = () => {
                                 control this rate limit.
                               </p>
                               <div className="mt-3">
-                                <Button asChild type="default" size="tiny">
+                                <Button asChild variant="default" size="tiny">
                                   <Link href={`/project/${projectRef}/auth/providers`}>
                                     View Auth provider settings
                                   </Link>
@@ -592,13 +592,13 @@ export const RateLimits = () => {
 
                 <CardFooter className="justify-end space-x-2">
                   {rateLimitForm.formState.isDirty && (
-                    <Button type="default" onClick={() => rateLimitForm.reset()}>
+                    <Button variant="default" onClick={() => rateLimitForm.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={
                       !canUpdateConfig || isUpdatingConfig || !rateLimitForm.formState.isDirty
                     }
@@ -657,13 +657,13 @@ export const RateLimits = () => {
                 </CardContent>
                 <CardFooter className="justify-end space-x-2">
                   {ipForwardingForm.formState.isDirty && (
-                    <Button type="default" onClick={() => ipForwardingForm.reset()}>
+                    <Button variant="default" onClick={() => ipForwardingForm.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={
                       !canUpdateConfig || isUpdatingConfig || !ipForwardingForm.formState.isDirty
                     }
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
index de870593bfd..fcd9160d02b 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
@@ -137,7 +137,7 @@ export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalPr
             <DialogFooter>
               <Button
                 block
-                htmlType="submit"
+                type="submit"
                 size="small"
                 disabled={isUpdatingConfig}
                 loading={isUpdatingConfig}
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
index c698c5db9bd..b3f8efaa451 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
@@ -68,11 +68,11 @@ export const RedirectUrlList = ({
       <ValueContainer className="py-3 flex items-center justify-end">
         {selectedUrls.length > 0 ? (
           <div className="flex items-center gap-x-2">
-            <Button type="default" onClick={() => onSelectClearSelection()}>
+            <Button variant="default" onClick={() => onSelectClearSelection()}>
               Clear selection
             </Button>
             <ButtonTooltip
-              type="default"
+              variant="default"
               disabled={!canUpdateConfig}
               tooltip={{
                 content: {
diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
index 03b333ed17a..dc987721b65 100644
--- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
@@ -259,13 +259,13 @@ export const SessionsAuthSettingsForm = () => {
                 </CardContent>
                 <CardFooter className="justify-end space-x-2">
                   {refreshTokenForm.formState.isDirty && (
-                    <Button type="default" onClick={() => refreshTokenForm.reset()}>
+                    <Button variant="default" onClick={() => refreshTokenForm.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={
                       !canUpdateConfig ||
                       isUpdatingRefreshTokens ||
@@ -389,13 +389,13 @@ export const SessionsAuthSettingsForm = () => {
 
                 <CardFooter className="justify-end space-x-2">
                   {userSessionsForm.formState.isDirty && (
-                    <Button type="default" onClick={() => userSessionsForm.reset()}>
+                    <Button variant="default" onClick={() => userSessionsForm.reset()}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type={promptProPlanUpgrade ? 'default' : 'primary'}
-                    htmlType="submit"
+                    variant={promptProPlanUpgrade ? 'default' : 'primary'}
+                    type="submit"
                     disabled={
                       !canUpdateConfig ||
                       isUpdatingUserSessions ||
diff --git a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
index 6aa34af0ee4..84bf7fdcf7f 100644
--- a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
+++ b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
@@ -126,13 +126,13 @@ const SiteUrl = () => {
 
               <CardFooter className="justify-end space-x-2">
                 {isDirty && (
-                  <Button type="default" onClick={() => siteUrlForm.reset()}>
+                  <Button variant="default" onClick={() => siteUrlForm.reset()}>
                     Cancel
                   </Button>
                 )}
                 <Button
-                  type="primary"
-                  htmlType="submit"
+                  variant="primary"
+                  type="submit"
                   disabled={!canUpdateConfig || isUpdatingSiteUrl || !isDirty}
                   loading={isUpdatingSiteUrl}
                 >
diff --git a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
index 65df8f3b71d..8672aeb72c9 100644
--- a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
@@ -519,7 +519,7 @@ export const SmtpForm = () => {
                 <div className="flex items-center gap-x-2">
                   {isDirty && (
                     <Button
-                      type="default"
+                      variant="default"
                       onClick={() => {
                         form.reset()
                         setEnableSmtp(isSmtpEnabled(authConfig))
@@ -529,8 +529,8 @@ export const SmtpForm = () => {
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     loading={isUpdatingConfig}
                     disabled={!canUpdateConfig || !isDirty}
                   >
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AddIntegrationDropdown.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AddIntegrationDropdown.tsx
index d2ebc0202b7..16a5612ae7b 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AddIntegrationDropdown.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AddIntegrationDropdown.tsx
@@ -20,7 +20,7 @@ import {
 interface AddIntegrationDropdownProps {
   buttonText?: string
   align?: 'end' | 'center'
-  type?: 'primary' | 'default'
+  variant?: 'primary' | 'default'
   open?: boolean
   onOpenChange?: (open: boolean) => void
   onSelectIntegrationType: (type: INTEGRATION_TYPES) => void
@@ -49,7 +49,7 @@ const ProviderDropdownItem = ({
 }
 
 export const AddIntegrationDropdown = ({
-  type = 'primary',
+  variant = 'primary',
   align = 'end',
   open,
   onOpenChange,
@@ -58,7 +58,7 @@ export const AddIntegrationDropdown = ({
   return (
     <DropdownMenu open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>
-        <Button type={type} iconRight={<ChevronDown />}>
+        <Button variant={variant} iconRight={<ChevronDown />}>
           Add provider
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
index 6cbbdfab020..c957e302795 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
@@ -63,7 +63,7 @@ export const AwsRegionSelector = ({
       <PopoverTrigger asChild>
         <FormControl>
           <Button
-            type="default"
+            variant="default"
             role="combobox"
             aria-expanded={open}
             aria-controls={listboxId}
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
index ddd86900a7f..8fb966fb9c3 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
@@ -132,7 +132,7 @@ export const CreateAuth0IntegrationDialog = ({
                   <FormItemLayout label="Auth0 domain name">
                     <div className="flex flex-row">
                       <Button
-                        type="default"
+                        variant="default"
                         size="small"
                         className="px-2 text-foreground-light rounded-r-none"
                         onClick={() => form.setFocus('auth0DomainName')}
@@ -143,7 +143,7 @@ export const CreateAuth0IntegrationDialog = ({
                         <Input className="border-l-0 rounded-none border-r-0 z-50" {...field} />
                       </FormControl>
                       <Button
-                        type="default"
+                        variant="default"
                         size="small"
                         className="px-2 text-foreground-light rounded-l-none"
                         onClick={() => form.setFocus('auth0DomainName')}
@@ -160,16 +160,16 @@ export const CreateAuth0IntegrationDialog = ({
         <DialogFooter>
           {!isCreating && (
             <div className="flex-1">
-              <Button type="danger" onClick={() => onDelete()} icon={<Trash />}>
+              <Button variant="danger" onClick={() => onDelete()} icon={<Trash />}>
                 Remove connection
               </Button>
             </div>
           )}
 
-          <Button disabled={isPending} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} variant="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
+          <Button form={FORM_ID} type="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
index 85680336f94..d8b184185af 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
@@ -144,7 +144,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
                   <FormItemLayout label="Amazon Cognito User Pool ID">
                     <div className="flex flex-row">
                       <Button
-                        type="default"
+                        variant="default"
                         size="small"
                         className="px-2 text-foreground-light rounded-r-none"
                         onClick={() => form.setFocus('awsCognitoUserPoolId')}
@@ -173,16 +173,16 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
         <DialogFooter>
           {!isCreating && (
             <div className="flex-1">
-              <Button type="danger" onClick={() => onDelete()} icon={<Trash />}>
+              <Button variant="danger" onClick={() => onDelete()} icon={<Trash />}>
                 Remove connection
               </Button>
             </div>
           )}
 
-          <Button disabled={isPending} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} variant="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
+          <Button form={FORM_ID} type="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx
index 90ed0cdc739..f17198e96c9 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx
@@ -136,10 +136,10 @@ export const CreateClerkAuthIntegrationDialog = ({
           </Form>
         </DialogSection>
         <DialogFooter>
-          <Button disabled={isPending} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} variant="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
+          <Button form={FORM_ID} type="submit" disabled={isPending} loading={isPending}>
             Create connection
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
index cac0be1077c..42cab1a17b5 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
@@ -145,16 +145,16 @@ export const CreateFirebaseAuthIntegrationDialog = ({
         <DialogFooter>
           {!isCreating && (
             <div className="flex-1">
-              <Button type="danger" onClick={() => onDelete()} icon={<Trash />}>
+              <Button variant="danger" onClick={() => onDelete()} icon={<Trash />}>
                 Remove connection
               </Button>
             </div>
           )}
 
-          <Button disabled={isPending} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} variant="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
+          <Button form={FORM_ID} type="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx
index 80a463ce007..c87deec6c11 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx
@@ -154,16 +154,16 @@ export const CreateWorkOSIntegrationDialog = ({
         <DialogFooter>
           {!isCreating && (
             <div className="flex-1">
-              <Button type="danger" onClick={() => onDelete()} icon={<Trash />}>
+              <Button variant="danger" onClick={() => onDelete()} icon={<Trash />}>
                 Remove connection
               </Button>
             </div>
           )}
 
-          <Button disabled={isPending} type="default" onClick={() => onClose()}>
+          <Button disabled={isPending} variant="default" onClick={() => onClose()}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={isPending} loading={isPending}>
+          <Button form={FORM_ID} type="submit" disabled={isPending} loading={isPending}>
             {isCreating ? 'Create connection' : 'Update connection'}
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx
index 42973f7e8cd..8434ae41fc8 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx
@@ -201,7 +201,7 @@ export const IntegrationCard = ({
           <div>
             {/* TODO: this should be a configure integration where it would show the sheet and the user can disable or delete the integration
               but there's no "edit integration" endpoing for now. */}
-            <Button type="danger" disabled={!canUpdateConfig} onClick={() => onDelete()}>
+            <Button variant="danger" disabled={!canUpdateConfig} onClick={() => onDelete()}>
               Delete integration
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
index eac170a5686..7dcc4640d47 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
@@ -120,7 +120,7 @@ export const ThirdPartyAuthForm = () => {
             >
               <AddIntegrationDropdown
                 align="center"
-                type="default"
+                variant="default"
                 onSelectIntegrationType={setSelectedIntegration}
               />
             </EmptyStatePresentational>
diff --git a/apps/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx b/apps/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx
index a0e90fa8f01..1f10446bf3d 100644
--- a/apps/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx
@@ -36,7 +36,7 @@ export const AddUserDropdown = () => {
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="primary" iconRight={<ChevronDown size={14} strokeWidth={1.5} />}>
+          <Button variant="primary" iconRight={<ChevronDown size={14} strokeWidth={1.5} />}>
             Add user
           </Button>
         </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
index dc56752b054..cc928dff45a 100644
--- a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
@@ -146,10 +146,10 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
               </div>
             </DialogSection>
             <DialogFooter>
-              <Button type="default" disabled={isBanningUser} onClick={() => onClose()}>
+              <Button variant="default" disabled={isBanningUser} onClick={() => onClose()}>
                 Cancel
               </Button>
-              <Button type="warning" htmlType="submit" loading={isBanningUser}>
+              <Button variant="warning" type="submit" loading={isBanningUser}>
                 Confirm ban
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
index e29a13c370c..f076fcd73ef 100644
--- a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
@@ -158,7 +158,7 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
             <Button
               block
               size="small"
-              htmlType="submit"
+              type="submit"
               loading={isCreatingUser}
               disabled={!canCreateUsers || isCreatingUser}
             >
diff --git a/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
index 30548241eef..f2f04be16d7 100644
--- a/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
@@ -91,12 +91,12 @@ const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => {
           </DialogSection>
 
           <DialogFooter>
-            <Button type="default" onClick={handleToggle}>
+            <Button variant="default" onClick={handleToggle}>
               Cancel
             </Button>
             <Button
               form={formId}
-              htmlType="submit"
+              type="submit"
               loading={isInviting}
               disabled={!canInviteUsers || isInviting}
             >
diff --git a/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx b/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx
index 6190cd408fe..216cf0232c6 100644
--- a/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx
@@ -39,7 +39,7 @@ export const SortDropdown = ({
     return (
       <ButtonTooltip
         disabled
-        type="default"
+        variant="default"
         icon={<ArrowDownNarrowWide />}
         tooltip={{
           content: {
diff --git a/apps/studio/components/interfaces/Auth/Users/UserHeader.tsx b/apps/studio/components/interfaces/Auth/Users/UserHeader.tsx
index 94110402912..1b1a721d56c 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserHeader.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserHeader.tsx
@@ -20,7 +20,7 @@ export const UserHeader = ({ user }: { user: User }) => {
           <p>{user.phone}</p>
           <CopyButton
             iconOnly
-            type="text"
+            variant="text"
             icon={<Copy />}
             className="px-1"
             text={user?.phone ?? ''}
@@ -33,7 +33,7 @@ export const UserHeader = ({ user }: { user: User }) => {
             <p className="text-foreground-light text-sm">{user.id}</p>
             <CopyButton
               iconOnly
-              type="text"
+              variant="text"
               icon={<Copy />}
               className="px-1"
               text={user?.id ?? ''}
@@ -49,7 +49,7 @@ export const UserHeader = ({ user }: { user: User }) => {
             </p>
             <CopyButton
               iconOnly
-              type="text"
+              variant="text"
               icon={<Copy />}
               className="px-1"
               text={user?.email ?? ''}
diff --git a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
index f840a241be2..ac14ea57465 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
@@ -62,7 +62,7 @@ export const UserLogs = ({ user }: UserLogsProps) => {
           </p>
         </div>
 
-        <Button asChild type="default" className="w-min">
+        <Button asChild variant="default" className="w-min">
           <Link
             href={`/project/${ref}/logs/explorer?q=${encodeURIComponent(API_LOGS_QUERY(user.id ?? ''))}`}
           >
@@ -85,7 +85,7 @@ export const UserLogs = ({ user }: UserLogsProps) => {
         <div className="flex items-center justify-between">
           <div className="flex items-center">
             <Button
-              type={'status_code' in filters ? 'default' : 'secondary'}
+              variant={'status_code' in filters ? 'default' : 'secondary'}
               className="rounded-r-none border-r-0"
               disabled={isLoadingAuthLogs}
               onClick={() => setFilters({ search_query: user.id })}
@@ -94,7 +94,7 @@ export const UserLogs = ({ user }: UserLogsProps) => {
             </Button>
             <div className="border-button border border-l-0 py-3" />
             <Button
-              type={'status_code' in filters ? 'secondary' : 'default'}
+              variant={'status_code' in filters ? 'secondary' : 'default'}
               className="rounded-l-none border-l-0"
               disabled={isLoadingAuthLogs}
               onClick={() =>
@@ -108,7 +108,7 @@ export const UserLogs = ({ user }: UserLogsProps) => {
             </Button>
           </div>
           <Button
-            type="default"
+            variant="default"
             loading={isLoadingAuthLogs}
             disabled={isLoadingAuthLogs}
             icon={<RefreshCw />}
@@ -164,7 +164,7 @@ export const UserLogs = ({ user }: UserLogsProps) => {
                       {`${log.path} | ${log.msg}`}
 
                       <ButtonTooltip
-                        type="outline"
+                        variant="outline"
                         asChild
                         tooltip={{ content: { text: 'Open in logs' } }}
                         className="px-1.5 absolute right-0 top-0 opacity-0 group-hover:opacity-100 transition bg-background focus-visible:opacity-100"
@@ -181,7 +181,7 @@ export const UserLogs = ({ user }: UserLogsProps) => {
             <Button
               block
               asChild
-              type="outline"
+              variant="outline"
               className="transition rounded-t-none text-foreground-light hover:text-foreground"
             >
               <Link href={`/project/${ref}/logs/auth-logs?s=${user.id}`}>See more logs</Link>
diff --git a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx
index 17f3c42aefd..2b7808c3da2 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx
@@ -263,7 +263,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
                     {providerName === 'SAML' ? 'SSO' : 'OAuth'}
                   </p>
                   {authenticationSignInProviders && (
-                    <Button asChild type="default" className="mt-2">
+                    <Button asChild variant="default" className="mt-2">
                       <Link
                         href={`/project/${projectRef}/auth/providers?provider=${provider.name === 'SAML' ? 'SAML 2.0' : provider.name}`}
                       >
@@ -420,7 +420,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
             description="User will no longer have access to the project"
             button={{
               icon: <Trash />,
-              type: 'danger',
+              variant: 'danger',
               text: 'Delete user',
               disabled: !canRemoveUser,
               onClick: () => setIsDeleteModalOpen(true),
@@ -505,7 +505,7 @@ export const RowData = ({ property, value }: { property: string; value?: string
             {!!value && (
               <CopyButton
                 iconOnly
-                type="text"
+                variant="text"
                 icon={<Copy />}
                 className="transition opacity-0 group-hover:opacity-100 px-1"
                 text={value}
@@ -530,7 +530,7 @@ export const RowAction = ({
   description: string
   button: {
     icon: ReactNode
-    type?: ComponentProps<typeof Button>['type']
+    variant?: ComponentProps<typeof Button>['variant']
     text: string
     disabled?: boolean
     isLoading?: boolean
@@ -554,7 +554,7 @@ export const RowAction = ({
       </div>
 
       <ButtonTooltip
-        type={button?.type ?? 'default'}
+        variant={button?.variant ?? 'default'}
         icon={success ? <Check className="text-brand" /> : button.icon}
         loading={button.isLoading ?? false}
         onClick={button.onClick}
diff --git a/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx b/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx
index c2a6bd334e3..be3636aaa4e 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx
@@ -59,7 +59,7 @@ export const UserPanel = () => {
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize="35" maxSize="45" minSize="35" className="bg-studio border-t">
         <Button
-          type="text"
+          variant="text"
           className="absolute top-3 right-3 px-1"
           icon={<X />}
           onClick={() => setSelectedId(null)}
@@ -124,7 +124,7 @@ export const UserPanel = () => {
                     className="mr-2"
                   />
                   <Button
-                    type="text"
+                    variant="text"
                     disabled={!searchQuery}
                     onClick={() => setSearchQuery('')}
                     className="text-xs"
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx b/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx
index c2ce363c573..68fc752636e 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx
@@ -82,7 +82,7 @@ export const UsersFooter = ({
                   <TooltipTrigger asChild>
                     <Button
                       size="tiny"
-                      type="text"
+                      variant="text"
                       className="px-1.5"
                       icon={<HelpCircle />}
                       onClick={() => {
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx b/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx
index ae0f97651af..7c51f3f1307 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx
@@ -76,7 +76,7 @@ export const HeaderCell = ({
         >
           <DropdownMenuTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               icon={<ChevronDown />}
               className="p-0 h-5 w-5"
               onClick={() => setOpen(!open)}
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx b/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx
index 71b5be725b3..28c09b03e7b 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx
@@ -175,7 +175,7 @@ export const UsersSearch = forwardRef<HTMLInputElement, UsersSearchProps>(functi
           search ? (
             <Button
               size="tiny"
-              type="text"
+              variant="text"
               className="p-0 h-5 w-5"
               icon={<X className={cn(searchInvalid ? 'text-red-900' : '')} />}
               onClick={() => {
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
index eb37806211c..71adece92db 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
@@ -544,7 +544,7 @@ export const UsersV2 = () => {
                 icon={<WandSparklesIcon />}
                 onClick={() => setShowCreateIndexesModal(true)}
                 loading={isUpdatingAuthConfig}
-                type="default"
+                variant="default"
               >
                 Upgrade search
               </Button>
@@ -562,7 +562,7 @@ export const UsersV2 = () => {
                 on the number of users in your project.
               </div>
 
-              <Button type="link" iconRight={<ExternalLinkIcon />} asChild>
+              <Button variant="link" iconRight={<ExternalLinkIcon />} asChild>
                 <Link
                   href={`/project/${projectRef}/logs/explorer?q=${encodeURI(INDEX_WORKER_LOGS_SEARCH_STRING)}`}
                   target="_blank"
@@ -577,11 +577,11 @@ export const UsersV2 = () => {
         <div className="bg-surface-200 py-3 px-4 md:px-6 flex flex-col lg:flex-row lg:items-start justify-between gap-2">
           {selectedUsers.size > 0 ? (
             <div className="flex items-center gap-x-2">
-              <Button type="default" icon={<Trash />} onClick={() => setShowDeleteModal(true)}>
+              <Button variant="default" icon={<Trash />} onClick={() => setShowDeleteModal(true)}>
                 Delete {selectedUsers.size} users
               </Button>
               <ButtonTooltip
-                type="default"
+                variant="default"
                 icon={<X />}
                 className="px-1.5"
                 onClick={() => setSelectedUsers(new Set([]))}
@@ -749,7 +749,7 @@ export const UsersV2 = () => {
                 <ButtonTooltip
                   size="tiny"
                   icon={<RefreshCw />}
-                  type="default"
+                  variant="default"
                   className="w-7"
                   loading={isRefetching && !isFetchingNextPage}
                   onClick={handleRefresh}
diff --git a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
index 792fa3eae53..f859194cca2 100644
--- a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
@@ -236,9 +236,9 @@ const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps
       </DialogSection>
       <DialogFooter>
         <Button
-          htmlType="button"
+          type="button"
           size="small"
-          type="default"
+          variant="default"
           onClick={onCancel}
           block
           disabled={isSaving}
@@ -247,9 +247,9 @@ const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps
         </Button>
         <Button
           block
-          htmlType="button"
+          type="button"
           size="small"
-          type="primary"
+          variant="primary"
           loading={isSaving}
           disabled={isSaving}
           onClick={handleSubmit}
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx
index 4c9b0429188..16f42fb619b 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CreditCard.tsx
@@ -155,7 +155,7 @@ const CreditCard = ({
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="outline"
+                  variant="outline"
                   className="hover:border-muted px-1"
                   icon={<MoreHorizontal />}
                   aria-label="More options"
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx
index fe635e1d8ef..cbf2058174b 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx
@@ -65,7 +65,7 @@ const CurrentPaymentMethod = () => {
         />
       )}
 
-      <Button type="outline" asChild>
+      <Button variant="outline" asChild>
         {subscription?.payment_method_type === 'invoice' ? (
           <SupportLink
             queryParams={{
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
index 5990e93691b..a8b9da11623 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -395,7 +395,7 @@ export const NewPaymentMethodElement = forwardRef(
                       <PopoverTrigger asChild>
                         <FormControl>
                           <Button
-                            type="default"
+                            variant="default"
                             role="combobox"
                             size="medium"
                             aria-expanded={showTaxIDsPopover}
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
index a4cb48fa3fd..d6ce0676d04 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
@@ -114,7 +114,7 @@ const PaymentMethods = () => {
                           <Button
                             asChild
                             key="stripe-projects-billing-docs"
-                            type="default"
+                            variant="default"
                             iconRight={<ExternalLink size={14} />}
                           >
                             <a
@@ -126,7 +126,7 @@ const PaymentMethods = () => {
                             </a>
                           </Button>
                         ) : (
-                          <Button asChild key="payment-method-support" type="default">
+                          <Button asChild key="payment-method-support" variant="default">
                             <SupportLink
                               queryParams={{
                                 category: SupportCategories.BILLING,
@@ -152,7 +152,7 @@ const PaymentMethods = () => {
                             <div />
                           )}
                           <Button
-                            type="default"
+                            variant="default"
                             icon={<Plus />}
                             disabled={!canUpdatePaymentMethods}
                             onClick={() => setShowAddPaymentMethodModal(true)}
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/StripePaymentConnection.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/StripePaymentConnection.tsx
index 1c883656faf..a980ff2eb60 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/StripePaymentConnection.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/StripePaymentConnection.tsx
@@ -37,7 +37,7 @@ export function StripePaymentConnection({
         title="Stripe payment connection needs attention"
         description="The payment token linked to this organisation may be invalid or expired. To keep billing active, review and update it in your Stripe Dashboard."
         actions={
-          <Button asChild type="warning" iconRight={<ExternalLink size={14} />}>
+          <Button asChild variant="warning" iconRight={<ExternalLink size={14} />}>
             <a href={STRIPE_DASHBOARD_URL} target="_blank" rel="noopener noreferrer">
               Review in Stripe Dashboard
             </a>
@@ -75,7 +75,7 @@ export function StripePaymentConnection({
           </p>
         )}
       </div>
-      <Button asChild type="default" iconRight={<ExternalLink size={14} />}>
+      <Button asChild variant="default" iconRight={<ExternalLink size={14} />}>
         <a
           href={`${STRIPE_PROJECTS_DOCS_URL}#manage-billing`}
           target="_blank"
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx
index 78034b7bd53..55355b89259 100644
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx
+++ b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx
@@ -27,10 +27,10 @@ export const CPUWarnings = ({
           upgrading to a larger compute add-on.
         </AlertDescription>
         <div className="mt-3 flex items-center space-x-2">
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
           </Button>
-          <Button asChild type="warning">
+          <Button asChild variant="warning">
             <Link href={upgradeUrl}>
               {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
             </Link>
@@ -51,10 +51,10 @@ export const CPUWarnings = ({
           upgrading to a larger compute add-on.
         </AlertDescription>
         <div className="mt-3 flex items-center space-x-2">
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
           </Button>
-          <Button asChild type="danger">
+          <Button asChild variant="danger">
             <Link href={upgradeUrl}>
               {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
             </Link>
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
index 10a3c784423..c51f5dbc1f5 100644
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
+++ b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
@@ -32,7 +32,7 @@ export const DiskIOBandwidthWarnings = ({
               performance. If you need consistent disk performance, consider upgrading to a larger
               compute add-on.
             </p>
-            <Button asChild type="danger">
+            <Button asChild variant="danger">
               <Link href={upgradeUrl}>
                 {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
               </Link>
@@ -56,7 +56,7 @@ export const DiskIOBandwidthWarnings = ({
               If you need consistent disk performance, consider upgrading to a larger compute
               add-on.
             </p>
-            <Button asChild type="danger">
+            <Button asChild variant="danger">
               <Link href={upgradeUrl}>
                 {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
               </Link>
@@ -79,7 +79,7 @@ export const DiskIOBandwidthWarnings = ({
               at least once during this billing cycle. If you need consistent disk performance,
               consider upgrading to a larger compute add-on.
             </p>
-            <Button asChild type="warning">
+            <Button asChild variant="warning">
               <Link href={upgradeUrl}>
                 {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
               </Link>
@@ -103,7 +103,7 @@ export const DiskIOBandwidthWarnings = ({
               to baseline performance. If you need consistent disk performance, consider upgrading
               to a larger compute add-on.
             </p>
-            <Button asChild type="warning">
+            <Button asChild variant="warning">
               <Link href={upgradeUrl}>
                 {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
               </Link>
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx
index f0ecb091292..4fc8c9b5e35 100644
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx
+++ b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx
@@ -27,10 +27,10 @@ export const RAMWarnings = ({
           larger compute add-on.
         </AlertDescription>
         <div className="mt-3 flex items-center space-x-2">
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href={`${DOCS_URL}/guides/troubleshooting/exhaust-ram`}>Learn more</Link>
           </Button>
-          <Button asChild type="warning">
+          <Button asChild variant="warning">
             <Link href={upgradeUrl}>
               {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
             </Link>
@@ -51,10 +51,10 @@ export const RAMWarnings = ({
           larger compute add-on.
         </AlertDescription>
         <div className="mt-3 flex items-center space-x-2">
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
           </Button>
-          <Button asChild type="danger">
+          <Button asChild variant="danger">
             <Link href={upgradeUrl}>
               {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
             </Link>
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
index 03d04bbb951..65a65c1c546 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -96,7 +96,7 @@ export const BranchRow = ({
         {branch.git_branch && isGithubConnected && (
           <ButtonTooltip
             asChild
-            type="default"
+            variant="default"
             className="px-1.5"
             tooltip={{ content: { side: 'bottom', text: 'View branch on GitHub' } }}
           >
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx b/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
index 544de78c274..6cf5fed09f3 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
@@ -21,7 +21,7 @@ interface BranchSelectorProps {
   onBranchSelected?: (branch: Branch) => void
   disabled?: boolean
   isUpdating?: boolean
-  type?: 'primary' | 'outline'
+  variant?: 'primary' | 'outline'
   align?: 'end' | 'center'
 }
 
@@ -30,7 +30,7 @@ export const BranchSelector = ({
   onBranchSelected,
   disabled = false,
   isUpdating = false,
-  type = 'primary',
+  variant = 'primary',
   align = 'end',
 }: BranchSelectorProps) => {
   const [open, setOpen] = useState(false)
@@ -49,7 +49,7 @@ export const BranchSelector = ({
       <PopoverTrigger asChild>
         <ButtonTooltip
           icon={<GitMerge size={14} strokeWidth={1.5} />}
-          type={type}
+          variant={variant}
           disabled={
             disabled || isUpdating || branches.length === 0 || availableBranches.length === 0
           }
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 08b8ff0cd83..0b7e479e88c 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -398,7 +398,7 @@ export const CreateBranchModal = () => {
                         Keep this preview branch in sync with a chosen GitHub branch
                       </p>
                     </div>
-                    <Button type="default" icon={<Github />} onClick={handleGitHubClick}>
+                    <Button variant="default" icon={<Github />} onClick={handleGitHubClick}>
                       Configure
                     </Button>
                   </div>
@@ -604,7 +604,7 @@ export const CreateBranchModal = () => {
 
             <DialogFooter className="justify-end gap-2" padding="medium">
               <Button
-                type="default"
+                variant="default"
                 disabled={isCreatingBranch}
                 onClick={() => setShowCreateBranchModal(false)}
               >
@@ -614,8 +614,8 @@ export const CreateBranchModal = () => {
                 form={formId}
                 disabled={isDisabled}
                 loading={isCreatingBranch}
-                type={promptPlanUpgrade ? 'default' : 'primary'}
-                htmlType="submit"
+                variant={promptPlanUpgrade ? 'default' : 'primary'}
+                type="submit"
                 tooltip={{
                   content: {
                     side: 'bottom',
diff --git a/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx b/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx
index b52d51c2bc4..3bf143f73c4 100644
--- a/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx
@@ -76,7 +76,7 @@ export const DatabaseDiffPanel = ({
           </Link>
         </CardTitle>
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           icon={<Download strokeWidth={1.5} size={14} className="text-foreground-light" />}
           className="mt-0"
diff --git a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
index cc40ebf3a38..0ca057319ba 100644
--- a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
@@ -311,7 +311,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
                         for this branch.
                       </p>
                     </div>
-                    <Button type="default" icon={<Github />} onClick={openLinkerPanel}>
+                    <Button variant="default" icon={<Github />} onClick={openLinkerPanel}>
                       Connect to GitHub
                     </Button>
                   </div>
@@ -319,7 +319,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
             </DialogSection>
 
             <DialogFooter padding="medium">
-              <Button disabled={isUpdating} type="default" onClick={onClose}>
+              <Button disabled={isUpdating} variant="default" onClick={onClose}>
                 Cancel
               </Button>
               <Button
@@ -331,8 +331,8 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
                   isChecking
                 }
                 loading={isUpdating}
-                type="primary"
-                htmlType="submit"
+                variant="primary"
+                type="submit"
               >
                 Update branch
               </Button>
diff --git a/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx b/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
index 66df3547b1c..829790aa5b5 100644
--- a/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
@@ -32,18 +32,18 @@ export const PullRequestsEmptyState = ({
       </p>
       <div className="flex items-center space-x-2 mt-4">
         {hasGithubConnection ? (
-          <Button type="outline" asChild icon={<Github />}>
+          <Button variant="outline" asChild icon={<Github />}>
             <a href={url} target="_blank" rel="noopener noreferrer">
               Create pull request
             </a>
           </Button>
         ) : (
-          <Button asChild type="outline">
+          <Button asChild variant="outline">
             <Link href={`/project/${projectRef}/settings/integrations`}>Connect to GitHub</Link>
           </Button>
         )}
         <BranchSelector
-          type="outline"
+          variant="outline"
           align="center"
           branches={branches}
           onBranchSelected={onBranchSelected}
@@ -68,7 +68,7 @@ export const PreviewBranchesEmptyState = ({
       </p>
       <div className="flex items-center space-x-2">
         <DocsButton href={`${DOCS_URL}/guides/platform/branching`} />
-        <Button type="primary" onClick={() => onSelectCreateBranch()}>
+        <Button variant="primary" onClick={() => onSelectCreateBranch()}>
           Create branch
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx b/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx
index 39fadd963f0..452da4ecf0f 100644
--- a/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx
@@ -92,7 +92,7 @@ export const OutOfDateNotice = ({
           <AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
             <AlertDialogTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 loading={isPushing}
                 icon={<GitBranchIcon size={16} strokeWidth={1.5} />}
                 className="shrink-0"
@@ -120,7 +120,7 @@ export const OutOfDateNotice = ({
           </AlertDialog>
         ) : (
           <Button
-            type="default"
+            variant="default"
             loading={isPushing}
             onClick={() => handleUpdate()}
             icon={<GitBranchIcon size={16} strokeWidth={1.5} />}
diff --git a/apps/studio/components/interfaces/BranchManagement/Overview.tsx b/apps/studio/components/interfaces/BranchManagement/Overview.tsx
index 2ea963c738f..05761892bc8 100644
--- a/apps/studio/components/interfaces/BranchManagement/Overview.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/Overview.tsx
@@ -126,7 +126,7 @@ export const Overview = ({
                   environments.
                 </p>
               </div>
-              <Button type="primary" asChild>
+              <Button variant="primary" asChild>
                 <Link href={`/org/${selectedOrg?.slug}/billing?panel=subscriptionPlan`}>
                   Upgrade
                 </Link>
@@ -329,7 +329,7 @@ const PreviewBranchActions = ({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            type="text"
+            variant="text"
             icon={<MoreVertical />}
             className="px-1"
             onClick={(e) => e.stopPropagation()}
@@ -602,7 +602,7 @@ const MainBranchActions = ({ branch, repo }: { branch: Branch; repo: string }) =
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="text" icon={<MoreVertical />} className="px-1" />
+          <Button variant="text" icon={<MoreVertical />} className="px-1" />
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56" side="bottom" align="end">
           {repo ? (
diff --git a/apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx b/apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx
index c1354b5630d..8d2382dbc3d 100644
--- a/apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx
@@ -73,7 +73,7 @@ export const ReviewRow = ({ branch }: ReviewRowProps) => {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               icon={<MoreVertical />}
               className="px-1"
               onClick={(e) => e.stopPropagation()}
diff --git a/apps/studio/components/interfaces/BranchManagement/ReviewWithAI.tsx b/apps/studio/components/interfaces/BranchManagement/ReviewWithAI.tsx
index 035151f8d65..5bd3321ebe9 100644
--- a/apps/studio/components/interfaces/BranchManagement/ReviewWithAI.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/ReviewWithAI.tsx
@@ -110,7 +110,7 @@ export const ReviewWithAI = ({
 
   return (
     <ButtonTooltip
-      type="default"
+      variant="default"
       disabled={disabled || !currentBranch || !mainBranch}
       className="px-1"
       onClick={handleReviewWithAssistant}
diff --git a/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx b/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx
index 307289013f2..3902ce11504 100644
--- a/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx
@@ -69,7 +69,7 @@ export const WorkflowLogs = ({ branch }: WorkflowLogsProps) => {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           icon={
             showStatusIcon ? (
               <StatusIcon variant={isUnhealthy ? 'destructive' : 'default'} hideBackground />
@@ -145,7 +145,7 @@ export const WorkflowLogs = ({ branch }: WorkflowLogsProps) => {
             <div className="px-4 flex flex-col gap-2 py-2">
               <Button
                 onClick={() => setSelectedWorkflowRun(undefined)}
-                type="text"
+                variant="text"
                 icon={<ArrowLeft />}
                 className="self-start"
               >
diff --git a/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx b/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx
index 5653ae5d265..3f60b1e9800 100644
--- a/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx
@@ -83,7 +83,7 @@ export const WorkflowLogsCard = ({
             {overrideAction}
             {onClose && (
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 icon={<X size={12} strokeWidth={1.5} />}
                 onClick={onClose}
diff --git a/apps/studio/components/interfaces/Branching/MergeRequest.tsx b/apps/studio/components/interfaces/Branching/MergeRequest.tsx
index 24651273ab7..681fa079482 100644
--- a/apps/studio/components/interfaces/Branching/MergeRequest.tsx
+++ b/apps/studio/components/interfaces/Branching/MergeRequest.tsx
@@ -191,7 +191,7 @@ export const MergeActions = ({
                     : 'Unable to merge at this time',
             },
           }}
-          type="primary"
+          variant="primary"
           loading={isSubmitting}
           disabled={isMergeDisabled}
           onClick={onSelectMerge}
@@ -201,7 +201,7 @@ export const MergeActions = ({
         </ButtonTooltip>
       ) : (
         <Button
-          type="primary"
+          variant="primary"
           loading={isSubmitting}
           onClick={onSelectMerge}
           icon={<GitMerge size={16} strokeWidth={1.5} className="text-brand" />}
@@ -212,7 +212,12 @@ export const MergeActions = ({
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="default" loading={isUpdating} className="px-1.5" icon={<MoreVertical />} />
+          <Button
+            variant="default"
+            loading={isUpdating}
+            className="px-1.5"
+            icon={<MoreVertical />}
+          />
         </DropdownMenuTrigger>
         <DropdownMenuContent side="bottom" align="end" className="w-52">
           <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Connect/ApiKeysTabContent.tsx b/apps/studio/components/interfaces/Connect/ApiKeysTabContent.tsx
index da2b24c2304..3e86a84e078 100644
--- a/apps/studio/components/interfaces/Connect/ApiKeysTabContent.tsx
+++ b/apps/studio/components/interfaces/Connect/ApiKeysTabContent.tsx
@@ -66,7 +66,7 @@ export function ApiKeysTabContent({ projectKeys }: { projectKeys: projectKeys })
       <div className="gap-5 lg:grid lg:grid-cols-12">
         <div className="col-start-5 col-span-8 pl-2 flex items-center justify-between">
           <p className="text-xs text-foreground-lighter">For secret keys, see API settings.</p>
-          <Button asChild type="default" icon={<ExternalLink size={14} />}>
+          <Button asChild variant="default" icon={<ExternalLink size={14} />}>
             <Link href={`/project/${projectRef}/settings/api-keys`}>API settings</Link>
           </Button>
         </div>
diff --git a/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx b/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx
index a2a0b30e9b0..e56f50097a8 100644
--- a/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx
@@ -53,7 +53,7 @@ export const ConnectDropdown = ({
         <PopoverTrigger asChild>
           <Button
             size="small"
-            type="default"
+            variant="default"
             className="gap-0 rounded-l-none"
             iconRight={<ChevronDown strokeWidth={1.5} />}
           >
diff --git a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx
index 1ca2def2dd5..acbffe37825 100644
--- a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx
@@ -152,7 +152,7 @@ export const ConnectionPanel = ({
               title="Transaction pooler is unavailable as pool mode is set to Session"
               description="If you'd like to use transaction mode, update your pool mode to Transaction for the connection pooler in your project's Database Settings."
             >
-              <Button asChild type="default" className="mt-2">
+              <Button asChild variant="default" className="mt-2">
                 <Link
                   href={`/project/${projectRef}/database/settings#connection-pooler`}
                   className="text-xs text-light hover:text-foreground"
@@ -206,7 +206,7 @@ export const ConnectionPanel = ({
                 {links.length > 0 && (
                   <div className="flex items-center gap-x-2 mt-2">
                     {links.map((link) => (
-                      <Button key={link.text} asChild type="default" size="tiny">
+                      <Button key={link.text} asChild variant="default" size="tiny">
                         <Link href={link.url} className="text-xs text-light hover:text-foreground">
                           {link.text}
                         </Link>
@@ -240,7 +240,7 @@ export const ConnectionPanel = ({
                 className="group/collapse w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none border-muted"
               >
                 <Button
-                  type="default"
+                  variant="default"
                   size="tiny"
                   className="text-foreground-lighter bg-dash-sidebar!"
                   icon={
diff --git a/apps/studio/components/interfaces/Connect/ConnectionParameters.tsx b/apps/studio/components/interfaces/Connect/ConnectionParameters.tsx
index 841780eeb00..59233d7b4ed 100644
--- a/apps/studio/components/interfaces/Connect/ConnectionParameters.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectionParameters.tsx
@@ -30,7 +30,7 @@ export const ConnectionParameters = ({ parameters }: ConnectionParametersProps)
         className="w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none px-3"
       >
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           className="text-foreground-lighter bg-dash-sidebar!"
           icon={
diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
index f208432b021..97949de5678 100644
--- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
+++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
@@ -487,7 +487,7 @@ export const DatabaseConnectionString = () => {
                           className="w-full justify-start !last:rounded-b group-data-open:rounded-b-none px-3"
                         >
                           <Button
-                            type="default"
+                            variant="default"
                             size="large"
                             iconRight={
                               <ChevronDown className="transition group-data-open:rotate-180" />
diff --git a/apps/studio/components/interfaces/ConnectButton/ConnectButton.tsx b/apps/studio/components/interfaces/ConnectButton/ConnectButton.tsx
index 9068c57587c..6c9074f736b 100644
--- a/apps/studio/components/interfaces/ConnectButton/ConnectButton.tsx
+++ b/apps/studio/components/interfaces/ConnectButton/ConnectButton.tsx
@@ -12,13 +12,13 @@ import { useAppStateSnapshot } from '@/state/app-state'
 import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
 
 interface ConnectButtonProps {
-  buttonType?: ComponentProps<typeof Button>['type']
+  buttonVariant?: ComponentProps<typeof Button>['variant']
   className?: string
   iconOnly?: boolean
 }
 
 export const ConnectButton = ({
-  buttonType = 'default',
+  buttonVariant = 'default',
   className,
   iconOnly = false,
 }: ConnectButtonProps) => {
@@ -40,7 +40,7 @@ export const ConnectButton = ({
         open={showConnect ? false : undefined}
       >
         <Button
-          type={buttonType}
+          variant={buttonVariant}
           disabled={!isActiveHealthy}
           className={cn('rounded-full', className)}
           icon={<Plug className="rotate-90" />}
@@ -58,7 +58,7 @@ export const ConnectButton = ({
 
   return (
     <ButtonTooltip
-      type={buttonType}
+      variant={buttonVariant}
       disabled
       className={cn('rounded-full', className)}
       icon={<Plug className="rotate-90" />}
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
index 6f7670270f4..5b8898ef283 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
@@ -208,7 +208,7 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
             title={`${state.connectionMethod === 'direct' ? 'Direct connections use' : 'Transaction pooler uses'} IPv6 by default`}
             description="Enable the dedicated IPv4 address add-on to connect from IPv4-only networks"
             actions={[
-              <Button asChild key="addon" type="default">
+              <Button asChild key="addon" variant="default">
                 <Link href={`/project/${ref}/settings/addons?panel=ipv4`}>Enable IPv4 add-on</Link>
               </Button>,
               <DocsButton key="docs" href={`${DOCS_URL}/guides/platform/ipv4-address`} />,
diff --git a/apps/studio/components/interfaces/ConnectSheet/CopyPromptAdmonition.tsx b/apps/studio/components/interfaces/ConnectSheet/CopyPromptAdmonition.tsx
index e4fb94dc9f0..ea9f67d8155 100644
--- a/apps/studio/components/interfaces/ConnectSheet/CopyPromptAdmonition.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/CopyPromptAdmonition.tsx
@@ -133,7 +133,9 @@ export function CopyPromptAdmonition({ stepsContainerRef }: CopyPromptAdmonition
       type="tip"
       showIcon={false}
       layout="horizontal"
-      actions={<CopyButton type="default" copyLabel="Copy prompt" asyncText={handleCopyPrompt} />}
+      actions={
+        <CopyButton variant="default" copyLabel="Copy prompt" asyncText={handleCopyPrompt} />
+      }
     >
       <div className="absolute -inset-16 z-0 opacity-50">
         <img
diff --git a/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx b/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
index 1bf01b509d2..0039e5bc6bc 100644
--- a/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
@@ -47,7 +47,7 @@ export const FrameworkSelector = ({
         <PopoverTrigger asChild>
           <Button
             size={size}
-            type="default"
+            variant="default"
             className={cn('gap-0 justify-between', className?.includes('w-full') && 'w-full')}
             iconRight={<ChevronDown strokeWidth={1.5} />}
           >
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/IPv4StatusPanel.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/IPv4StatusPanel.tsx
index 87e0c0125cb..023a04ff1e8 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/IPv4StatusPanel.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/IPv4StatusPanel.tsx
@@ -105,7 +105,7 @@ export function IPv4StatusPanel({ method, ipv4Status, projectRef }: IPv4StatusPa
               {links.length > 0 && (
                 <div className="flex items-center gap-x-2 mt-2">
                   {links.map((link) => (
-                    <Button key={link.text} asChild type="default" size="tiny">
+                    <Button key={link.text} asChild variant="default" size="tiny">
                       <Link href={link.url} className="text-xs text-light hover:text-foreground">
                         {link.text}
                       </Link>
@@ -123,7 +123,7 @@ export function IPv4StatusPanel({ method, ipv4Status, projectRef }: IPv4StatusPa
                 className="group/collapse w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none border-muted"
               >
                 <Button
-                  type="default"
+                  variant="default"
                   size="tiny"
                   className="text-foreground-lighter bg-dash-sidebar!"
                   icon={
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/install/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/install/content.tsx
index 8ae30196354..26863205598 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/install/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/install/content.tsx
@@ -56,7 +56,7 @@ function InstallContent({ state }: StepContentProps) {
       </div>
       <div className="absolute right-2 top-1/2 -translate-y-1/2">
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           icon={<Copy size={14} />}
           onClick={handleCopy}
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/command/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/command/content.tsx
index 57f8a86b99c..ff53feb4617 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/command/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/command/content.tsx
@@ -36,7 +36,7 @@ function ShadcnCommandContent({ state }: StepContentProps) {
       </div>
       <div className="absolute right-2 top-1/2 -translate-y-1/2">
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           icon={<Copy size={14} />}
           onClick={handleCopy}
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/explore/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/explore/content.tsx
index 4e557636466..ddf1361fe53 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/explore/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/shadcn/explore/content.tsx
@@ -5,7 +5,7 @@ import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Conn
 
 function ShadcnExploreContent(_props: StepContentProps) {
   return (
-    <Button asChild type="default" icon={<ExternalLink size={14} />}>
+    <Button asChild variant="default" icon={<ExternalLink size={14} />}>
       <a href="https://supabase.com/ui" target="_blank" rel="noreferrer">
         Explore supabase.com/ui
       </a>
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/skills-install/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/skills-install/content.tsx
index 93a844b4708..8ce58b7320a 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/skills-install/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/skills-install/content.tsx
@@ -23,7 +23,7 @@ function SkillsInstallContent(_props: StepContentProps) {
       </div>
       <div className="absolute right-2 top-1/2 -translate-y-1/2">
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           icon={<Copy size={14} />}
           onClick={handleCopy}
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
index 7a368985b20..0c4fc5348bb 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
@@ -42,7 +42,7 @@ export const BackupItem = ({ index, isHealthy, backup, onSelectBackup }: BackupI
       return (
         <div className="flex space-x-4">
           <ButtonTooltip
-            type="default"
+            variant="default"
             disabled={!isHealthy || !canTriggerScheduledBackups}
             onClick={onSelectBackup}
             tooltip={{
@@ -61,7 +61,7 @@ export const BackupItem = ({ index, isHealthy, backup, onSelectBackup }: BackupI
 
           {!backup.isPhysicalBackup && (
             <ButtonTooltip
-              type="default"
+              variant="default"
               icon={<Download />}
               loading={isDownloading}
               disabled={!canTriggerScheduledBackups || isDownloading}
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx
index 70de6cd1005..2d5943c2461 100644
--- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx
@@ -106,7 +106,7 @@ export function PITRForm({
         footer={
           <div className="flex items-center justify-end gap-3 p-6">
             <ButtonTooltip
-              type="default"
+              variant="default"
               disabled={disabled || !selectedDate || !isWithinRange}
               onClick={handleSubmit}
               tooltip={{
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
index 6131909db14..a0c585ec19d 100644
--- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
@@ -30,7 +30,7 @@ export const PITRNotice = () => {
           <ButtonTooltip
             asChild
             disabled={!canUpdateSubscription}
-            type="default"
+            variant="default"
             tooltip={{
               content: {
                 side: 'bottom',
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
index 3a5c55ad2c1..5cc56874bb2 100644
--- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
@@ -100,7 +100,7 @@ export const PITRSelection = () => {
               </AlertDescription>
               <div className="flex items-center gap-x-2 mt-2">
                 {/* [Joshen] Ideally we have some links to a docs to explain why so */}
-                <Button type="default">
+                <Button variant="default">
                   <Link href={`/project/${ref}/settings/infrastructure`}>
                     Infrastructure settings
                   </Link>
diff --git a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
index 108ba2ec0a8..17fa70ecfdc 100644
--- a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
@@ -46,7 +46,7 @@ export const BackupsList = ({ onSelectRestore, disabled, hasAccess }: BackupsLis
                     {(backup.status as any) === 'COMPLETED' && (
                       <Button
                         className="ml-auto"
-                        type="outline"
+                        variant="outline"
                         onClick={() => onSelectRestore(backup.id)}
                         disabled={disabled}
                       >
diff --git a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/ConfirmRestoreDialog.tsx b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/ConfirmRestoreDialog.tsx
index ad1501457be..c07b59a181b 100644
--- a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/ConfirmRestoreDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/ConfirmRestoreDialog.tsx
@@ -69,7 +69,7 @@ export const ConfirmRestoreDialog = ({
         </DialogSection>
         <AdditionalMonthlySpend additionalMonthlySpend={additionalMonthlySpend} />
         <DialogFooter>
-          <Button type="outline" onClick={() => onOpenChange(false)}>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button onClick={() => onSelectContinue()}>Continue</Button>
diff --git a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx
index 17c69226639..7388b523c82 100644
--- a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx
@@ -184,10 +184,10 @@ export const CreateNewProjectDialog = ({
             </DialogSection>
             <AdditionalMonthlySpend additionalMonthlySpend={additionalMonthlySpend} />
             <DialogFooter>
-              <Button htmlType="reset" type="outline" onClick={() => onOpenChange(false)}>
+              <Button type="reset" variant="outline" onClick={() => onOpenChange(false)}>
                 Cancel
               </Button>
-              <Button htmlType="submit" loading={cloneMutationLoading}>
+              <Button type="submit" loading={cloneMutationLoading}>
                 Restore to new project
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
index d1fc45bc3fd..12dfd152aad 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
@@ -193,7 +193,7 @@ const CreateEnumeratedTypeSidePanel = ({
                   </p>
                   <Button
                     asChild
-                    type="default"
+                    variant="default"
                     icon={<ExternalLink strokeWidth={1.5} />}
                     className="mt-2"
                   >
@@ -229,14 +229,14 @@ const CreateEnumeratedTypeSidePanel = ({
             </div>
 
             <Button
-              type="default"
+              variant="default"
               icon={<Plus strokeWidth={1.5} />}
               onClick={() => append({ value: '' })}
             >
               Add value
             </Button>
 
-            <Button ref={submitRef} htmlType="submit" type="default" className="hidden">
+            <Button ref={submitRef} type="submit" variant="default" className="hidden">
               Update
             </Button>
           </form>
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
index 80fea96ed70..a77c22ddb72 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
@@ -228,7 +228,7 @@ const EditEnumeratedTypeSidePanel = ({
                   </p>
                   <Button
                     asChild
-                    type="default"
+                    variant="default"
                     icon={<ExternalLink strokeWidth={1.5} />}
                     className="mt-2"
                   >
@@ -264,14 +264,14 @@ const EditEnumeratedTypeSidePanel = ({
             </div>
 
             <Button
-              type="default"
+              variant="default"
               icon={<Plus strokeWidth={1.5} />}
               onClick={() => append({ isNew: true, originalValue: '', updatedValue: '' })}
             >
               Add value
             </Button>
 
-            <Button ref={submitRef} htmlType="submit" type="default" className="hidden">
+            <Button ref={submitRef} type="submit" variant="default" className="hidden">
               Update
             </Button>
           </form>
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
index 5eabf2ddf60..206aa08b206 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
@@ -58,7 +58,7 @@ const EnumeratedTypeValueRow = <TFieldValues extends FieldValues>({
               </button>
               <Input {...inputField} className="w-full" />
               <Button
-                type="default"
+                variant="default"
                 size="small"
                 disabled={isDisabled}
                 icon={<Trash strokeWidth={1.5} size={16} />}
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
index fb886c5c16c..12f18ffd3a7 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
@@ -170,7 +170,7 @@ export const EnumeratedTypes = () => {
             >
               <Button
                 className="ml-auto flex-1"
-                type="primary"
+                variant="primary"
                 onClick={() => setShowCreateTypePanel(true)}
               >
                 Create type
@@ -236,7 +236,11 @@ export const EnumeratedTypes = () => {
                           <div className="flex justify-end items-center space-x-2">
                             <DropdownMenu>
                               <DropdownMenuTrigger asChild>
-                                <Button type="default" className="px-1" icon={<MoreVertical />} />
+                                <Button
+                                  variant="default"
+                                  className="px-1"
+                                  icon={<MoreVertical />}
+                                />
                               </DropdownMenuTrigger>
                               <DropdownMenuContent side="bottom" align="end" className="w-32">
                                 <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index 5b5d15da487..ff4ead4a268 100644
--- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -264,11 +264,11 @@ export const EnableExtensionModal = ({
         </DialogSection>
 
         <DialogFooter>
-          <Button type="default" disabled={isEnabling} onClick={() => onCancel()}>
+          <Button variant="default" disabled={isEnabling} onClick={() => onCancel()}>
             Cancel
           </Button>
           <Button
-            htmlType="submit"
+            type="submit"
             form="enable-extensions-form"
             loading={isEnabling}
             disabled={isLoading || isEnabling}
diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
index 124f33090d9..11ada34ae1d 100644
--- a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
@@ -68,7 +68,7 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
             </span>
             {extensionMeta?.deprecated && extensionMeta?.deprecated.length > 0 && (
               <ButtonTooltip
-                type="warning"
+                variant="warning"
                 icon={<AlertTriangle />}
                 className="rounded-full"
                 tooltip={{
@@ -122,7 +122,7 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
         <TableCell>
           <div className="flex gap-2 items-center">
             {extensionMeta?.github_url && (
-              <Button asChild type="default" icon={<Github />} className="rounded-full">
+              <Button asChild variant="default" icon={<Github />} className="rounded-full">
                 <a
                   target="_blank"
                   rel="noreferrer"
@@ -134,7 +134,7 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
               </Button>
             )}
             {docsUrl !== undefined && (
-              <Button asChild type="default" icon={<Book />} className="rounded-full">
+              <Button asChild variant="default" icon={<Book />} className="rounded-full">
                 <a
                   target="_blank"
                   rel="noreferrer"
@@ -148,9 +148,9 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
           </div>
         </TableCell>
 
-        {/* 
+        {/*
           [Joshen] The div child here and all these classes is to properly add a left border
-          to make the sticky column more distinct 
+          to make the sticky column more distinct
         */}
         <TableCell className="w-20 sticky bg-surface-100 right-0 relative">
           <div className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center border-l">
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx
index d636f9fa444..b76fbeff29b 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx
@@ -36,7 +36,7 @@ export const FunctionEditor = ({
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               className={cn(
                 'px-1.5 text-foreground-lighter hover:text-foreground',
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index d998356f7dc..5e425d93784 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -394,12 +394,12 @@ export const CreateFunction = ({
             </form>
           </Form>
           <SheetFooter>
-            <Button disabled={isCreating || isUpdating} type="default" onClick={confirmOnClose}>
+            <Button disabled={isCreating || isUpdating} variant="default" onClick={confirmOnClose}>
               Cancel
             </Button>
             <Button
               form={FORM_ID}
-              htmlType="submit"
+              type="submit"
               disabled={isCreating || isUpdating}
               loading={isCreating || isUpdating}
             >
@@ -485,7 +485,7 @@ const FormFieldArgs = ({ readonly }: FormFieldConfigParamsProps) => {
 
               {!readonly && (
                 <Button
-                  type="danger"
+                  variant="danger"
                   icon={<Trash size={12} />}
                   onClick={() => remove(index)}
                   className="h-[38px] w-[38px]"
@@ -497,7 +497,7 @@ const FormFieldArgs = ({ readonly }: FormFieldConfigParamsProps) => {
 
         {!readonly && (
           <Button
-            type="default"
+            variant="default"
             icon={<Plus size={12} />}
             onClick={() => append({ name: '', type: 'integer' })}
             disabled={readonly}
diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
index 3cf32b1b886..a7c27c50792 100644
--- a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
@@ -106,7 +106,7 @@ const FunctionList = ({
           <TableRow key={x.id}>
             <TableCell className="truncate">
               <Button
-                type="text"
+                variant="text"
                 className="text-link-table-cell text-sm disabled:opacity-100 disabled:no-underline p-0 hover:bg-transparent title"
                 disabled={isLocked || !canUpdateFunctions}
                 onClick={() => editFunction(x)}
@@ -151,7 +151,7 @@ const FunctionList = ({
                       <DropdownMenuTrigger asChild>
                         <Button
                           aria-label="More options"
-                          type="default"
+                          variant="default"
                           className="px-1"
                           icon={<MoreVertical />}
                         />
@@ -221,7 +221,7 @@ const FunctionList = ({
                   ) : (
                     <ButtonTooltip
                       disabled
-                      type="default"
+                      variant="default"
                       icon={<MoreVertical />}
                       className="px-1"
                       tooltip={{
diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
index 74343d16476..785b085c018 100644
--- a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
@@ -346,7 +346,7 @@ export const FunctionsList = () => {
                     </ButtonTooltip>
                   )}
                   <ButtonTooltip
-                    type="default"
+                    variant="default"
                     disabled={!canCreateFunctions}
                     className="px-1 pointer-events-auto"
                     icon={<AiIconAnimation size={16} />}
diff --git a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
index 0904ead49c3..2d48173a94e 100644
--- a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
@@ -318,8 +318,8 @@ export const EditHookPanel = () => {
           <div className="flex w-full justify-end space-x-3 border-t border-default px-3 py-4">
             <Button
               size="tiny"
-              type="default"
-              htmlType="button"
+              variant="default"
+              type="button"
               onClick={confirmOnClose}
               disabled={isSubmitting}
             >
@@ -327,8 +327,8 @@ export const EditHookPanel = () => {
             </Button>
             <Button
               size="tiny"
-              type="primary"
-              htmlType="submit"
+              variant="primary"
+              type="submit"
               form={FORM_ID}
               disabled={isSubmitting}
               loading={isSubmitting}
diff --git a/apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx b/apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
index 88cd734c640..6b6791393d8 100644
--- a/apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
@@ -100,7 +100,7 @@ export const HookList = ({ schema, filterString }: HookListProps) => {
                 {canUpdateWebhook ? (
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button type="default" className="px-1" icon={<MoreVertical />} />
+                      <Button variant="default" className="px-1" icon={<MoreVertical />} />
                     </DropdownMenuTrigger>
 
                     <DropdownMenuContent side="left">
@@ -126,7 +126,7 @@ export const HookList = ({ schema, filterString }: HookListProps) => {
                 ) : (
                   <ButtonTooltip
                     disabled
-                    type="default"
+                    variant="default"
                     className="px-1"
                     icon={<MoreVertical />}
                     tooltip={{
diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
index 88f897611dc..eb5214dd40b 100644
--- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
@@ -209,7 +209,7 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                         <PopoverTrigger asChild>
                           <Button
                             id="schema"
-                            type="default"
+                            variant="default"
                             size={'medium'}
                             className={`w-full [&>span]:w-full text-left`}
                             iconRight={
@@ -307,7 +307,7 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                         >
                           <Button
                             id="table"
-                            type="default"
+                            variant="default"
                             size="medium"
                             className={cn(
                               'w-full [&>span]:w-full text-left',
@@ -513,7 +513,7 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                 <SheetSection>
                   <div className="flex items-center justify-between">
                     <p className="text-sm">Preview of SQL statement</p>
-                    <Button asChild type="default">
+                    <Button asChild variant="default">
                       <Link
                         href={
                           project !== undefined
@@ -545,7 +545,7 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
         </Form>
         <SheetFooter>
           <Button
-            type="default"
+            variant="default"
             disabled={isExecuting}
             onClick={() => {
               form.reset()
@@ -555,9 +555,9 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
             Cancel
           </Button>
           <Button
-            type="primary"
+            variant="primary"
             form={formId}
-            htmlType="submit"
+            type="submit"
             disabled={isExecuting}
             loading={isExecuting}
           >
diff --git a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
index 5467097a4de..878f27a57c7 100644
--- a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
@@ -195,7 +195,7 @@ export const Indexes = () => {
               >
                 <Button
                   className="ml-auto grow lg:grow-0"
-                  type="primary"
+                  variant="primary"
                   onClick={() => setShowCreateIndex(true)}
                   disabled={!isSuccessSchemas}
                 >
@@ -260,13 +260,13 @@ export const Indexes = () => {
                           </TableCell>
                           <TableCell>
                             <div className="flex justify-end items-center space-x-2">
-                              <Button type="default" onClick={() => setEditIndexId(index.name)}>
+                              <Button variant="default" onClick={() => setEditIndexId(index.name)}>
                                 View definition
                               </Button>
                               {!isSchemaLocked && (
                                 <Button
                                   aria-label="Delete index"
-                                  type="text"
+                                  variant="text"
                                   className="px-1"
                                   icon={<Trash />}
                                   onClick={() => setDeleteIndexId(index.name)}
diff --git a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
index 87f922dfd11..cc4bfc24aa4 100644
--- a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
+++ b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
@@ -90,7 +90,7 @@ const Migrations = () => {
               </>
             }
           >
-            <Button key="contact-support" asChild type="default">
+            <Button key="contact-support" asChild variant="default">
               <SupportLink
                 queryParams={{
                   projectRef: project?.ref,
@@ -176,7 +176,7 @@ const Migrations = () => {
                               </TableCell>
                               <TableCell align="right">
                                 <Button
-                                  type="default"
+                                  variant="default"
                                   onClick={() => setSelectedMigration(migration)}
                                 >
                                   View migration SQL
@@ -211,7 +211,7 @@ const Migrations = () => {
         onCancel={() => setSelectedMigration(undefined)}
         customFooter={
           <div className="flex items-center justify-end p-4 border-t border-overlay-border">
-            <Button type="default" onClick={() => setSelectedMigration(undefined)}>
+            <Button variant="default" onClick={() => setSelectedMigration(undefined)}>
               Close
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx b/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx
index 19f3f486416..5402e33184e 100644
--- a/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx
+++ b/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx
@@ -56,7 +56,7 @@ const PrivilegesHead = ({
 
       <div className="flex items-center gap-2">
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           onClick={resetChanges}
           disabled={!hasChanges || isApplyingChanges}
@@ -64,7 +64,7 @@ const PrivilegesHead = ({
           Reset
         </Button>
         <Button
-          type="primary"
+          variant="primary"
           size="tiny"
           onClick={applyChanges}
           disabled={disabled || !hasChanges || isApplyingChanges}
diff --git a/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx b/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
index 0ee289f9970..18a52c4062a 100644
--- a/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
+++ b/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
@@ -44,7 +44,7 @@ export const ProtectedSchemaDialog = ({ onClose }: { onClose: () => void }) => {
       </DialogSection>
       <DialogFooter>
         <div className="flex items-center justify-end space-x-2">
-          <Button type="default" onClick={onClose}>
+          <Button variant="default" onClick={onClose}>
             Understood
           </Button>
         </div>
@@ -100,7 +100,7 @@ export const ProtectedSchemaWarning = ({
         showLearnMoreDialog && (
           <Dialog open={showModal} onOpenChange={setShowModal}>
             <DialogTrigger asChild>
-              <Button type="default" size="tiny" onClick={() => setShowModal(true)}>
+              <Button variant="default" size="tiny" onClick={() => setShowModal(true)}>
                 Learn more
               </Button>
             </DialogTrigger>
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
index bf9adf22e6c..bc985e144f8 100644
--- a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
+++ b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
@@ -217,7 +217,11 @@ export const PublicationsList = () => {
                     ))}
                     <TableCell>
                       <div className="flex justify-end">
-                        <Button asChild type="default" style={{ paddingTop: 3, paddingBottom: 3 }}>
+                        <Button
+                          asChild
+                          variant="default"
+                          style={{ paddingTop: 3, paddingBottom: 3 }}
+                        >
                           <Link href={`/project/${ref}/database/publications/${x.id}`}>
                             {x.tables === null
                               ? 'All tables'
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx
index cf8b7b4bed4..40b87c79514 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx
@@ -128,7 +128,7 @@ export const DuckLakeFields = ({ form }: { form: UseFormReturn<DestinationPanelS
                   actions={
                     <div className="flex items-center justify-center">
                       <Button
-                        type="default"
+                        variant="default"
                         className="w-7"
                         icon={showCatalogUrl ? <Eye /> : <EyeOff />}
                         onClick={() => setShowCatalogUrl(!showCatalogUrl)}
@@ -228,7 +228,7 @@ export const DuckLakeFields = ({ form }: { form: UseFormReturn<DestinationPanelS
                 />
               </FormControl>
               <Button
-                type="default"
+                variant="default"
                 icon={showSecretAccessKey ? <Eye /> : <EyeOff />}
                 className="w-7 absolute right-6 top-[4px]"
                 onClick={() => setShowSecretAccessKey(!showSecretAccessKey)}
@@ -490,7 +490,7 @@ export const SnowflakeFields = ({ form }: { form: UseFormReturn<DestinationPanel
                   actions={
                     <div className="flex items-center justify-center">
                       <Button
-                        type="default"
+                        variant="default"
                         className="w-7"
                         icon={showPrivateKeyPassphrase ? <Eye /> : <EyeOff />}
                         onClick={() => setShowPrivateKeyPassphrase(!showPrivateKeyPassphrase)}
@@ -585,7 +585,7 @@ export const AnalyticsBucketFields = ({
               {isLoadingBuckets ? (
                 <Button
                   disabled
-                  type="default"
+                  variant="default"
                   className="w-full justify-between"
                   size="small"
                   iconRight={<Loader2 className="animate-spin" />}
@@ -595,7 +595,7 @@ export const AnalyticsBucketFields = ({
               ) : isErrorBuckets ? (
                 <Button
                   disabled
-                  type="default"
+                  variant="default"
                   className="w-full justify-start"
                   size="small"
                   icon={<WarningIcon />}
@@ -654,7 +654,7 @@ export const AnalyticsBucketFields = ({
               {isLoadingNamespaces && canSelectNamespace ? (
                 <Button
                   disabled
-                  type="default"
+                  variant="default"
                   className="w-full justify-between"
                   size="small"
                   iconRight={<Loader2 className="animate-spin" />}
@@ -664,7 +664,7 @@ export const AnalyticsBucketFields = ({
               ) : isErrorNamespaces ? (
                 <Button
                   disabled
-                  type="default"
+                  variant="default"
                   className="w-full justify-start"
                   size="small"
                   icon={<WarningIcon />}
@@ -757,7 +757,7 @@ export const AnalyticsBucketFields = ({
                   serviceApiKey ? (
                     <div className="flex items-center justify-center">
                       <Button
-                        type="default"
+                        variant="default"
                         className="w-7"
                         icon={showCatalogToken ? <Eye /> : <EyeOff />}
                         onClick={() => setShowCatalogToken(!showCatalogToken)}
@@ -813,7 +813,7 @@ export const AnalyticsBucketFields = ({
               {isLoadingKeys ? (
                 <Button
                   disabled
-                  type="default"
+                  variant="default"
                   className="w-full justify-between"
                   size="small"
                   iconRight={<Loader2 className="animate-spin" />}
@@ -823,7 +823,7 @@ export const AnalyticsBucketFields = ({
               ) : isErrorKeys ? (
                 <Button
                   disabled
-                  type="default"
+                  variant="default"
                   className="w-full justify-start"
                   size="small"
                   icon={<WarningIcon />}
@@ -881,7 +881,7 @@ export const AnalyticsBucketFields = ({
                   />
                 </FormControl>
                 <Button
-                  type="default"
+                  variant="default"
                   icon={showSecretAccessKey ? <Eye /> : <EyeOff />}
                   className="w-7 absolute right-6 top-[4px]"
                   onClick={() => setShowSecretAccessKey(!showSecretAccessKey)}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx
index 4da202ffcd9..55621509ea0 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx
@@ -147,10 +147,10 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
               </Form>
             </SheetSection>
             <SheetFooter>
-              <Button type="default" disabled={creatingPublication} onClick={onClose}>
+              <Button variant="default" disabled={creatingPublication} onClick={onClose}>
                 Cancel
               </Button>
-              <Button type="primary" disabled={creatingPublication} form={formId} htmlType="submit">
+              <Button variant="primary" disabled={creatingPublication} form={formId} type="submit">
                 Create publication
               </Button>
             </SheetFooter>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
index a2a948e3262..77302e3d44f 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
@@ -60,7 +60,7 @@ export const PublicationsComboBox = ({
     >
       <PopoverTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           size="medium"
           className={cn(
             'w-full [&>span]:w-full text-left',
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index 33ae182f427..198a35b2d3a 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -686,10 +686,10 @@ export const DestinationForm = ({
           )}
         </AnimatePresence>
         <div className="flex items-center gap-x-2">
-          <Button disabled={isSaving} type="default" onClick={onClose}>
+          <Button disabled={isSaving} variant="default" onClick={onClose}>
             Cancel
           </Button>
-          <Button disabled={isSubmitDisabled} loading={isSaving} form={formId} htmlType="submit">
+          <Button disabled={isSubmitDisabled} loading={isSaving} form={formId} type="submit">
             {getSubmitButtonText()}
           </Button>
         </div>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
index be1c0ac86a6..6d17a68bc1b 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
@@ -128,7 +128,7 @@ export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPane
                   <div className="flex gap-x-2">
                     <Button
                       asChild
-                      type="secondary"
+                      variant="secondary"
                       iconRight={<ArrowUpRight size={16} strokeWidth={1.5} />}
                     >
                       <Link
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx
index 370d235c8a8..baa771a432e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx
@@ -66,7 +66,7 @@ export const ReadReplicaEligibilityWarnings = () => {
     return (
       <Admonition type="warning" title="Your organization has overdue invoices">
         <p>Please resolve all outstanding invoices first before deploying a new read replica.</p>
-        <Button asChild type="default" className="mt-2">
+        <Button asChild variant="default" className="mt-2">
           <Link href={`/org/${org?.slug}/billing#invoices`}>View invoices</Link>
         </Button>
       </Admonition>
@@ -109,7 +109,7 @@ export const ReadReplicaEligibilityWarnings = () => {
         title="Read replicas can only be deployed with projects on Postgres version 15 and above"
       >
         <p>If you'd like to use read replicas, please contact us via support.</p>
-        <Button asChild type="default" className="mt-2">
+        <Button asChild variant="default" className="mt-2">
           <SupportLink
             queryParams={{
               projectRef,
@@ -177,7 +177,7 @@ export const ReadReplicaEligibilityWarnings = () => {
         {refetchInterval === false && (
           <div className="flex items-center gap-x-2 mt-2">
             <Button
-              type="default"
+              variant="default"
               loading={isEnabling}
               disabled={isEnabling}
               onClick={() => {
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
index 44c549659f3..b4599471110 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
@@ -122,7 +122,7 @@ export const ReadReplicaForm = ({ onSuccess, onClose }: ReadReplicaFormProps) =>
         </div>
 
         <div className="flex items-center gap-x-2">
-          <Button disabled={isSettingUp} type="default" onClick={onClose}>
+          <Button disabled={isSettingUp} variant="default" onClick={onClose}>
             Cancel
           </Button>
           <Button disabled={!canDeployReplica} loading={isSettingUp} onClick={onSubmit}>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
index 964d8025381..fe72e424989 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
@@ -226,7 +226,7 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
                   </TooltipContent>
                 </Tooltip>
               )}
-              <Button asChild type="default" className="relative">
+              <Button asChild variant="default" className="relative">
                 <Link href={`/project/${projectRef}/database/replication/${pipeline?.id}`}>
                   View replication
                 </Link>
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index bb63d34341f..d9e58ccf4d8 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -219,7 +219,7 @@ export const Destinations = () => {
               actions={
                 filterString.length > 0 && (
                   <Button
-                    type="text"
+                    variant="text"
                     icon={<X />}
                     className="p-0 h-5 w-5"
                     onClick={() => setFilterString('')}
@@ -237,7 +237,7 @@ export const Destinations = () => {
               side="bottom"
             >
               <Button
-                type="default"
+                variant="default"
                 icon={<Plus />}
                 disabled={!newDestinationDefaultType}
                 onClick={openDestinationPanel}
@@ -249,7 +249,7 @@ export const Destinations = () => {
             {canDisableExternalReplication && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="default" icon={<MoreVertical />} className="w-7" />
+                  <Button variant="default" icon={<MoreVertical />} className="w-7" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-52">
                   <DropdownMenuItem onClick={() => setShowDisableExternalReplicationDialog(true)}>
diff --git a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx b/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
index 1984210deb1..8c088ab212b 100644
--- a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
@@ -44,7 +44,7 @@ const EnableReplicationModal = () => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button type="primary" className="w-min">
+        <Button variant="primary" className="w-min">
           Enable external replication
         </Button>
       </DialogTrigger>
@@ -70,10 +70,10 @@ const EnableReplicationModal = () => {
           </Admonition>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" disabled={creatingTenantSource} onClick={() => setOpen(false)}>
+          <Button variant="default" disabled={creatingTenantSource} onClick={() => setOpen(false)}>
             Cancel
           </Button>
-          <Button type="primary" loading={creatingTenantSource} onClick={onEnableReplication}>
+          <Button variant="primary" loading={creatingTenantSource} onClick={onEnableReplication}>
             Enable external replication
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx b/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx
index 072b21f0192..c27dc77afd2 100644
--- a/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx
@@ -60,7 +60,7 @@ export const ErrorDetailsDialog = ({
         </DialogSection>
         <DialogFooter>
           <DialogClose>
-            <Button type="default">Close</Button>
+            <Button variant="default">Close</Button>
           </DialogClose>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
index e16620fa92f..5df48c62f37 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
@@ -111,14 +111,19 @@ export const ReadReplicaRow = ({ replica, onUpdateReplica }: ReadReplicaRow) =>
 
         <TableCell>
           <div className="flex items-center justify-end gap-x-2">
-            <Button asChild type="default" className="relative" disabled={status === 'GOING_DOWN'}>
+            <Button
+              asChild
+              variant="default"
+              className="relative"
+              disabled={status === 'GOING_DOWN'}
+            >
               <Link href={`/project/${ref}/database/replication/replica/${replica.identifier}`}>
                 View replication
               </Link>
             </Button>
             <DropdownMenu>
               <DropdownMenuTrigger>
-                <Button type="default" icon={<MoreVertical />} className="w-7" />
+                <Button variant="default" icon={<MoreVertical />} className="w-7" />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-52">
                 <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
index d872bb4816f..81996d4cd07 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
@@ -267,7 +267,7 @@ export const ReplicationPipelineStatus = () => {
       <div className="flex flex-col gap-y-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-x-3">
-            <Button asChild type="outline" icon={<ChevronLeft />} style={{ padding: '5px' }}>
+            <Button asChild variant="outline" icon={<ChevronLeft />} style={{ padding: '5px' }}>
               <Link href={`/project/${projectRef}/database/replication`} />
             </Button>
             <div className="flex items-center gap-x-3">
@@ -287,7 +287,7 @@ export const ReplicationPipelineStatus = () => {
           <div className="flex items-center gap-x-2">
             {hasUpdate && (
               <Button
-                type="primary"
+                variant="primary"
                 icon={<ArrowUpCircle />}
                 onClick={() => setShowUpdateVersionModal(true)}
               >
@@ -295,12 +295,12 @@ export const ReplicationPipelineStatus = () => {
               </Button>
             )}
 
-            <Button asChild type="default">
+            <Button asChild variant="default">
               <Link href={logsUrl}>View logs</Link>
             </Button>
 
             <Button
-              type={statusName === PipelineStatusName.STOPPED ? 'primary' : 'default'}
+              variant={statusName === PipelineStatusName.STOPPED ? 'primary' : 'default'}
               onClick={onPrimaryAction}
               loading={
                 isPipelineError ||
@@ -423,7 +423,7 @@ export const ReplicationPipelineStatus = () => {
               <div className="flex items-center">
                 <Button
                   size="tiny"
-                  type="default"
+                  variant="default"
                   className="rounded-r-none hover:z-2"
                   icon={<RotateCcw />}
                   disabled={isAnyRestartInProgress || showDisabledState || isPipelineError}
@@ -438,7 +438,7 @@ export const ReplicationPipelineStatus = () => {
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<ChevronDown />}
                       className="w-7 rounded-l-none -ml-px"
                       disabled={showDisabledState || isPipelineError}
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx
index 68f5d2d6248..51bbe46529b 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx
@@ -43,7 +43,7 @@ export const TableReplicationRow = ({
 
           <ButtonTooltip
             asChild
-            type="text"
+            variant="text"
             className="px-1.5"
             icon={<ExternalLink />}
             tooltip={{
@@ -96,7 +96,7 @@ export const TableReplicationRow = ({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 className="w-7"
                 icon={<RotateCcw />}
                 disabled={showDisabledState || isRestarting || isAnyRestartInProgress}
diff --git a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
index 984ea9051a8..4db6813bef1 100644
--- a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
@@ -153,7 +153,7 @@ export const RowMenu = ({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <div className="relative">
-            <Button type="default" className="px-1.5" icon={<MoreVertical />} />
+            <Button variant="default" className="px-1.5" icon={<MoreVertical />} />
             {hasUpdate && (
               <span className="absolute -top-0.5 -right-0.5 h-2 w-2 bg-brand rounded-full" />
             )}
diff --git a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx
index 12f7d0e6954..d82a3cc58c2 100644
--- a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx
+++ b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx
@@ -265,7 +265,7 @@ export const RestoreToNewProject = () => {
               The new project {(restoringClone?.target_project as any)?.name || ''} is currently
               being created. You'll be able to restore again once the project is ready.
             </p>
-            <Button asChild type="default" className="mt-2">
+            <Button asChild variant="default" className="mt-2">
               <Link href={`/project/${restoringClone?.target_project?.ref ?? '_'}`}>
                 Go to new project
               </Link>
diff --git a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
index e5c71a3a5c7..c1ce8ba4ebc 100644
--- a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
@@ -156,7 +156,7 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 className="px-1"
                 icon={<MoreVertical />}
                 aria-label={`${role.name} actions`}
@@ -214,12 +214,12 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
             </div>
             {!disabled && (
               <div className="py-4 flex items-center space-x-2 justify-end">
-                <Button type="default" disabled={!isDirty || isUpdating} onClick={() => reset()}>
+                <Button variant="default" disabled={!isDirty || isUpdating} onClick={() => reset()}>
                   Cancel
                 </Button>
                 <Button
-                  type="primary"
-                  htmlType="submit"
+                  variant="primary"
+                  type="submit"
                   disabled={!isDirty || isUpdating}
                   loading={isUpdating}
                 >
diff --git a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
index c71c19c3532..8b023a30e8b 100644
--- a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
@@ -138,7 +138,7 @@ export const RolesList = () => {
               filterString && (
                 <Button
                   size="tiny"
-                  type="text"
+                  variant="text"
                   onClick={() => setFilterString('')}
                   className="px-1 mr-1"
                 >
@@ -220,7 +220,7 @@ export const RolesList = () => {
               side="bottom"
             >
               <Button
-                type="primary"
+                variant="primary"
                 icon={<Plus size={12} />}
                 onClick={() => setIsCreatingRole(true)}
               >
@@ -229,7 +229,7 @@ export const RolesList = () => {
             </Shortcut>
           ) : (
             <ButtonTooltip
-              type="primary"
+              variant="primary"
               disabled
               icon={<Plus size={12} />}
               tooltip={{
diff --git a/apps/studio/components/interfaces/Database/Schemas/FindTableSelector.tsx b/apps/studio/components/interfaces/Database/Schemas/FindTableSelector.tsx
index b061c444829..d679fd2c895 100644
--- a/apps/studio/components/interfaces/Database/Schemas/FindTableSelector.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/FindTableSelector.tsx
@@ -75,7 +75,7 @@ export const FindTableSelector = forwardRef<HTMLDivElement, FindTableSelectorPro
           <PopoverTrigger asChild>
             <Button
               size={size}
-              type="default"
+              variant="default"
               disabled={disabled}
               data-testid="find-table-selector"
               icon={<Search size={14} strokeWidth={1.5} className="text-foreground-muted" />}
@@ -120,7 +120,7 @@ export const FindTableSelector = forwardRef<HTMLDivElement, FindTableSelectorPro
                             <Button
                               block
                               size="tiny"
-                              type="default"
+                              variant="default"
                               loading={isFetchingNextPage}
                               onClick={() => fetchNextPage()}
                             >
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 4293e97eed1..33fa3698d31 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -388,7 +388,7 @@ export const SchemaGraph = () => {
               <div className="flex items-center gap-x-2">
                 <div className="flex items-center gap-0">
                   <ButtonTooltip
-                    type="default"
+                    variant="default"
                     className="rounded-r-none border-r-0"
                     icon={copied ? <Check data-testid="copy-sql-ready" /> : <Copy />}
                     onClick={copyAsSQL}
@@ -412,7 +412,7 @@ export const SchemaGraph = () => {
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button
-                        type="default"
+                        variant="default"
                         size="tiny"
                         className="rounded-l-none pl-1 pr-0"
                         icon={<ChevronDown size={12} />}
@@ -463,7 +463,7 @@ export const SchemaGraph = () => {
                     tooltipOpen={autoLayoutDialogOpen ? false : undefined}
                   >
                     <AlertDialogTrigger asChild>
-                      <Button type="default">Auto layout</Button>
+                      <Button variant="default">Auto layout</Button>
                     </AlertDialogTrigger>
                   </Shortcut>
                   <AlertDialogContent>
@@ -513,7 +513,7 @@ export const SchemaGraph = () => {
                 }
               >
                 {canAddTables && (
-                  <Button asChild className="mt-2" type="default" icon={<Plus />}>
+                  <Button asChild className="mt-2" variant="default" icon={<Plus />}>
                     <Link href={`/project/${ref}/editor?create=table`}>New table</Link>
                   </Button>
                 )}
@@ -559,7 +559,7 @@ export const SchemaGraph = () => {
                   {hasNextPage && (
                     <Panel position="bottom-center" className="mb-11!">
                       <Button
-                        type="default"
+                        variant="default"
                         size="tiny"
                         loading={isFetchingNextPage}
                         onClick={() => {
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
index 46b0451df17..1d3b6457b6d 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
@@ -122,7 +122,7 @@ const TableNodeComponent = ({
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button
-                          type="text"
+                          variant="text"
                           className="px-0 w-[16px] h-[16px] rounded-sm nodrag nopan"
                         >
                           <MoreVertical size={10} />
@@ -313,7 +313,7 @@ const TableNodeComponent = ({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    type="text"
+                    variant="text"
                     // Use opacity to hide the button so that it remains accessible (users can tab to it)
                     className="opacity-0 focus:opacity-100 group-hover:opacity-100 data-open:opacity-100 absolute right-0 top-1/2 -translate-y-1/2 px-0 mr-1 w-[16px] h-[16px] rounded-sm"
                   >
diff --git a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx
index b282284b55c..89d68956e09 100644
--- a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx
+++ b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx
@@ -363,7 +363,7 @@ export const ColumnList = ({
                         {!isSchemaLocked && isTableEntity && (
                           <div className="flex justify-end gap-2">
                             <ButtonTooltip
-                              type="default"
+                              variant="default"
                               disabled={!canUpdateColumns}
                               onClick={() => onEditColumn(column)}
                               tooltip={{
@@ -379,7 +379,11 @@ export const ColumnList = ({
                             </ButtonTooltip>
                             <DropdownMenu>
                               <DropdownMenuTrigger asChild>
-                                <Button type="default" className="px-1" icon={<MoreVertical />} />
+                                <Button
+                                  variant="default"
+                                  className="px-1"
+                                  icon={<MoreVertical />}
+                                />
                               </DropdownMenuTrigger>
                               <DropdownMenuContent side="bottom" align="end" className="w-32">
                                 <DropdownMenuItemTooltip
diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx
index 9b7f5967ef4..796a72ec4d2 100644
--- a/apps/studio/components/interfaces/Database/Tables/TableList.tsx
+++ b/apps/studio/components/interfaces/Database/Tables/TableList.tsx
@@ -267,7 +267,7 @@ export const TableList = ({
             <PopoverTrigger asChild>
               <Button
                 size="tiny"
-                type={visibleTypes.length !== 5 ? 'default' : 'dashed'}
+                variant={visibleTypes.length !== 5 ? 'default' : 'dashed'}
                 className="px-1"
                 icon={<Filter />}
               />
@@ -297,7 +297,7 @@ export const TableList = ({
                       </div>
                       <Button
                         size="tiny"
-                        type="default"
+                        variant="default"
                         onClick={() => setVisibleTypes([value])}
                         className="transition opacity-0 group-hover:opacity-100 h-auto px-1 py-0.5"
                       >
@@ -500,7 +500,7 @@ export const TableList = ({
                         </TableCell>
                         <TableCell>
                           <div className="flex justify-end gap-2">
-                            <Button asChild type="default">
+                            <Button asChild variant="default">
                               <Link href={`/project/${ref}/database/tables/${x.id}`}>
                                 View columns
                               </Link>
@@ -510,7 +510,7 @@ export const TableList = ({
                               <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
                                   <Button
-                                    type="default"
+                                    variant="default"
                                     className="px-1"
                                     icon={<MoreVertical />}
                                     aria-label={`Table ${x.name} actions`}
diff --git a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
index 01a73b7fe65..1731d0b3ae5 100644
--- a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
@@ -78,7 +78,7 @@ const NoticeBox = () => {
         title="Only functions that return a trigger will be displayed below"
         description={`You can make functions by using the Database Functions`}
         button={
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href={`/project/${ref}/database/functions`}>Go to Functions</Link>
           </Button>
         }
diff --git a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggerList.tsx b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggerList.tsx
index 64a25391311..6e8b1934254 100644
--- a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggerList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggerList.tsx
@@ -106,7 +106,7 @@ export const EventTriggerList = ({
             <TableCell className="space-x-2">
               {canEditTrigger ? (
                 <Button
-                  type="text"
+                  variant="text"
                   onClick={() => onEditTrigger(trigger)}
                   title={trigger.name}
                   className="text-link-table-cell text-left text-sm disabled:opacity-90 disabled:no-underline min-w-0 p-0 hover:bg-transparent font-medium max-w-48 title"
@@ -168,7 +168,7 @@ export const EventTriggerList = ({
                   <DropdownMenuTrigger asChild>
                     <Button
                       aria-label="More options"
-                      type="default"
+                      variant="default"
                       className="px-1"
                       icon={<MoreVertical />}
                     />
@@ -205,7 +205,7 @@ export const EventTriggerList = ({
               ) : (
                 <ButtonTooltip
                   disabled
-                  type="default"
+                  variant="default"
                   className="px-1"
                   icon={<MoreVertical />}
                   tooltip={{
diff --git a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx
index b275b18b842..9bfbc57e35a 100644
--- a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx
@@ -225,13 +225,13 @@ export const EventTriggersList = () => {
               onTrigger={createEventTrigger}
               side="bottom"
             >
-              <Button type="primary" icon={<Plus size={12} />} onClick={createEventTrigger}>
+              <Button variant="primary" icon={<Plus size={12} />} onClick={createEventTrigger}>
                 New trigger
               </Button>
             </Shortcut>
           ) : (
             <ButtonTooltip
-              type="primary"
+              variant="primary"
               icon={<Plus size={12} />}
               disabled
               tooltip={{
@@ -254,7 +254,7 @@ export const EventTriggersList = () => {
           description="Event triggers run on database-level events like DDL commands."
         >
           <ButtonTooltip
-            type="default"
+            variant="default"
             disabled={!canUpdateEventTriggers}
             onClick={createEventTrigger}
             tooltip={{
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
index 35a1c109877..8ab5c68edc8 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
@@ -453,7 +453,7 @@ export const TriggerSheet = ({
                                   </p>
                                 </div>
                                 <Button
-                                  type="default"
+                                  variant="default"
                                   onClick={() => setShowFunctionSelector(true)}
                                 >
                                   Change function
@@ -472,14 +472,14 @@ export const TriggerSheet = ({
 
           <SheetFooter className="shrink-0">
             <Button
-              type="default"
-              htmlType="reset"
+              variant="default"
+              type="reset"
               disabled={isCreating || isUpdating}
               onClick={confirmOnClose}
             >
               Cancel
             </Button>
-            <Button form={formId} htmlType="submit" loading={isCreating || isUpdating}>
+            <Button form={formId} type="submit" loading={isCreating || isUpdating}>
               {isEditing ? 'Save' : 'Create'} trigger
             </Button>
           </SheetFooter>
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/CreateTriggerButtons.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/CreateTriggerButtons.tsx
index fd82d35068b..d7754c4eb92 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/CreateTriggerButtons.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/CreateTriggerButtons.tsx
@@ -29,7 +29,7 @@ export const CreateTriggerButtons = ({
   return (
     <div className="flex items-center gap-x-2">
       <ButtonTooltip
-        type={buttonType}
+        variant={buttonType}
         disabled={!hasTables || !canCreateTriggers}
         onClick={onCreateTrigger}
         className="grow"
@@ -50,7 +50,7 @@ export const CreateTriggerButtons = ({
 
       {hasTables && (
         <ButtonTooltip
-          type="default"
+          variant="default"
           disabled={!hasTables || !canCreateTriggers}
           className="px-1 pointer-events-auto"
           icon={<AiIconAnimation size={16} />}
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
index 6d73d5fabd9..a68be46a96a 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
@@ -107,7 +107,7 @@ export const TriggerList = ({ editTrigger, duplicateTrigger, deleteTrigger }: Tr
         <TableRow key={x.id}>
           <TableCell className="space-x-2">
             <Button
-              type="text"
+              variant="text"
               disabled={isLocked || !canUpdateTriggers}
               onClick={() => editTrigger(x)}
               title={x.name}
@@ -177,7 +177,7 @@ export const TriggerList = ({ editTrigger, duplicateTrigger, deleteTrigger }: Tr
                     <DropdownMenuTrigger asChild>
                       <Button
                         aria-label="More options"
-                        type="default"
+                        variant="default"
                         className="px-1"
                         icon={<MoreVertical />}
                       />
@@ -240,7 +240,7 @@ export const TriggerList = ({ editTrigger, duplicateTrigger, deleteTrigger }: Tr
                 ) : (
                   <ButtonTooltip
                     disabled
-                    type="default"
+                    variant="default"
                     className="px-1"
                     icon={<MoreVertical />}
                     tooltip={{
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
index ef82187c5e4..fcd531e1c8c 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
@@ -525,7 +525,7 @@ export function DiskManagementForm() {
                           actions={
                             canUpdateDiskConfiguration ? (
                               <Button
-                                type="default"
+                                variant="default"
                                 onClick={() => {
                                   form.setValue('computeSize', 'ci_large')
                                 }}
@@ -552,7 +552,7 @@ export function DiskManagementForm() {
                           actions={
                             !disableDiskSizeInput ? (
                               <Button
-                                type="default"
+                                variant="default"
                                 onClick={() => {
                                   form.setValue('totalSize', suggestedDiskSizeForCustomIops, {
                                     shouldDirty: true,
@@ -611,7 +611,7 @@ export function DiskManagementForm() {
                 >
                   <FormFooterChangeBadge formState={formState} />
                   <Button
-                    type="default"
+                    variant="default"
                     onClick={() => form.reset()}
                     disabled={!isDirty}
                     size="medium"
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
index 7a1c8baa866..f41ef295700 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
@@ -32,7 +32,7 @@ export function DiskManagementPanelForm() {
           title="Disk Management has moved"
           description="Disk configuration is now managed alongside Project Compute on the new Compute and Disk page."
           actions={
-            <Button type="default" asChild>
+            <Button variant="default" asChild>
               <Link href={`/project/${projectRef}/settings/compute-and-disk`}>
                 Go to Compute and Disk
               </Link>
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx
index 1f13db93f9f..67839cc3310 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx
@@ -93,8 +93,8 @@ export const DiskManagementReviewAndSubmitDialog = ({
       <DialogTrigger asChild>
         <ButtonTooltip
           size={buttonSize}
-          htmlType="submit"
-          type="primary"
+          type="submit"
+          variant="primary"
           onClick={async (e) => {
             e.preventDefault()
             const isValid = await form.trigger()
@@ -268,14 +268,14 @@ export const DiskManagementReviewAndSubmitDialog = ({
         )}
 
         <DialogFooter className="px-5 py-4">
-          <Button block size="large" type="default" onClick={() => setIsDialogOpen(false)}>
+          <Button block size="large" variant="default" onClick={() => setIsDialogOpen(false)}>
             Cancel
           </Button>
           <Button
             block
-            type="primary"
+            variant="primary"
             size="large"
-            htmlType="submit"
+            type="submit"
             loading={loading}
             onClick={async () => {
               await onSubmit(form.getValues())
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
index aca13caeae1..a1ec081b884 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
@@ -379,7 +379,7 @@ export function ComputeSizeField({ form, disabled }: ComputeSizeFieldProps) {
 
             {!isLoading && !addonsError && hasHiddenOptions && (
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
                 className="mt-4"
                 aria-expanded={showAllSizes}
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx
index e79ddfcf0e9..df65d74b239 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx
@@ -120,8 +120,8 @@ export function DiskSizeField({
                     <InputGroupText>GB</InputGroupText>
                     {isDirty ? (
                       <InputGroupButton
-                        htmlType="button"
-                        type="default"
+                        type="button"
+                        variant="default"
                         size="tiny"
                         className="px-2 text-foreground-light"
                         onClick={() => {
@@ -159,7 +159,7 @@ export function DiskSizeField({
             form={form}
             actions={
               <Button
-                type="default"
+                variant="default"
                 onClick={() => {
                   setValue('storageType', 'io2')
                   trigger('provisionedIOPS')
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
index 540689bce5a..45453392660 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
@@ -65,7 +65,7 @@ export function IOPSField({ form, disableInput }: IOPSFieldProps) {
                   form={form}
                   actions={
                     <Button
-                      type="default"
+                      variant="default"
                       onClick={() => {
                         setValue('computeSize', reccomendedComputeSize ?? 'ci_nano')
                         trigger('provisionedIOPS')
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx
index 15ad3687864..fde0d5b5e8c 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx
@@ -56,7 +56,7 @@ export function SpendCapDisabledSection({ currentDiskSizeGb }: SpendCapDisabledS
             <div className="mt-3">
               <Link
                 href={`/org/${org?.slug}/billing?panel=costControl`}
-                className={cn(buttonVariants({ type: 'default', size: 'tiny' }))}
+                className={cn(buttonVariants({ variant: 'default', size: 'tiny' }))}
               >
                 Disable spend cap
               </Link>
diff --git a/apps/studio/components/interfaces/Docs/Description.tsx b/apps/studio/components/interfaces/Docs/Description.tsx
index e86334940e0..0696cb37c48 100644
--- a/apps/studio/components/interfaces/Docs/Description.tsx
+++ b/apps/studio/components/interfaces/Docs/Description.tsx
@@ -99,7 +99,7 @@ const Description = ({ content, metadata, onChange = noop }: DescrptionProps) =>
         } ${animateCss}`}
       >
         <Button
-          type="default"
+          variant="default"
           disabled={!hasChanged}
           onClick={() => {
             setValue(contentText)
diff --git a/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx b/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx
index 9460c6d2e44..cba7c1f58de 100644
--- a/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx
+++ b/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx
@@ -74,7 +74,7 @@ export function GeneratingTypes({ selectedLang }: Props) {
           <div className="flex flex-col items-center justify-center p-10">
             {selectedLang === 'js' && (
               <Button
-                type="default"
+                variant="default"
                 disabled={isGeneratingTypes}
                 loading={isGeneratingTypes}
                 icon={<Download strokeWidth={1.5} />}
diff --git a/apps/studio/components/interfaces/Docs/LangSelector.tsx b/apps/studio/components/interfaces/Docs/LangSelector.tsx
index dc34caa2ef3..61aecee70d8 100644
--- a/apps/studio/components/interfaces/Docs/LangSelector.tsx
+++ b/apps/studio/components/interfaces/Docs/LangSelector.tsx
@@ -79,7 +79,7 @@ export const LangSelector = ({
         apiKeys.length > 0 && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button type="default" size="tiny" className="p-0 h-7 w-7">
+              <Button variant="default" size="tiny" className="p-0 h-7 w-7">
                 {selectedApiKey.key === DEFAULT_KEY.key ? (
                   <EyeOff size={12} strokeWidth={1.5} />
                 ) : (
diff --git a/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx b/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
index 6b74ca9c27d..f6a62bfb8aa 100644
--- a/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
+++ b/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
@@ -13,7 +13,7 @@ const PublicSchemaNotEnabledAlert = () => {
         You will not be able to query tables and views in the public schema via supabase-js or HTTP
         clients. Configure this behavior in your project's Data API settings.
       </p>
-      <Button asChild type="default" className="mt-1">
+      <Button asChild variant="default" className="mt-1">
         <Link
           href={`/project/${projectRef}/settings/api#postgrest-config`}
           className="no-underline!"
diff --git a/apps/studio/components/interfaces/EdgeFunctions/DeployEdgeFunctionButton.tsx b/apps/studio/components/interfaces/EdgeFunctions/DeployEdgeFunctionButton.tsx
index cc5b4495b32..5da03e0257e 100644
--- a/apps/studio/components/interfaces/EdgeFunctions/DeployEdgeFunctionButton.tsx
+++ b/apps/studio/components/interfaces/EdgeFunctions/DeployEdgeFunctionButton.tsx
@@ -31,7 +31,7 @@ export const DeployEdgeFunctionButton = () => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild disabled={!isProjectActive}>
         <ButtonTooltip
-          type="primary"
+          variant="primary"
           disabled={!isProjectActive}
           iconRight={<ChevronDown className="w-4 h-4" strokeWidth={1.5} />}
           tooltip={{
diff --git a/apps/studio/components/interfaces/EdgeFunctions/EdgeFunctionsSortDropdown.tsx b/apps/studio/components/interfaces/EdgeFunctions/EdgeFunctionsSortDropdown.tsx
index 2c1368d4b7f..096de0699b7 100644
--- a/apps/studio/components/interfaces/EdgeFunctions/EdgeFunctionsSortDropdown.tsx
+++ b/apps/studio/components/interfaces/EdgeFunctions/EdgeFunctionsSortDropdown.tsx
@@ -43,7 +43,7 @@ export const EdgeFunctionsSortDropdown = ({ value, onChange }: EdgeFunctionsSort
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           icon={
             value.includes('desc') ? (
               <ArrowDownWideNarrow size={14} />
diff --git a/apps/studio/components/interfaces/ErrorHandling/TroubleshootingSections.tsx b/apps/studio/components/interfaces/ErrorHandling/TroubleshootingSections.tsx
index 7cb970f77b9..bfe131c09b0 100644
--- a/apps/studio/components/interfaces/ErrorHandling/TroubleshootingSections.tsx
+++ b/apps/studio/components/interfaces/ErrorHandling/TroubleshootingSections.tsx
@@ -65,7 +65,7 @@ export function RestartDatabaseTroubleshootingSection({
             <p className="text-sm text-foreground-light mb-3">
               Restarting your project can help resolve timeout errors or stale connections.
             </p>
-            <Button type="default" size="tiny" onClick={handleClick}>
+            <Button variant="default" size="tiny" onClick={handleClick}>
               Restart project
             </Button>
           </div>
@@ -109,7 +109,7 @@ export function TroubleshootingGuideSection({
           {description && <p className="text-sm text-foreground-light mb-3">{description}</p>}
           <Button
             asChild
-            type="default"
+            variant="default"
             size="tiny"
             onClick={() =>
               track('inline_error_troubleshooter_action_clicked', {
diff --git a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx
index 559501fce20..6468599c6a1 100644
--- a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx
+++ b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx
@@ -129,11 +129,11 @@ export function ExplainHeader({ mode, onToggleMode, summary, id, rows }: Explain
               onOpenAssistant={handleExplainWithAI}
               telemetrySource="explain_visualizer"
               size="tiny"
-              type="default"
+              variant="default"
             />
           )}
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             icon={isVisual ? <Code size={14} /> : <Eye size={14} />}
             onClick={onToggleMode}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index 1d584d547fb..324eda55ee6 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -215,13 +215,13 @@ export const EdgeFunctionDetails = () => {
 
                     <CardFooter className="flex justify-end space-x-2">
                       {form.formState.isDirty && (
-                        <Button type="default" onClick={() => form.reset()}>
+                        <Button variant="default" onClick={() => form.reset()}>
                           Cancel
                         </Button>
                       )}
                       <Button
-                        type="primary"
-                        htmlType="submit"
+                        variant="primary"
+                        type="submit"
                         loading={isUpdating}
                         disabled={!canUpdateEdgeFunction || !form.formState.isDirty}
                       >
@@ -259,7 +259,7 @@ export const EdgeFunctionDetails = () => {
                   ))}
                   {selectedTab === 'curl' && (
                     <Button
-                      type="default"
+                      variant="default"
                       className="ml-auto -translate-y-2 translate-x-3"
                       onClick={() => setShowKey(!showKey)}
                     >
@@ -354,7 +354,7 @@ export const EdgeFunctionDetails = () => {
                 </AlertDescription>
                 <AlertDescription className="mt-3">
                   <Button
-                    type="danger"
+                    variant="danger"
                     disabled={!canUpdateEdgeFunction}
                     loading={selectedFunction?.id === undefined}
                     onClick={() => setShowDeleteModal(true)}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
index ac14a0b89d6..9f4126eebff 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
@@ -249,7 +249,7 @@ const EdgeFunctionTesterSheetContent = ({ visible, onClose }: EdgeFunctionTester
       <div className="flex items-center justify-between">
         <Label className="text-foreground text-sm">{label}</Label>
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           icon={<Plus size={14} />}
           onClick={() => addKeyValuePair(type)}
@@ -293,7 +293,7 @@ const EdgeFunctionTesterSheetContent = ({ visible, onClose }: EdgeFunctionTester
             <div className="flex items-center justify-center">
               {(type === 'headers' ? headerFields : queryParamFields).length > 1 && (
                 <Button
-                  type="text"
+                  variant="text"
                   size="tiny"
                   icon={<X strokeWidth={1.5} size={14} />}
                   className="w-6 h-6"
@@ -472,8 +472,8 @@ const EdgeFunctionTesterSheetContent = ({ visible, onClose }: EdgeFunctionTester
                 />
                 <ShortcutTooltip shortcutId={SHORTCUT_IDS.FUNCTION_DETAIL_SUBMIT_TEST} side="top">
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     loading={isPending}
                     disabled={isPending}
                     onClick={() =>
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx
index 86699312c17..db448f5e29c 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx
@@ -102,7 +102,7 @@ export const EdgeFunctionInvocationsSection = ({
                     return (
                       <Button
                         key={`function-filter-${item.key}`}
-                        type={interval === item.key ? 'secondary' : 'default'}
+                        variant={interval === item.key ? 'secondary' : 'default'}
                         onClick={() => onIntervalChange(item.key)}
                         className={getSegmentedButtonClassName(
                           index,
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx
index 7253d00f01c..ac48e0c7ffc 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx
@@ -205,7 +205,7 @@ export const EdgeFunctionRecentErrors = ({
               </PageSectionSummary>
               <PageSectionAside>
                 <Button
-                  type="default"
+                  variant="default"
                   size="tiny"
                   icon={<ExternalLink size={14} />}
                   onClick={() =>
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx
index 7b45804ea2b..399a8692a88 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx
@@ -39,7 +39,7 @@ export const EdgeFunctionRecentInvocations = ({
           </p>
         </div>
         <Button
-          type="default"
+          variant="default"
           loading={isLoading}
           disabled={isLoading}
           icon={<RefreshCw size={14} />}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
index b2aec399578..9072c012a75 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
@@ -241,7 +241,7 @@ export const AddNewSecretForm = () => {
                             />
                           </FormControl>
                           <Button
-                            type="default"
+                            variant="default"
                             className="w-[34px] h-[34px] shrink-0 p-0"
                             aria-label="Remove secret"
                             icon={<Trash size={12} />}
@@ -281,7 +281,7 @@ export const AddNewSecretForm = () => {
                             <Tooltip>
                               <TooltipTrigger asChild>
                                 <Button
-                                  type="text"
+                                  variant="text"
                                   className="absolute right-3 top-2 px-1"
                                   aria-label={
                                     isSecretVisible(fieldItem.id)
@@ -310,10 +310,10 @@ export const AddNewSecretForm = () => {
               </p>
 
               <div className="flex items-center space-x-2">
-                <Button type="default" onClick={handleAddAnotherSecret}>
+                <Button variant="default" onClick={handleAddAnotherSecret}>
                   Add another
                 </Button>
-                <Button type="primary" htmlType="submit" disabled={isCreating} loading={isCreating}>
+                <Button variant="primary" type="submit" disabled={isCreating} loading={isCreating}>
                   {isCreating ? 'Saving...' : fields.length > 1 ? 'Bulk save' : 'Save'}
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
index 7349d9768e7..510261b96d4 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
@@ -70,7 +70,7 @@ const EdgeFunctionSecret = ({ secret, onSelectEdit, onSelectDelete }: EdgeFuncti
             <DropdownMenuTrigger asChild>
               <Button
                 aria-label="More options"
-                type="default"
+                variant="default"
                 className="px-1"
                 icon={<MoreVertical />}
               />
@@ -78,7 +78,7 @@ const EdgeFunctionSecret = ({ secret, onSelectEdit, onSelectDelete }: EdgeFuncti
             <DropdownMenuContent side="bottom" align="end" className="w-52">
               <DropdownMenuItem asChild>
                 <ButtonTooltip
-                  type="text"
+                  variant="text"
                   icon={<Edit2 size={14} />}
                   className="w-full justify-start group text-inherit"
                   disabled={!canUpdateSecrets}
@@ -100,7 +100,7 @@ const EdgeFunctionSecret = ({ secret, onSelectEdit, onSelectDelete }: EdgeFuncti
 
               <DropdownMenuItem asChild>
                 <ButtonTooltip
-                  type="text"
+                  variant="text"
                   icon={<Trash size={14} className="group-not-disabled:text-destructive" />}
                   className="w-full justify-start group text-inherit"
                   disabled={!canUpdateSecrets}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx
index d39c49861f6..178105aa4e7 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx
@@ -147,7 +147,7 @@ export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetPro
                           }}
                         />
                         <Button
-                          type="text"
+                          variant="text"
                           className="absolute right-1 top-1 px-1"
                           icon={showSecretValue ? <EyeOff /> : <Eye />}
                           onClick={() => setShowSecretValue(!showSecretValue)}
@@ -162,10 +162,10 @@ export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetPro
         </SheetSection>
 
         <SheetFooter>
-          <Button disabled={isUpdating} type="default" onClick={confirmOnClose}>
+          <Button disabled={isUpdating} variant="default" onClick={confirmOnClose}>
             Cancel
           </Button>
-          <Button form={FORM_ID} htmlType="submit" disabled={!isValid} loading={isUpdating}>
+          <Button form={FORM_ID} type="submit" disabled={!isValid} loading={isUpdating}>
             Save
           </Button>
         </SheetFooter>
diff --git a/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx b/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
index f7016727def..412c4564812 100644
--- a/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
+++ b/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
@@ -62,7 +62,7 @@ export const FunctionsEmptyState = () => {
                   Create and edit functions directly in the browser. Download to local at any time.
                 </p>
                 <Button
-                  type="default"
+                  variant="default"
                   onClick={() => {
                     router.push(`/project/${ref}/functions/new`)
                     track('edge_function_via_editor_button_clicked', {
@@ -85,7 +85,7 @@ export const FunctionsEmptyState = () => {
                   function.
                 </p>
                 <Button
-                  type="default"
+                  variant="default"
                   onClick={() => {
                     openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
                     aiSnap.newChat({
@@ -136,7 +136,7 @@ export const FunctionsEmptyState = () => {
               </p>
 
               <Button
-                type="default"
+                variant="default"
                 onClick={() => {
                   setCreateMethod('cli')
                   track('edge_function_via_cli_button_clicked', { origin: 'no_functions_block' })
diff --git a/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx b/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx
index 9185e6518f4..4a091db1df4 100644
--- a/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx
+++ b/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx
@@ -119,7 +119,7 @@ export const TerminalInstructions = forwardRef<
                 You can create a secure access token in your account section
               </p>
             </div>
-            <Button type="default" onClick={() => router.push('/account/tokens')}>
+            <Button variant="default" onClick={() => router.push('/account/tokens')}>
               Access tokens
             </Button>
           </div>
@@ -133,7 +133,7 @@ export const TerminalInstructions = forwardRef<
             </div>
             <div className="flex gap-2">
               <DocsButton href={`${DOCS_URL}/guides/functions`} />
-              <Button asChild type="default" icon={<ExternalLink />}>
+              <Button asChild variant="default" icon={<ExternalLink />}>
                 <a
                   target="_blank"
                   rel="noreferrer"
diff --git a/apps/studio/components/interfaces/Home/ClientLibrary.tsx b/apps/studio/components/interfaces/Home/ClientLibrary.tsx
index ad7d6f459fb..b86e3627f9f 100644
--- a/apps/studio/components/interfaces/Home/ClientLibrary.tsx
+++ b/apps/studio/components/interfaces/Home/ClientLibrary.tsx
@@ -45,14 +45,14 @@ export const ClientLibrary = ({
         <div className="flex gap-2">
           {docsUrl && (
             <a href={docsUrl} target="_blank" rel="noreferrer">
-              <Button icon={<BookOpen />} type="default">
+              <Button icon={<BookOpen />} variant="default">
                 Docs
               </Button>
             </a>
           )}
           {gitUrl && (
             <a href={gitUrl} target="_blank" rel="noreferrer">
-              <Button icon={<Github />} type="default">
+              <Button icon={<Github />} variant="default">
                 <span className="hidden md:inline">See</span> GitHub
               </Button>
             </a>
diff --git a/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
index 3fa7844b6ce..1dd6a049805 100644
--- a/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
+++ b/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
@@ -47,13 +47,13 @@ export const NewProjectPanel = () => {
                 </p>
               </div>
               <div className="flex flex-wrap items-center gap-2">
-                <Button asChild type="default" icon={<TableEditor strokeWidth={1.5} />}>
+                <Button asChild variant="default" icon={<TableEditor strokeWidth={1.5} />}>
                   <EditorIndexPageLink projectRef={ref}>Table Editor</EditorIndexPageLink>
                 </Button>
-                <Button asChild type="default" icon={<SqlEditor strokeWidth={1.5} />}>
+                <Button asChild variant="default" icon={<SqlEditor strokeWidth={1.5} />}>
                   <Link href={`/project/${ref}/sql/new`}>SQL Editor</Link>
                 </Button>
-                <Button asChild type="default" icon={<ExternalLink />}>
+                <Button asChild variant="default" icon={<ExternalLink />}>
                   <Link href={`${DOCS_URL}/guides/database`} target="_blank" rel="noreferrer">
                     About Database
                   </Link>
@@ -89,14 +89,14 @@ export const NewProjectPanel = () => {
                       </p>
                     </div>
                     <div className="flex items-center space-x-2">
-                      <Button type="default" asChild>
+                      <Button variant="default" asChild>
                         <Link href={`/project/${ref}/auth/users`}>Explore Auth</Link>
                       </Button>
 
                       <Button
                         className="translate-y-px"
                         icon={<ExternalLink />}
-                        type="default"
+                        variant="default"
                         asChild
                       >
                         <Link href={`${DOCS_URL}/guides/auth`} target="_blank" rel="noreferrer">
@@ -121,14 +121,14 @@ export const NewProjectPanel = () => {
                       </p>
                     </div>
                     <div className="flex items-center space-x-2">
-                      <Button type="default" asChild>
+                      <Button variant="default" asChild>
                         <Link href={`/project/${ref}/storage/buckets`}>Explore Storage</Link>
                       </Button>
 
                       <Button
                         className="translate-y-px"
                         icon={<ExternalLink />}
-                        type="default"
+                        variant="default"
                         asChild
                       >
                         <Link href={`${DOCS_URL}/guides/storage`} target="_blank" rel="noreferrer">
@@ -154,13 +154,13 @@ export const NewProjectPanel = () => {
                       </p>
                     </div>
                     <div className="flex items-center space-x-2">
-                      <Button type="default" asChild>
+                      <Button variant="default" asChild>
                         <Link href={`/project/${ref}/functions`}>Explore Functions</Link>
                       </Button>
                       <Button
                         className="translate-y-px"
                         icon={<ExternalLink />}
-                        type="default"
+                        variant="default"
                         asChild
                       >
                         <Link
@@ -188,13 +188,13 @@ export const NewProjectPanel = () => {
                       </p>
                     </div>
                     <div className="flex items-center space-x-2">
-                      <Button type="default" asChild>
+                      <Button variant="default" asChild>
                         <Link href={`/project/${ref}/realtime/inspector`}>Explore Realtime</Link>
                       </Button>
                       <Button
                         className="translate-y-px"
                         icon={<ExternalLink />}
-                        type="default"
+                        variant="default"
                         asChild
                       >
                         <Link href={`${DOCS_URL}/guides/realtime`} target="_blank" rel="noreferrer">
@@ -221,7 +221,7 @@ export const NewProjectPanel = () => {
             </p>
           </div>
           <div className="flex items-center space-x-2">
-            <Button asChild type="default" icon={<Settings size={16} strokeWidth={1.5} />}>
+            <Button asChild variant="default" icon={<Settings size={16} strokeWidth={1.5} />}>
               <Link href={`/project/${ref}/settings/api-keys`}>API Keys settings</Link>
             </Button>
             <DocsButton href={`${DOCS_URL}/guides/database/api`} />
diff --git a/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx b/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
index 4c4aa6a94a0..95f379cbfcd 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
@@ -86,7 +86,7 @@ export const NoProjectsState = ({ slug }: { slug: string }) => {
       description="Launch a complete backend built on Postgres."
     >
       {projectCreationEnabled && (
-        <Button size="tiny" type="default" asChild icon={<Plus />}>
+        <Button size="tiny" variant="default" asChild icon={<Plus />}>
           <Link href={`/new/${slug}`}>New project</Link>
         </Button>
       )}
@@ -100,7 +100,7 @@ export const NoOrganizationsState = () => {
       title="Create an organization"
       description="Manage your team and projects in one place."
     >
-      <Button size="tiny" type="primary" asChild icon={<Plus />}>
+      <Button size="tiny" variant="primary" asChild icon={<Plus />}>
         <Link href="/new">New organization</Link>
       </Button>
     </EmptyStatePresentational>
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index 92f1462422e..92e32ddd31c 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -82,7 +82,7 @@ export const ProjectCard = ({
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button
-                          type="text"
+                          variant="text"
                           icon={<MoreVertical size={14} />}
                           className="w-6 h-6 px-0"
                           onClick={(e) => {
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
index 64c1f588812..8a0e8700e1d 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
@@ -173,7 +173,7 @@ export const ProjectTableRow = ({
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="default"
+                  variant="default"
                   icon={<MoreVertical />}
                   aria-label="More actions"
                   className="w-7"
diff --git a/apps/studio/components/interfaces/Home/ServiceStatus.tsx b/apps/studio/components/interfaces/Home/ServiceStatus.tsx
index 9b99b19e969..367f2f6e58f 100644
--- a/apps/studio/components/interfaces/Home/ServiceStatus.tsx
+++ b/apps/studio/components/interfaces/Home/ServiceStatus.tsx
@@ -303,7 +303,7 @@ export const ServiceStatus = () => {
     <Popover modal={false} open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           icon={
             isLoadingChecks || (!allServicesOperational && isProjectNew && isMigrationLoading) ? (
               <LoaderIcon />
diff --git a/apps/studio/components/interfaces/HomePageActions.tsx b/apps/studio/components/interfaces/HomePageActions.tsx
index c83611a1732..adb9f6ac43e 100644
--- a/apps/studio/components/interfaces/HomePageActions.tsx
+++ b/apps/studio/components/interfaces/HomePageActions.tsx
@@ -94,7 +94,7 @@ export const HomePageActions = ({ slug: _slug, hideNewProject = false }: HomePag
               <Button
                 key="clear"
                 size="tiny"
-                type="text"
+                variant="text"
                 icon={<X />}
                 onClick={() => setSearch('')}
                 className="p-0 h-5 w-5"
@@ -155,7 +155,7 @@ export const HomePageActions = ({ slug: _slug, hideNewProject = false }: HomePag
             }}
             side="bottom"
           >
-            <Button asChild icon={<Plus />} type="primary" size="tiny">
+            <Button asChild icon={<Plus />} variant="primary" size="tiny">
               <Link href={`/new/${slug}`}>New project</Link>
             </Button>
           </Shortcut>
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx
index bd43227d748..31a2d3e0a91 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx
@@ -390,7 +390,7 @@ export const CreateCronJobSheet = ({ open, selectedCronJob, onClose }: CreateCro
                               within your cron jobs
                             </span>
                             <ButtonTooltip
-                              type="default"
+                              variant="default"
                               className="w-min"
                               disabled={!canToggleExtensions}
                               onClick={() => setShowEnableExtensionModal(true)}
@@ -437,8 +437,8 @@ export const CreateCronJobSheet = ({ open, selectedCronJob, onClose }: CreateCro
             <SheetFooter>
               <Button
                 size="tiny"
-                type="default"
-                htmlType="button"
+                variant="default"
+                type="button"
                 onClick={confirmOnClose}
                 disabled={isLoading}
               >
@@ -446,9 +446,9 @@ export const CreateCronJobSheet = ({ open, selectedCronJob, onClose }: CreateCro
               </Button>
               <Button
                 size="tiny"
-                type="primary"
+                variant="primary"
                 form={FORM_ID}
-                htmlType="submit"
+                type="submit"
                 disabled={isLoading}
                 loading={isLoading}
               >
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
index b191cd0eb7e..b7fa1e6b928 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
@@ -131,7 +131,7 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
                   {PRESETS.map((preset) => (
                     <li key={preset.name}>
                       <Button
-                        type="outline"
+                        variant="outline"
                         onClick={() => {
                           if (useNaturalLanguage) {
                             setUseNaturalLanguage(false)
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx
index ef839767752..a999b6fc37e 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx
@@ -114,13 +114,13 @@ export const CronJobPage = () => {
   const secondaryActions = [
     <Button
       key="edit"
-      type="outline"
+      variant="outline"
       icon={<Edit3 strokeWidth={1.5} size="14" />}
       onClick={() => setIsEditSheetOpen(true)}
     >
       Edit
     </Button>,
-    <Button key="view-logs" asChild type="outline" icon={<List strokeWidth={1.5} size="14" />}>
+    <Button key="view-logs" asChild variant="outline" icon={<List strokeWidth={1.5} size="14" />}>
       <Link
         target="_blank"
         rel="noopener noreferrer"
@@ -131,7 +131,7 @@ export const CronJobPage = () => {
     </Button>,
     ...(isValidEdgeFunction
       ? [
-          <Button key="view-edge-logs" asChild type="outline">
+          <Button key="view-edge-logs" asChild variant="outline">
             <Link
               target="_blank"
               rel="noopener noreferrer"
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
index 1b2bd728fc0..bee4c722762 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
@@ -147,7 +147,7 @@ export const CronJobTableCell = ({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               loading={isRunning}
               className="h-6 w-6"
               icon={<MoreVertical />}
@@ -226,11 +226,11 @@ export const CronJobTableCell = ({
             </p>
           </DialogSection>
           <DialogFooter>
-            <Button type="default" onClick={() => setShowToggleModal(false)}>
+            <Button variant="default" onClick={() => setShowToggleModal(false)}>
               Cancel
             </Button>
             <Button
-              type={active ? 'warning' : 'primary'}
+              variant={active ? 'warning' : 'primary'}
               loading={isToggling}
               onClick={onConfirmToggle}
             >
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx
index ba7a6a30ffe..1280039dd02 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx
@@ -77,7 +77,7 @@ const CronJobRunDetailsOverflowDialog = ({
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="default">Learn more</Button>
+        <Button variant="default">Learn more</Button>
       </DialogTrigger>
       <DialogContent
         aria-describedby={undefined}
@@ -157,7 +157,7 @@ const CronJobRunDetailsOverflowDialog = ({
                   </Select>
                 </div>
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isBusy}
                   onClick={() => runBatchedDeletion(cleanupInterval)}
                 >
@@ -188,7 +188,7 @@ const CronJobRunDetailsOverflowDialog = ({
                 <Button
                   block
                   size="small"
-                  type="default"
+                  variant="default"
                   className="mt-1"
                   loading={isScheduling}
                   disabled={isScheduling}
@@ -232,7 +232,7 @@ const DeletionProgress = ({ progress, onCancel }: DeletionProgressProps) => {
         <span className="text-xs text-foreground-light">
           Deleted {totalRowsDeleted.toLocaleString()} rows so far...
         </span>
-        <Button type="outline" size="tiny" onClick={onCancel}>
+        <Button variant="outline" size="tiny" onClick={onCancel}>
           Cancel
         </Button>
       </div>
@@ -262,7 +262,7 @@ const DeletionError = ({ error, onRetry }: DeletionErrorProps) => (
       <XCircle size={16} />
       <span className="text-sm">Deletion failed: {error}</span>
     </div>
-    <Button type="default" size="small" onClick={onRetry}>
+    <Button variant="default" size="small" onClick={onRetry}>
       Retry
     </Button>
   </div>
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.EstimateErrorNotice.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.EstimateErrorNotice.tsx
index 2218c52305f..fa732dd735a 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.EstimateErrorNotice.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.EstimateErrorNotice.tsx
@@ -27,7 +27,7 @@ export const CronJobRunDetailsEstimateErrorNotice = ({
         )}
         {onRetry && (
           <Button
-            type="default"
+            variant="default"
             loading={isRetrying}
             disabled={isRetrying}
             className="mt-1"
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.Header.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.Header.tsx
index 08463c0b3b5..f023019118d 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.Header.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.Header.tsx
@@ -49,7 +49,7 @@ export const CronJobsTabHeader = ({
             <Button
               key="clear-search"
               size="tiny"
-              type="text"
+              variant="text"
               icon={<X />}
               onClick={onClearSearch}
               className="p-0 h-5 w-5"
@@ -59,7 +59,7 @@ export const CronJobsTabHeader = ({
       />
 
       <div className="flex items-center gap-x-2">
-        <Button type="default" icon={<RefreshCw />} loading={isRefreshing} onClick={onRefresh}>
+        <Button variant="default" icon={<RefreshCw />} loading={isRefreshing} onClick={onRefresh}>
           Refresh
         </Button>
         <Button onClick={onCreateJob}>Create job</Button>
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
index d14d8bd5f7e..4806d8be0cd 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
@@ -103,7 +103,7 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
         <div className="space-y-1">
           <p className="text-sm text-foreground-light">Select which edge function to trigger</p>
           {isLoading ? (
-            <Button type="default" className="justify-start" block size="small" loading>
+            <Button variant="default" className="justify-start" block size="small" loading>
               Loading edge functions...
             </Button>
           ) : (
@@ -129,7 +129,7 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
                   <PopoverTrigger asChild>
                     <FormControl>
                       <Button
-                        type="default"
+                        variant="default"
                         role="combobox"
                         aria-expanded={open}
                         aria-controls={listboxId}
diff --git a/apps/studio/components/interfaces/Integrations/DataApi/DocsMobileNav.tsx b/apps/studio/components/interfaces/Integrations/DataApi/DocsMobileNav.tsx
index 379f6703ef2..e99b776d74a 100644
--- a/apps/studio/components/interfaces/Integrations/DataApi/DocsMobileNav.tsx
+++ b/apps/studio/components/interfaces/Integrations/DataApi/DocsMobileNav.tsx
@@ -34,7 +34,7 @@ export const DocsMobileNav = ({
   return (
     <>
       <div className="sticky top-0 z-10 flex lg:hidden items-center border-b bg-surface-100 px-4 py-3">
-        <Button type="default" icon={<Menu size={16} />} onClick={() => setOpen(true)}>
+        <Button variant="default" icon={<Menu size={16} />} onClick={() => setOpen(true)}>
           Menu
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionDisabledNotice.tsx b/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionDisabledNotice.tsx
index cb57b58e8de..93a6b91e333 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionDisabledNotice.tsx
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionDisabledNotice.tsx
@@ -45,11 +45,11 @@ export const IntrospectionDisabledNotice = ({
             GraphQL introspection is disabled — docs explorer and autocomplete are unavailable.
           </span>
           <div className="flex items-center gap-1">
-            <Button type="default" size="tiny" onClick={() => setShowConfirm(true)}>
+            <Button variant="default" size="tiny" onClick={() => setShowConfirm(true)}>
               Enable introspection
             </Button>
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               icon={<ChevronDown />}
               onClick={() => setIsCollapsed(false)}
@@ -75,14 +75,14 @@ export const IntrospectionDisabledNotice = ({
               .
             </p>
             <div className="mt-3">
-              <Button type="default" onClick={() => setShowConfirm(true)}>
+              <Button variant="default" onClick={() => setShowConfirm(true)}>
                 Enable introspection
               </Button>
             </div>
           </Admonition>
           <Button
             className="absolute right-2 top-2"
-            type="text"
+            variant="text"
             size="tiny"
             icon={<ChevronUp />}
             onClick={() => setIsCollapsed(true)}
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionEnabledNotice.tsx b/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionEnabledNotice.tsx
index 6c0d6441202..4c8c87f2cab 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionEnabledNotice.tsx
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/IntrospectionEnabledNotice.tsx
@@ -33,7 +33,7 @@ export const IntrospectionEnabledNotice = ({
           GraphQL introspection is enabled for this project, so schemas are discoverable through the
           API.
         </span>
-        <Button type="default" size="tiny" onClick={() => setShowConfirm(true)}>
+        <Button variant="default" size="tiny" onClick={() => setShowConfirm(true)}>
           Disable introspection
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx
index de308876f74..d1b987b4c51 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx
@@ -214,7 +214,7 @@ export const InstallIntegrationSheet = ({ integration }: InstallIntegrationSheet
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button type="primary">Install integration</Button>
+        <Button variant="primary">Install integration</Button>
       </SheetTrigger>
 
       <Form {...form}>
@@ -261,14 +261,14 @@ export const InstallIntegrationSheet = ({ integration }: InstallIntegrationSheet
 
             <SheetFooter>
               <SheetClose asChild>
-                <Button type="default" disabled={isInstalling}>
+                <Button variant="default" disabled={isInstalling}>
                   Cancel
                 </Button>
               </SheetClose>
               <Button
                 form={formId}
-                htmlType="submit"
-                type="primary"
+                type="submit"
+                variant="primary"
                 loading={isInstalling}
                 disabled={hasMissingExtensions}
               >
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton.tsx
index 06f4a50cc84..79e7d484303 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton.tsx
@@ -47,12 +47,12 @@ export function InstallOAuthIntegrationButton({ integration }: InstallOAuthInteg
   return (
     <>
       {isIntegrationInstalled ? (
-        <Button disabled type="outline" className="shrink-0">
+        <Button disabled variant="outline" className="shrink-0">
           Installed
         </Button>
       ) : (
         <Button
-          type="primary"
+          variant="primary"
           className="shrink-0"
           loading={isInstalling || isLoading}
           disabled={isLoading}
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx
index 9716a81bbbb..f74c1a5ea30 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx
@@ -64,7 +64,7 @@ export const InstallationSettings = <
                         <Button
                           asChild
                           key={action.label}
-                          type="default"
+                          variant="default"
                           icon={isExternal ? <ExternalLink /> : undefined}
                         >
                           <Link
diff --git a/apps/studio/components/interfaces/Integrations/Integration/MissingExtensionAlert.tsx b/apps/studio/components/interfaces/Integrations/Integration/MissingExtensionAlert.tsx
index 8c9059a7297..29bad660b75 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/MissingExtensionAlert.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/MissingExtensionAlert.tsx
@@ -11,7 +11,11 @@ export const MissingExtensionAlert = ({ extension }: { extension: DatabaseExtens
   if (!extensionInstalled) {
     return (
       <>
-        <Button type="primary" className="w-min" onClick={() => setShowEnableExtensionModal(true)}>
+        <Button
+          variant="primary"
+          className="w-min"
+          onClick={() => setShowEnableExtensionModal(true)}
+        >
           Enable {extension.name}
         </Button>
 
diff --git a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx b/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
index c5463073d32..64dea3eec13 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
@@ -66,7 +66,7 @@ export const AvailableIntegrations = () => {
               className={cn(
                 buttonVariants({
                   size: 'tiny',
-                  type: selectedCategory === category.key ? 'default' : 'outline',
+                  variant: selectedCategory === category.key ? 'default' : 'outline',
                 }),
                 selectedCategory === category.key ? 'text-foreground' : 'text-foreground-lighter',
                 'rounded-full! px-3'
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx
index c2510a85921..28a3f480a06 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx
@@ -79,7 +79,7 @@ export const MarketplaceDetail = () => {
       case 'add-wrapper':
         return (
           <AddWrapperButton
-            type="primary"
+            variant="primary"
             onClick={() => {
               if (wrappersTabHref) router.push(`${wrappersTabHref}?new=true`)
             }}
@@ -87,7 +87,7 @@ export const MarketplaceDetail = () => {
         )
       case 'installed':
         return (
-          <Button type="outline" disabled>
+          <Button variant="outline" disabled>
             Installed
           </Button>
         )
@@ -110,7 +110,7 @@ export const MarketplaceDetail = () => {
           <>
             {isInstalled && integrationStatus?.partner_links?.dashboard && (
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 icon={<Gauge size={13} />}
                 iconRight={<ArrowUpRight size={13} />}
@@ -127,7 +127,7 @@ export const MarketplaceDetail = () => {
             )}
             {isInstalled && integrationStatus?.partner_links?.manage && (
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 icon={<Settings size={13} />}
                 iconRight={<ArrowUpRight size={13} />}
@@ -140,7 +140,7 @@ export const MarketplaceDetail = () => {
             )}
             {integration.docsUrl && (
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 icon={<BookOpen size={13} />}
                 iconRight={<ArrowUpRight size={13} />}
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHero.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHero.tsx
index 4d5b521419a..33ec2b241d5 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHero.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHero.tsx
@@ -85,7 +85,7 @@ export const MarketplaceFeaturedHero = ({
         </div>
         <Button
           aria-label={isPaused ? 'Resume auto-rotation' : 'Pause auto-rotation'}
-          type="default"
+          variant="default"
           size="tiny"
           className="px-1.5"
           icon={isPaused ? <Play size={10} /> : <Pause size={10} />}
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx
index 23bf98fc4a8..3d81037f7b4 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx
@@ -97,7 +97,7 @@ export const MarketplaceFilterBar = ({
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="default" iconRight={<ChevronDown />} className={triggerCls}>
+          <Button variant="default" iconRight={<ChevronDown />} className={triggerCls}>
             <span className="truncate">Category: {categoryLabel}</span>
           </Button>
         </DropdownMenuTrigger>
@@ -136,7 +136,7 @@ export const MarketplaceFilterBar = ({
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="default" iconRight={<ChevronDown />} className={triggerCls}>
+          <Button variant="default" iconRight={<ChevronDown />} className={triggerCls}>
             <span className="truncate">Type: {typeLabel}</span>
           </Button>
         </DropdownMenuTrigger>
@@ -170,7 +170,7 @@ export const MarketplaceFilterBar = ({
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="default" iconRight={<ChevronDown />} className={triggerCls}>
+          <Button variant="default" iconRight={<ChevronDown />} className={triggerCls}>
             <span className="truncate">Source: {sourceLabel}</span>
           </Button>
         </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx
index eded2dcfa2d..7a1059f1c68 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx
@@ -281,7 +281,7 @@ export const MarketplaceIndex = () => {
 
             {filtered.length === 0 && (
               <EmptyStatePresentational title="No results found">
-                <Button type="default" onClick={clearAll}>
+                <Button variant="default" onClick={clearAll}>
                   Clear filters
                 </Button>
               </EmptyStatePresentational>
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx
index a53850047aa..140f9954d1b 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx
@@ -135,8 +135,8 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) =>
           <SheetFooter>
             <Button
               size="tiny"
-              type="default"
-              htmlType="button"
+              variant="default"
+              type="button"
               onClick={confirmOnClose}
               disabled={isPending}
             >
@@ -144,9 +144,9 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) =>
             </Button>
             <Button
               size="tiny"
-              type="primary"
+              variant="primary"
               form={FORM_ID}
-              htmlType="submit"
+              type="submit"
               loading={isPending}
               disabled={!project?.ref}
             >
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx
index 8f3abeccb95..b544c7de7c4 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx
@@ -19,7 +19,7 @@ export function PgPartmanCallout() {
         description="Unlock partitioned queues for automatic data retention, lower storage costs, and faster performance at scale."
       >
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           className="mt-2"
           onClick={() => setShowEnableModal(true)}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx
index 3a89b11a2f7..0a6d60ef649 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx
@@ -36,7 +36,7 @@ const QueuesContent = () => {
       </p>
 
       {isQueuesInstalled && (
-        <Button asChild type="default" className="mt-2">
+        <Button asChild variant="default" className="mt-2">
           <Link href={`/project/${ref}/integrations/queues/settings`}>Manage queues settings</Link>
         </Button>
       )}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
index 8d1fd402c40..03419956f64 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
@@ -110,7 +110,7 @@ export const QueueTab = () => {
           <QueueSettings />
 
           <ButtonTooltip
-            type="text"
+            variant="text"
             className="px-1.5"
             onClick={() => setPurgeQueueModalShown(true)}
             icon={<Paintbrush />}
@@ -120,7 +120,7 @@ export const QueueTab = () => {
           />
 
           <ButtonTooltip
-            type="text"
+            variant="text"
             className="px-1.5"
             onClick={() => setDeleteQueueModalShown(true)}
             icon={<Trash2 />}
@@ -138,7 +138,7 @@ export const QueueTab = () => {
               {queuePolicies.length === 0 ? (
                 <ButtonTooltip
                   asChild
-                  type="default"
+                  variant="default"
                   className="group"
                   icon={<PlusCircle strokeWidth={1.5} className="text-foreground-muted" />}
                   tooltip={{
@@ -159,7 +159,7 @@ export const QueueTab = () => {
               ) : (
                 <Button
                   asChild
-                  type="default"
+                  variant="default"
                   className="group"
                   icon={
                     <div
@@ -190,7 +190,10 @@ export const QueueTab = () => {
               onOpenChange={() => setOpenRlsPopover(!openRlsPopover)}
             >
               <PopoverTrigger asChild>
-                <Button type={isExposed ? 'warning' : 'default'} icon={<Lock strokeWidth={1.5} />}>
+                <Button
+                  variant={isExposed ? 'warning' : 'default'}
+                  icon={<Lock strokeWidth={1.5} />}
+                >
                   RLS disabled
                 </Button>
               </PopoverTrigger>
@@ -207,7 +210,7 @@ export const QueueTab = () => {
                       </p>
                       <p>With RLS enabled, anonymous users will not have access to this queue.</p>
                       <Button
-                        type="default"
+                        variant="default"
                         className="w-min"
                         onClick={() => setRlsConfirmModalOpen(!rlsConfirmModalOpen)}
                       >
@@ -224,7 +227,7 @@ RLS for queues is only relevant if exposure through PostgREST has been enabled,
 You may opt to manage your queues via any Supabase client libraries or PostgREST endpoints by enabling this in the [queues settings](/project/${project?.ref}/integrations/queues/settings).`}
                       />
                       <Button
-                        type="default"
+                        variant="default"
                         className="w-min"
                         onClick={() => setRlsConfirmModalOpen(!rlsConfirmModalOpen)}
                       >
@@ -237,7 +240,7 @@ You may opt to manage your queues via any Supabase client libraries or PostgREST
             </Popover>
           )}
 
-          <Button type="primary" onClick={() => setSendMessageModalShown(true)}>
+          <Button variant="primary" onClick={() => setSendMessageModalShown(true)}>
             Add message
           </Button>
 
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
index ee23e75dbff..5739d29f786 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
@@ -282,7 +282,7 @@ export const QueuesSettings = () => {
                           </ul>
 
                           <Button
-                            type="default"
+                            variant="default"
                             className="mt-3"
                             onClick={() => setRlsConfirmModalOpen(true)}
                           >
@@ -333,15 +333,15 @@ export const QueuesSettings = () => {
                 />
                 <div className="flex items-center gap-x-2">
                   <Button
-                    type="default"
+                    variant="default"
                     disabled={Object.keys(formState.dirtyFields).length === 0 || isToggling}
                     onClick={() => form.reset({ enable: false })}
                   >
                     Cancel
                   </Button>
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     disabled={Object.keys(formState.dirtyFields).length === 0}
                     loading={isToggling}
                   >
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
index c2da5eb8660..71c1cca143a 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
@@ -99,7 +99,7 @@ export const QueuesTab = () => {
                   <Button
                     key="clear"
                     size="tiny"
-                    type="text"
+                    variant="text"
                     icon={<X />}
                     onClick={clearSearch}
                     className="p-0 h-5 w-5"
@@ -110,7 +110,7 @@ export const QueuesTab = () => {
 
             <div className="flex items-center gap-x-2">
               <Button
-                type="default"
+                variant="default"
                 icon={<RefreshCw />}
                 loading={isRefetching}
                 onClick={() => refetch()}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx
index 168d54a0f3a..a3cac384e40 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx
@@ -89,7 +89,7 @@ export const MessageDetailsPanel = ({
       className="bg-studio border-t pointer-events-auto"
     >
       <Button
-        type="text"
+        variant="text"
         className="absolute top-3 right-3 px-1"
         icon={<X />}
         onClick={() => setSelectedMessage(null)}
@@ -172,7 +172,7 @@ export const MessageDetailsPanel = ({
                     icon: <Archive />,
                     text: 'Archive',
                     isLoading: isLoadingArchive,
-                    type: 'warning',
+                    variant: 'warning',
                     onClick: () => {
                       archiveMessage({
                         projectRef: project!.ref,
@@ -197,7 +197,7 @@ export const MessageDetailsPanel = ({
                   button={{
                     icon: <Trash2 />,
                     text: 'Delete',
-                    type: 'danger',
+                    variant: 'danger',
                     isLoading: isLoadingDelete,
                     onClick: () => {
                       deleteMessage({
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx
index 6f098227cfb..c9bd7983cf8 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx
@@ -239,7 +239,7 @@ export const QueueSettings = ({}: QueueSettingsProps) => {
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
         <ButtonTooltip
-          type="text"
+          variant="text"
           className="px-1.5"
           icon={<Settings />}
           title="Settings"
@@ -372,10 +372,10 @@ export const QueueSettings = ({}: QueueSettingsProps) => {
           </Table>
         </SheetSection>
         <SheetFooter>
-          <Button type="default" disabled={isSaving} onClick={() => setOpen(false)}>
+          <Button variant="default" disabled={isSaving} onClick={() => setOpen(false)}>
             Cancel
           </Button>
-          <Button type="primary" loading={isSaving} onClick={onSaveConfiguration}>
+          <Button variant="primary" loading={isSaving} onClick={onSaveConfiguration}>
             Save changes
           </Button>
         </SheetFooter>
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx
index a6ad2e8b989..f7d5ff2653d 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx
@@ -145,12 +145,12 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) =>
           </Form>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" onClick={onClose} disabled={isPending}>
+          <Button variant="default" onClick={onClose} disabled={isPending}>
             Cancel
           </Button>
           <Button
-            type="primary"
-            htmlType="submit"
+            variant="primary"
+            type="submit"
             form={FORM_ID}
             disabled={isPending}
             loading={isPending}
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
index ee271837dca..be8e83c5ead 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
@@ -151,7 +151,7 @@ export const AddNewSecretModal = () => {
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <Button
-                              type="text"
+                              variant="text"
                               className="absolute right-1 top-1 px-1"
                               aria-label={
                                 isSecretVisible ? 'Hide secret value' : 'Show secret value'
@@ -173,12 +173,12 @@ export const AddNewSecretModal = () => {
           </Form>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" disabled={isSubmitting} onClick={handleClose}>
+          <Button variant="default" disabled={isSubmitting} onClick={handleClose}>
             Cancel
           </Button>
           <Button
             form={formId}
-            htmlType="submit"
+            type="submit"
             disabled={!isDirty || isSubmitting}
             loading={isSubmitting}
           >
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
index 19f37e163c0..aaa1bbbd6ce 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
@@ -201,7 +201,7 @@ export const EditSecretModal = () => {
                               }}
                             />
                             <Button
-                              type="default"
+                              variant="default"
                               title={showSecretValue ? `Hide secret value` : `Show secret value`}
                               aria-label={
                                 showSecretValue ? `Hide secret value` : `Show secret value`
@@ -220,7 +220,7 @@ export const EditSecretModal = () => {
             </DialogSection>
             <DialogFooter>
               <Button
-                type="default"
+                variant="default"
                 disabled={isSubmitting}
                 onClick={() => {
                   form.reset()
@@ -229,7 +229,7 @@ export const EditSecretModal = () => {
               >
                 Cancel
               </Button>
-              <Button form={formId} htmlType="submit" loading={isSubmitting}>
+              <Button form={formId} type="submit" loading={isSubmitting}>
                 Update secret
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretRow.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretRow.tsx
index 7faae6ccc84..835fce39c0f 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretRow.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretRow.tsx
@@ -55,7 +55,7 @@ export const SecretRow = ({ row, col }: SecretRowProps) => {
       <div className="flex items-center justify-end w-full" onClick={(e) => e.stopPropagation()}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button title="Manage Secret" type="text" className="px-1" icon={<MoreVertical />} />
+            <Button title="Manage Secret" variant="text" className="px-1" icon={<MoreVertical />} />
           </DropdownMenuTrigger>
           <DropdownMenuContent side="bottom" align="end" className="w-40">
             <DropdownMenuItemTooltip
@@ -96,7 +96,7 @@ export const SecretRow = ({ row, col }: SecretRowProps) => {
     return (
       <div className="flex items-center gap-2 w-full" onClick={(e) => e.stopPropagation()}>
         <Button
-          type="text"
+          variant="text"
           className="px-1.5"
           icon={
             isFetching && revealedValue === undefined ? (
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
index 986dcf9f02b..97fa694f710 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
@@ -117,7 +117,7 @@ export const SecretsManagement = () => {
                     <Button
                       key="clear"
                       size="tiny"
-                      type="text"
+                      variant="text"
                       icon={<X />}
                       onClick={() => setSearchValue('')}
                       className="p-0 h-5 w-5"
@@ -145,7 +145,7 @@ export const SecretsManagement = () => {
 
             <div className="flex items-center gap-x-2">
               <Button
-                type="default"
+                variant="default"
                 icon={<RefreshCw />}
                 loading={isRefetching}
                 onClick={() => refetch()}
@@ -154,7 +154,7 @@ export const SecretsManagement = () => {
               </Button>
               <DocsButton href={`${DOCS_URL}/guides/database/vault`} />
               <ButtonTooltip
-                type="primary"
+                variant="primary"
                 disabled={!canManageSecrets}
                 onClick={() => setShowAddSecretModal(true)}
                 tooltip={{
diff --git a/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx b/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
index e3426736122..17b7f82623c 100644
--- a/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
@@ -62,7 +62,7 @@ const OrganizationPicker = ({
         <PopoverTrigger asChild>
           <Button
             ref={ref}
-            type="default"
+            variant="default"
             size="medium"
             block
             className="justify-start"
diff --git a/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
index ae5e000ff41..1701fa0247c 100644
--- a/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
+++ b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
@@ -80,7 +80,7 @@ export const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationCo
               <ButtonTooltip
                 disabled
                 iconRight={<ChevronDown size={14} />}
-                type="default"
+                variant="default"
                 tooltip={{
                   content: {
                     side: 'bottom',
@@ -97,7 +97,7 @@ export const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationCo
                 modal={false}
               >
                 <DropdownMenuTrigger asChild>
-                  <Button iconRight={<ChevronDown size={14} />} type="default">
+                  <Button iconRight={<ChevronDown size={14} />} variant="default">
                     <span>Manage</span>
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx
index f03e3ea86a2..54538cf9ec0 100644
--- a/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx
+++ b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx
@@ -118,7 +118,7 @@ export const IntegrationInstallation = forwardRef<HTMLLIElement, IntegrationInst
           </div>
         </div>
 
-        <Button asChild disabled={disabled} type="default" iconRight={<ExternalLink />}>
+        <Button asChild disabled={disabled} variant="default" iconRight={<ExternalLink />}>
           {disabled ? (
             <p>Manage</p>
           ) : (
@@ -260,7 +260,7 @@ export const IntegrationConnectionOption = forwardRef<HTMLLIElement, Integration
           </span>
         </div>
 
-        <Button type="default">Connect</Button>
+        <Button variant="default">Connect</Button>
       </li>
     )
   }
@@ -296,7 +296,7 @@ export const EmptyIntegrationConnection = forwardRef<
         )}
       >
         <ButtonTooltip
-          type="default"
+          variant="default"
           disabled={disabled}
           onClick={() => onClick()}
           tooltip={{
diff --git a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
index 4a790b302e5..238e5f1c7e0 100644
--- a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
+++ b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
@@ -231,7 +231,7 @@ const ProjectLinker = ({
                 renderTrigger={() => {
                   return (
                     <Button
-                      type="default"
+                      variant="default"
                       block
                       disabled={defaultSupabaseProjectRef !== undefined || loadingSupabaseProjects}
                       loading={loadingSupabaseProjects}
@@ -302,7 +302,7 @@ const ProjectLinker = ({
               >
                 <PopoverTrigger asChild>
                   <Button
-                    type="default"
+                    variant="default"
                     block
                     disabled={loadingForeignProjects}
                     loading={loadingForeignProjects}
@@ -378,7 +378,7 @@ const ProjectLinker = ({
         {onSkip !== undefined && (
           <Button
             size="medium"
-            type="default"
+            variant="default"
             onClick={() => {
               onSkip()
             }}
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/AddWrapperButton.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/AddWrapperButton.tsx
index 0b0369d4f61..1861253d8be 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/AddWrapperButton.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/AddWrapperButton.tsx
@@ -9,11 +9,11 @@ import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 const WRAPPER_REQUIRED_EXTENSION_NAMES = ['wrappers', 'supabase_vault']
 
 interface AddWrapperButtonProps {
-  type?: 'default' | 'primary' | 'outline'
+  variant?: 'default' | 'primary' | 'outline'
   onClick: () => void
 }
 
-export const AddWrapperButton = ({ type = 'default', onClick }: AddWrapperButtonProps) => {
+export const AddWrapperButton = ({ variant = 'default', onClick }: AddWrapperButtonProps) => {
   const { can: canCreateWrapper } = useAsyncCheckPermissions(
     PermissionAction.TENANT_SQL_ADMIN_WRITE,
     'wrappers'
@@ -35,7 +35,7 @@ export const AddWrapperButton = ({ type = 'default', onClick }: AddWrapperButton
 
   return (
     <ButtonTooltip
-      type={type}
+      variant={variant}
       onClick={onClick}
       disabled={!canCreateWrapper}
       tooltip={{
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
index 634cc26a74f..e317a199c98 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
@@ -271,13 +271,13 @@ export const ColumnType = ({
                     specific use case.
                   </p>
                   <div className="flex items-center space-x-2 mt-3">
-                    <Button asChild type="default" icon={<ExternalLink />}>
+                    <Button asChild variant="default" icon={<ExternalLink />}>
                       <Link href={recommendation.reference} target="_blank" rel="noreferrer">
                         Read more
                       </Link>
                     </Button>
                     <Button
-                      type="primary"
+                      variant="primary"
                       onClick={() => field.onChange(recommendation.alternative)}
                     >
                       Use {recommendation.alternative}
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
index ec24d7cf754..93991554b41 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
@@ -385,8 +385,8 @@ export const CreateIcebergWrapperSheet = ({
             <SheetFooter>
               <Button
                 size="tiny"
-                type="default"
-                htmlType="button"
+                variant="default"
+                type="button"
                 onClick={onCloseWithConfirmation}
                 disabled={isLoading}
               >
@@ -394,9 +394,9 @@ export const CreateIcebergWrapperSheet = ({
               </Button>
               <Button
                 size="tiny"
-                type="primary"
+                variant="primary"
                 form={FORM_ID}
-                htmlType="submit"
+                type="submit"
                 loading={isLoading}
                 disabled={isLoading || !isDirty}
               >
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
index e37d9d645a8..d231545c009 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
@@ -428,7 +428,7 @@ export const CreateWrapperSheet = ({
                             </div>
                             <div className="flex items-center space-x-2">
                               <Button
-                                type="default"
+                                variant="default"
                                 className="px-1"
                                 icon={<Edit />}
                                 onClick={() => {
@@ -436,7 +436,7 @@ export const CreateWrapperSheet = ({
                                 }}
                               />
                               <Button
-                                type="default"
+                                variant="default"
                                 className="px-1"
                                 icon={<Trash />}
                                 onClick={() => {
@@ -449,7 +449,7 @@ export const CreateWrapperSheet = ({
                       })}
 
                       <div className="flex justify-end">
-                        <Button type="default" onClick={() => setSelectedTableToEdit(NewTable)}>
+                        <Button variant="default" onClick={() => setSelectedTableToEdit(NewTable)}>
                           Add foreign table
                         </Button>
                       </div>
@@ -507,8 +507,8 @@ export const CreateWrapperSheet = ({
             <SheetFooter>
               <Button
                 size="tiny"
-                type="default"
-                htmlType="button"
+                variant="default"
+                type="button"
                 onClick={onCloseWithConfirmation}
                 disabled={isSubmitting}
               >
@@ -516,9 +516,9 @@ export const CreateWrapperSheet = ({
               </Button>
               <Button
                 size="tiny"
-                type="primary"
+                variant="primary"
                 form={FORM_ID}
-                htmlType="submit"
+                type="submit"
                 disabled={isSubmitting || isExtensionDataLoading}
                 loading={isSubmitting}
               >
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
index becd980aa72..ddb7616907f 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
@@ -281,7 +281,7 @@ export const EditWrapperSheet = ({
                         </div>
                         <div className="flex items-center space-x-2">
                           <Button
-                            type="default"
+                            variant="default"
                             className="px-1"
                             icon={<Edit />}
                             onClick={() => {
@@ -289,7 +289,7 @@ export const EditWrapperSheet = ({
                             }}
                           />
                           <Button
-                            type="default"
+                            variant="default"
                             className="px-1"
                             icon={<Trash />}
                             onClick={() => {
@@ -302,7 +302,7 @@ export const EditWrapperSheet = ({
                   })}
 
                   <div className="flex justify-end">
-                    <Button type="default" onClick={() => setSelectedTableToEdit(NewTable)}>
+                    <Button variant="default" onClick={() => setSelectedTableToEdit(NewTable)}>
                       Add foreign table
                     </Button>
                   </div>
@@ -317,8 +317,8 @@ export const EditWrapperSheet = ({
             <SheetFooter>
               <Button
                 size="tiny"
-                type="default"
-                htmlType="button"
+                variant="default"
+                type="button"
                 onClick={confirmOnClose}
                 disabled={isSubmitting}
               >
@@ -326,9 +326,9 @@ export const EditWrapperSheet = ({
               </Button>
               <Button
                 size="tiny"
-                type="primary"
+                variant="primary"
                 form={FORM_ID}
-                htmlType="submit"
+                type="submit"
                 disabled={isSubmitting || !isDirty}
                 loading={isSubmitting}
               >
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx
index 0c8ee3f9c59..464467d0de7 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx
@@ -120,7 +120,7 @@ const AddNewWrapperCTA = () => {
             wrappers. Afterward, you can recreate the wrappers.
           </p>
         </div>
-        <Button asChild type="default" className="w-min mt-3">
+        <Button asChild variant="default" className="w-min mt-3">
           <Link
             href={
               databaseNeedsUpgrading
@@ -138,7 +138,7 @@ const AddNewWrapperCTA = () => {
   return (
     <div className="py-3 px-5 border rounded-md">
       <ButtonTooltip
-        type="default"
+        variant="default"
         onClick={() => setCreateWrapperShown(true)}
         disabled={!canCreateWrapper}
         tooltip={{
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
index 281c8b9d79c..e499fdda2ce 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
@@ -123,7 +123,7 @@ export const WrapperRow = ({ wrapper }: WrapperRowProps) => {
         <div className="flex items-center gap-x-2">
           <ButtonTooltip
             disabled={!canManageWrappers}
-            type="default"
+            variant="default"
             icon={<Edit strokeWidth={1.5} />}
             className="px-1.5"
             onClick={() => setSelectedWrapperToEdit(wrapper.id.toString())}
@@ -137,7 +137,7 @@ export const WrapperRow = ({ wrapper }: WrapperRowProps) => {
             }}
           />
           <ButtonTooltip
-            type="default"
+            variant="default"
             disabled={!canManageWrappers}
             icon={<Trash strokeWidth={1.5} />}
             className="px-1.5"
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
index 0b48a542d59..bb0b6c67e27 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
@@ -119,7 +119,7 @@ const WrapperTableEditor = ({
             <Popover open={open} onOpenChange={setOpen}>
               <PopoverTrigger asChild>
                 <Button
-                  type="default"
+                  variant="default"
                   role="combobox"
                   aria-expanded={open}
                   aria-controls={listboxId}
@@ -488,7 +488,7 @@ const TableForm = ({
                   enumTypes={[]}
                 />
                 <Button
-                  type="outline"
+                  variant="outline"
                   icon={<XIcon strokeWidth={1.5} />}
                   onClick={() => removeColumn(columnIndex)}
                   className="self-end -translate-y-1.5 px-1.5"
@@ -498,7 +498,7 @@ const TableForm = ({
               </div>
             ))}
             <Button
-              type="default"
+              variant="default"
               onClick={() => appendColumn({ name: '', type: 'text' })}
               className="self-start"
             >
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx
index 154f8783e73..bd2a4cc4bed 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx
@@ -77,7 +77,7 @@ export const WrappersTab = () => {
         <>
           <div className="max-w-5xl flex items-center gap-x-2 justify-end mb-4">
             <DocsButton href={wrapperMeta.docsUrl} />
-            <AddWrapperButton type="primary" onClick={() => setIsCreating(true)} />
+            <AddWrapperButton variant="primary" onClick={() => setIsCreating(true)} />
           </div>
           <WrapperTable />
         </>
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx
index 1ea96e263c3..f768632485f 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx
@@ -31,7 +31,7 @@ export const InstallationError = ({
         description="There was an error during the uninstallation of the Stripe Sync Engine, please try again. If the problem persists, contact support."
         additionalActions={
           <Button
-            type="default"
+            variant="default"
             onClick={handleUninstall}
             disabled={uninstalling}
             loading={uninstalling}
@@ -59,7 +59,7 @@ export const InstallationError = ({
         }
         additionalActions={
           <Button
-            type="default"
+            variant="default"
             onClick={handleOpenInstallSheet}
             disabled={installing}
             loading={installing}
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/IntegrationActions.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/IntegrationActions.tsx
index 98694e06b94..1fffa3a3dd4 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/IntegrationActions.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/IntegrationActions.tsx
@@ -39,7 +39,7 @@ export const IntegrationInstalledActions = ({
       <div className={cn('flex gap-x-2 justify-end', className)}>
         {upgradeAvailable && !uninstallError && !uninstalling && (
           <ButtonTooltip
-            type="primary"
+            variant="primary"
             onClick={() => setShouldShowInstallSheet(true)}
             disabled={disabled}
             loading={installing}
@@ -55,7 +55,7 @@ export const IntegrationInstalledActions = ({
           </ButtonTooltip>
         )}
         <ButtonTooltip
-          type="default"
+          variant="default"
           onClick={() => setShowUninstallModal(true)}
           disabled={disabled}
           loading={uninstalling}
@@ -105,7 +105,7 @@ export const IntegrationNotInstalledActions = ({
     <div className={cn('flex gap-x-2 justify-end', className)}>
       {!hideInstallCTA && (
         <ButtonTooltip
-          type="primary"
+          variant="primary"
           onClick={() => setShouldShowInstallSheet(true)}
           disabled={!canInstall || !canManageSecrets}
           loading={installing}
@@ -123,7 +123,7 @@ export const IntegrationNotInstalledActions = ({
         </ButtonTooltip>
       )}
       {installError && (
-        <Button type="default" loading={isUninstallRequested} onClick={handleUninstall}>
+        <Button variant="default" loading={isUninstallRequested} onClick={handleUninstall}>
           Uninstall
         </Button>
       )}
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
index 24b5fc343da..4025d6bf64e 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
@@ -303,7 +303,7 @@ const StripeSyncContent = ({ hideInstallCTA = false }: { hideInstallCTA?: boolea
                   />
 
                   <div className="flex items-center gap-x-2">
-                    <Button asChild type="default" icon={<ExternalLink />}>
+                    <Button asChild variant="default" icon={<ExternalLink />}>
                       <Link
                         target="_blank"
                         rel="noopener noreferrer"
@@ -312,7 +312,7 @@ const StripeSyncContent = ({ hideInstallCTA = false }: { hideInstallCTA?: boolea
                         Get Stripe API key
                       </Link>
                     </Button>
-                    <Button asChild type="default" icon={<ExternalLink />}>
+                    <Button asChild variant="default" icon={<ExternalLink />}>
                       <Link
                         target="_blank"
                         rel="noopener noreferrer"
@@ -335,7 +335,7 @@ const StripeSyncContent = ({ hideInstallCTA = false }: { hideInstallCTA?: boolea
 
               <SheetFooter>
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isInstallRequested}
                   onClick={() => handleCloseInstallSheet(false)}
                 >
@@ -343,8 +343,8 @@ const StripeSyncContent = ({ hideInstallCTA = false }: { hideInstallCTA?: boolea
                 </Button>
                 <Button
                   form={formId}
-                  htmlType="submit"
-                  type="primary"
+                  type="submit"
+                  variant="primary"
                   loading={isInstallRequested}
                   disabled={!form.formState.isValid || isInstallRequested}
                 >
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx
index 19461a31ee9..7d07b9828d1 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx
@@ -113,7 +113,7 @@ export const StripeSyncSettingsPage = () => {
                   </p>
                 </div>
 
-                <Button asChild type="default" className="ml-8 @md:ml-0">
+                <Button asChild variant="default" className="ml-8 @md:ml-0">
                   <Link href={`/project/${ref}/editor?schema=stripe`}>Open Table Editor</Link>
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/action-panel.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/action-panel.tsx
index 3dc6d2f5e44..4c7a002ab54 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/action-panel.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/action-panel.tsx
@@ -11,17 +11,17 @@ interface ActionPanelProps extends Omit<React.ComponentProps<typeof Card>, 'onCl
   onClick: () => void
   loading: ComponentProps<typeof Button>['loading']
   icon?: ComponentProps<typeof Button>['icon']
-  type?: ComponentProps<typeof Button>['type']
+  variant?: ComponentProps<typeof Button>['variant']
   shortcutId?: ShortcutId
 }
 
 export const ActionPanel = forwardRef<HTMLDivElement, ActionPanelProps>(
   (
-    { title, description, buttonLabel, onClick, loading, icon, type, shortcutId, ...props },
+    { title, description, buttonLabel, onClick, loading, icon, variant, shortcutId, ...props },
     ref
   ) => {
     const button = (
-      <Button onClick={onClick} loading={loading} icon={icon} type={type}>
+      <Button onClick={onClick} loading={loading} icon={icon} variant={variant}>
         {buttonLabel}
       </Button>
     )
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
index 43d1c21bff6..5c738b7804a 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
@@ -196,7 +196,7 @@ export const JWTSecretKeysTable = () => {
                 onClick={() => setShownDialog('rotate')}
                 loading={isUpdatingJWTSigningKey}
                 icon={<RotateCw className="size-4" />}
-                type="primary"
+                variant="primary"
               />
             ) : (
               <ActionPanel
@@ -205,7 +205,7 @@ export const JWTSecretKeysTable = () => {
                 buttonLabel="Create Standby Key"
                 onClick={() => setShownDialog('create')}
                 loading={isPendingMutation}
-                type="primary"
+                variant="primary"
                 icon={<Timer className="size-4" />}
                 shortcutId={SHORTCUT_IDS.JWT_KEYS_CREATE_STANDBY}
               />
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/key-details-dialog.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/key-details-dialog.tsx
index e8e64a4053a..8bce39d6485 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/key-details-dialog.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/key-details-dialog.tsx
@@ -53,7 +53,7 @@ export function KeyDetailsDialog({
           <div className="relative">
             <Textarea className="font-mono text-sm pr-10" rows={8} value={jwks} readOnly />
             <CopyButton
-              type="default"
+              variant="default"
               iconOnly
               text={jwks}
               className="absolute top-2 right-2"
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx
index 36f54519127..ba98c1f3a9d 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx
@@ -152,7 +152,7 @@ export function RotateKeyDialog({
                 All of my application's components have picked up the standby key.
               </p>
               <ButtonTooltip
-                type="default"
+                variant="default"
                 icon={<Info />}
                 className="px-1.5 py-2 mt-0.5"
                 tooltip={{
@@ -188,7 +188,7 @@ export function RotateKeyDialog({
                 To invalidate non-expired JWTs I need to explicitly revoke the currently used key.
               </p>
               <ButtonTooltip
-                type="default"
+                variant="default"
                 icon={<Info />}
                 className="px-1.5 py-2 mt-0.5"
                 tooltip={{
@@ -242,7 +242,7 @@ export function RotateKeyDialog({
                     )}
                 </p>
                 <ButtonTooltip
-                  type="default"
+                  variant="default"
                   icon={<Info />}
                   className="px-1.5 py-2 mt-0.5"
                   tooltip={{
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
index 45ab218e1c1..6dcdc729f04 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
@@ -123,7 +123,7 @@ export const SigningKeyRow = ({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               className="px-1.5"
               loading={isLoading}
               icon={<MoreVertical className="size-4" />}
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx
index eeb0a070eb0..fc1a8981af1 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx
@@ -289,7 +289,7 @@ export const JWTSettings = () => {
                         </p>
                       )}
 
-                      <Button asChild type="default" icon={<ExternalLink />} className="mt-2">
+                      <Button asChild variant="default" icon={<ExternalLink />} className="mt-2">
                         <Link href={`/project/${projectRef}/settings/api-keys`}>
                           Go to API keys
                         </Link>
@@ -502,7 +502,7 @@ export const JWTSettings = () => {
 
                   <div className="flex flex-row gap-x-2 mt-4">
                     {disableLegacyJwtSecretRotation ? (
-                      <Button type="default" icon={<ExternalLink className="size-4" />} asChild>
+                      <Button variant="default" icon={<ExternalLink className="size-4" />} asChild>
                         <Link
                           href="https://supabase.com/docs/guides/auth/signing-keys#getting-started"
                           target="_blank"
@@ -516,7 +516,7 @@ export const JWTSettings = () => {
                         <DropdownMenuTrigger asChild>
                           <ButtonTooltip
                             disabled={!canGenerateNewJWTSecret}
-                            type="default"
+                            variant="default"
                             iconRight={<ChevronDown size={14} />}
                             loading={isUpdatingJwtSecret}
                             tooltip={{
@@ -700,7 +700,7 @@ export const JWTSettings = () => {
           </DialogSection>
           <DialogFooter>
             <Button
-              type="default"
+              variant="default"
               onClick={() => {
                 setIsCreatingKey(false)
                 setCustomToken('')
@@ -711,8 +711,8 @@ export const JWTSettings = () => {
               Cancel
             </Button>
             <Button
-              type="primary"
-              htmlType="submit"
+              variant="primary"
+              type="submit"
               form={customJwtSecretFormId}
               loading={isSubmittingJwtSecretUpdateRequest}
               disabled={isSubmittingJwtSecretUpdateRequest}
diff --git a/apps/studio/components/interfaces/JwtSecrets/start-using-keys-banner.tsx b/apps/studio/components/interfaces/JwtSecrets/start-using-keys-banner.tsx
index e2848124807..490250f54e6 100644
--- a/apps/studio/components/interfaces/JwtSecrets/start-using-keys-banner.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/start-using-keys-banner.tsx
@@ -19,7 +19,7 @@ export const StartUsingJwtSigningKeysBanner = ({
           new JWT signing keys, migrate your project's secret to the new set up.
         </p>
         <div className="mt-4">
-          <Button type="primary" icon={<Import />} onClick={onClick} loading={isLoading}>
+          <Button variant="primary" icon={<Import />} onClick={onClick} loading={isLoading}>
             Migrate JWT secret
           </Button>
         </div>
diff --git a/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx b/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx
index 1ebfa4f80a4..83cea333e69 100644
--- a/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx
+++ b/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx
@@ -97,7 +97,7 @@ export const GraphqlExposureLintCTA = ({
 
   return (
     <>
-      <Button type="primary" disabled={!canAct} onClick={() => setShowConfirmRevoke(true)}>
+      <Button variant="primary" disabled={!canAct} onClick={() => setShowConfirmRevoke(true)}>
         {TRIGGER_LABEL[lintName]}
       </Button>
       <ConfirmationModal
diff --git a/apps/studio/components/interfaces/Linter/LintDetail.tsx b/apps/studio/components/interfaces/Linter/LintDetail.tsx
index b730df09e0d..4c55e559be0 100644
--- a/apps/studio/components/interfaces/Linter/LintDetail.tsx
+++ b/apps/studio/components/interfaces/Linter/LintDetail.tsx
@@ -91,7 +91,7 @@ export const LintDetail = ({
           onAfterAction={onAfterAction}
         />
 
-        <Button asChild type="text">
+        <Button asChild variant="text">
           <Link
             href={
               lintInfoMap.find((item) => item.name === lint.name)?.docsLink ||
diff --git a/apps/studio/components/interfaces/Linter/Linter.utils.tsx b/apps/studio/components/interfaces/Linter/Linter.utils.tsx
index 9d6c596e43b..a7779893e6e 100644
--- a/apps/studio/components/interfaces/Linter/Linter.utils.tsx
+++ b/apps/studio/components/interfaces/Linter/Linter.utils.tsx
@@ -417,7 +417,7 @@ export const LintCTA = ({
   const linkText = lintInfo.linkText
 
   return (
-    <Button asChild type="default">
+    <Button asChild variant="default">
       <Link href={link} rel="noreferrer" className="no-underline">
         {linkText}
       </Link>
diff --git a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
index ac576fa1e24..2508c53d7ef 100644
--- a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
@@ -196,7 +196,7 @@ export const LinterDataGrid = ({
                 <LintCategoryBadge category={selectedLint.categories[0]} />
               </div>
               <ShortcutTooltip shortcutId={SHORTCUT_IDS.ADVISORS_CLOSE_DETAIL} side="left">
-                <Button type="text" icon={<X />} onClick={handleSidepanelClose} />
+                <Button variant="text" icon={<X />} onClick={handleSidepanelClose} />
               </ShortcutTooltip>
             </div>
             <div className="p-6 flex-grow min-h-0 overflow-y-auto">
diff --git a/apps/studio/components/interfaces/Linter/LinterFilters.tsx b/apps/studio/components/interfaces/Linter/LinterFilters.tsx
index 59b2fd47ef8..2e70825183f 100644
--- a/apps/studio/components/interfaces/Linter/LinterFilters.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterFilters.tsx
@@ -65,7 +65,7 @@ const LinterFilters = ({
         <ShortcutTooltip shortcutId={SHORTCUT_IDS.ADVISORS_REFRESH} side="bottom">
           <Button
             size="tiny"
-            type="default"
+            variant="default"
             disabled={isLoading}
             onClick={onClickRefresh}
             icon={
diff --git a/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx b/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
index 99b6ac3eb53..2f89c3047ca 100644
--- a/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
@@ -34,7 +34,7 @@ export const LinterPageFooter = ({
     <div className="px-6 py-6 flex gap-x-4 border-t relative">
       <Button
         className="absolute top-1.5 right-3 px-1.5"
-        type="text"
+        variant="text"
         size="tiny"
         onClick={() => setShowBottomSection(false)}
       >
@@ -55,7 +55,7 @@ export const LinterPageFooter = ({
           align="start"
         >
           <Button
-            type="default"
+            variant="default"
             className="mt-3! w-min"
             disabled={isLoading || isRefetching}
             loading={isLoading || isRefetching}
diff --git a/apps/studio/components/interfaces/LocalDropdown.tsx b/apps/studio/components/interfaces/LocalDropdown.tsx
index 315ad590d7c..cb0b976e1f2 100644
--- a/apps/studio/components/interfaces/LocalDropdown.tsx
+++ b/apps/studio/components/interfaces/LocalDropdown.tsx
@@ -44,7 +44,7 @@ export const LocalDropdown = ({
     >
       <DropdownMenuTrigger className={cn('border shrink-0 px-3', triggerClassName)} asChild>
         <ButtonTooltip
-          type="default"
+          variant="default"
           className="[&>span]:flex px-0 py-0 rounded-full overflow-hidden h-8 w-8"
           tooltip={{ content: { text: 'Settings' } }}
         >
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
index 4b974b2c727..162e5bc1909 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
@@ -1042,7 +1042,7 @@ export function LogDrainDestinationSheetForm({
               options={{ enabled: open && !isLoading }}
               side="top"
             >
-              <Button form={FORM_ID} loading={isLoading} htmlType="submit" type="primary">
+              <Button form={FORM_ID} loading={isLoading} type="submit" variant="primary">
                 Save destination
               </Button>
             </Shortcut>
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainsEmpty.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainsEmpty.tsx
index 01efca21184..03ac874e6c5 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainsEmpty.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainsEmpty.tsx
@@ -61,7 +61,7 @@ export const LogDrainsEmpty = () => {
                   <h3 className="heading-default">{item.title}</h3>
                 </div>
                 <p className="text-foreground-light text-sm mb-4 flex-1">{item.description}</p>
-                <Button type="default" className="w-full" asChild>
+                <Button variant="default" className="w-full" asChild>
                   <Link href={item.link} target="_blank">
                     {item.label}
                   </Link>
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx
index 10946a80749..f2403c07f57 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx
@@ -146,7 +146,7 @@ export function LogDrainsList({
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button
-                          type="text"
+                          variant="text"
                           className="px-1 opacity-50 hover:opacity-100 bg-transparent! shrink-0"
                           icon={<MoreHorizontal />}
                         />
diff --git a/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx b/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
index 08737854684..31f28558b28 100644
--- a/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
+++ b/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
@@ -156,7 +156,7 @@ export function OrgAuditLogDrains() {
               <Button
                 disabled={!canManageLogDrains}
                 onClick={handleAddDestinationClick}
-                type="primary"
+                variant="primary"
                 className="rounded-r-none px-3"
               >
                 Add destination
@@ -165,7 +165,7 @@ export function OrgAuditLogDrains() {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="primary"
+                  variant="primary"
                   title="Choose destination type"
                   className="rounded-l-none px-[4px] py-[5px]"
                   icon={<ChevronDown />}
diff --git a/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx b/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
index bec0b4818cb..7b3eef9ab6a 100644
--- a/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
+++ b/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
@@ -168,7 +168,7 @@ export const ObservabilityOverview = () => {
             label="Refresh report"
             side="bottom"
           >
-            <Button type="outline" icon={<RefreshCw size={14} />} onClick={handleRefresh}>
+            <Button variant="outline" icon={<RefreshCw size={14} />} onClick={handleRefresh}>
               Refresh
             </Button>
           </ShortcutTooltip>
diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
index 16bcc6697fb..d8faea781b4 100644
--- a/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
+++ b/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
@@ -97,11 +97,11 @@ export const ServiceHealthCard = ({
 
       <CardFooter className="border-t pt-3 pb-4 px-card flex gap-2">
         {reportUrl && (
-          <Button type="default" size="tiny" asChild className="flex-1">
+          <Button variant="default" size="tiny" asChild className="flex-1">
             <Link href={reportUrl}>View Report</Link>
           </Button>
         )}
-        <Button type="default" size="tiny" asChild className="flex-1">
+        <Button variant="default" size="tiny" asChild className="flex-1">
           <Link href={logsUrl}>View Logs</Link>
         </Button>
       </CardFooter>
diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
index 91bfb20dbf9..7cc32dac2a0 100644
--- a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
+++ b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
@@ -146,7 +146,7 @@ const ServiceCell = ({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 className="relative z-10 px-1 text-foreground-lighter group-hover:text-foreground transition-colors shrink-0"
                 aria-label={`Go to ${service.name} report`}
diff --git a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index d5a2039b7d0..6904b844ebf 100644
--- a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -236,7 +236,7 @@ export const AuditLogs = () => {
                   )}
                 </div>
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isLoading || isRefetching}
                   icon={<RefreshCw className={isRefetching ? 'animate-spin' : ''} />}
                   onClick={() => refetch()}
@@ -301,7 +301,7 @@ export const AuditLogs = () => {
                           <p>Date</p>
 
                           <ButtonTooltip
-                            type="text"
+                            variant="text"
                             className="px-1"
                             icon={
                               dateSortDesc ? (
@@ -413,7 +413,7 @@ export const AuditLogs = () => {
                               )}
                             </Table.td>
                             <Table.td align="right">
-                              <Button type="default">View details</Button>
+                              <Button variant="default">View details</Button>
                             </Table.td>
                           </Table.tr>
                         )
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
index ff898b685b3..7d4daf6c5e5 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
@@ -230,12 +230,16 @@ export const BillingCustomerData = () => {
                           </span>
                         )}
                         <div className="flex items-center gap-2">
-                          <Button type="default" onClick={handleReset} disabled={isSubmitDisabled}>
+                          <Button
+                            variant="default"
+                            onClick={handleReset}
+                            disabled={isSubmitDisabled}
+                          >
                             Cancel
                           </Button>
                           <Button
-                            type="primary"
-                            htmlType="submit"
+                            variant="primary"
+                            type="submit"
                             disabled={isSubmitDisabled}
                             loading={isSubmitting}
                           >
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
index 522214d7b79..e992caf60f0 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
@@ -143,7 +143,7 @@ export const BillingCustomerDataForm = ({
                 <PopoverTrigger asChild>
                   <FormControl>
                     <Button
-                      type="default"
+                      variant="default"
                       role="combobox"
                       size="medium"
                       disabled={disabled}
@@ -221,7 +221,7 @@ export const BillingCustomerDataForm = ({
             />
 
             <Button
-              type="text"
+              variant="text"
               className="px-1"
               icon={<X />}
               disabled={disabled}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
index f2cbf98355e..f39d4cf1176 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
@@ -184,7 +184,7 @@ const CostControl = ({}: CostControlProps) => {
                       </p>
                       <ProjectUpdateDisabledTooltip projectUpdateDisabled={projectUpdateDisabled}>
                         <Button
-                          type="default"
+                          variant="default"
                           className="mt-4 pointer-events-auto"
                           disabled={!canChangeTier}
                           onClick={() => snap.setPanelKey('costControl')}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
index 6acaa0d0ba6..082f5728550 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
@@ -106,7 +106,7 @@ const SpendCapSidePanel = () => {
       header={
         <div className="flex items-center justify-between w-full">
           <h4>Spend cap</h4>
-          <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+          <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
             <Link
               href={`${DOCS_URL}/guides/platform/cost-control#spend-cap`}
               target="_blank"
@@ -194,7 +194,7 @@ const SpendCapSidePanel = () => {
               title="Toggling of the spend cap is only available on the Pro Plan"
               description="Upgrade your plan to disable the spend cap"
               actions={
-                <Button type="default" onClick={() => snap.setPanelKey('subscriptionPlan')}>
+                <Button variant="default" onClick={() => snap.setPanelKey('subscriptionPlan')}>
                   View available plans
                 </Button>
               }
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
index e3413800bc2..13752a01f00 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
@@ -153,7 +153,7 @@ export const CreditCodeRedemption = ({
       {!modalVisible && (
         <DialogTrigger asChild>
           <ButtonTooltip
-            type="default"
+            variant="default"
             className="pointer-events-auto"
             disabled={codeRedemptionDisabled}
             tooltip={{
@@ -235,7 +235,7 @@ export const CreditCodeRedemption = ({
                   )}
 
                   {!router.pathname.includes('/org/') && (
-                    <Button asChild type="default">
+                    <Button asChild variant="default">
                       <Link href={`/org/${org?.slug}`}>Go to organization</Link>
                     </Button>
                   )}
@@ -319,11 +319,11 @@ export const CreditCodeRedemption = ({
 
                   <DialogFooter>
                     <ButtonTooltip
-                      type="primary"
+                      variant="primary"
                       className="pointer-events-auto"
                       loading={redeemingCode}
                       disabled={codeRedemptionDisabled || !isValid}
-                      htmlType="submit"
+                      type="submit"
                       tooltip={{
                         content: {
                           side: 'bottom',
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
index d6081a4f940..25feaef32e1 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
@@ -259,7 +259,7 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
     <Dialog open={topUpModalVisible} onOpenChange={(open) => onTopUpDialogVisibilityChange(open)}>
       <DialogTrigger asChild>
         <ButtonTooltip
-          type="default"
+          variant="default"
           className="pointer-events-auto"
           disabled={!canTopUpCredits || !isPermissionsLoaded}
           tooltip={{
@@ -420,8 +420,8 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
             {!paymentIntentConfirmation?.paymentIntent && (
               <DialogFooter>
                 <Button
-                  htmlType="submit"
-                  type="primary"
+                  type="submit"
+                  variant="primary"
                   loading={
                     form.formState.isSubmitting || executingTopUp || paymentConfirmationLoading
                   }
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx
index ccdbc9e7302..dc9ddcb8c46 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx
@@ -71,7 +71,7 @@ export const Restriction = () => {
                 : 'Please disable spend cap to ensure that your projects remain available.'}
             </p>
             <div className="flex items-center gap-x-2 mt-3">
-              <Button key="upgrade-button" asChild type="default">
+              <Button key="upgrade-button" asChild variant="default">
                 <Link
                   href={`/org/${org?.slug}/billing?panel=${
                     org.plan.id === 'free' ? 'subscriptionPlan' : 'costControl'
@@ -81,11 +81,11 @@ export const Restriction = () => {
                 </Link>
               </Button>
               {!isUsagePage && (
-                <Button key="view-usage-button" asChild type="default">
+                <Button key="view-usage-button" asChild variant="default">
                   <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
                 </Button>
               )}
-              <Button asChild type="default" icon={<ExternalLink />}>
+              <Button asChild variant="default" icon={<ExternalLink />}>
                 <a href={`${DOCS_URL}/guides/platform/cost-control#spend-cap`}>About spend cap</a>
               </Button>
             </div>
@@ -110,7 +110,7 @@ export const Restriction = () => {
               402 status code.
             </p>
             <div className="flex items-center gap-x-2 mt-3">
-              <Button asChild key="upgrade-button" type="default">
+              <Button asChild key="upgrade-button" variant="default">
                 <Link
                   href={`/org/${org?.slug}/billing?panel=${
                     org.plan.id === 'free'
@@ -123,12 +123,12 @@ export const Restriction = () => {
               </Button>
 
               {!isUsagePage && (
-                <Button key="view-usage-button" asChild type="default">
+                <Button key="view-usage-button" asChild variant="default">
                   <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
                 </Button>
               )}
 
-              <Button asChild type="default" icon={<ExternalLink />}>
+              <Button asChild variant="default" icon={<ExternalLink />}>
                 <a href={`${DOCS_URL}/guides/platform/billing-faq#fair-use-policy`}>
                   About Fair Use Policy
                 </a>
@@ -152,7 +152,7 @@ export const Restriction = () => {
               exceed it. If you exceed your quota, requests will respond with a 402 status code.
             </p>
             <div className="flex items-center gap-x-2 mt-3">
-              <Button key="upgrade-button" asChild type="default">
+              <Button key="upgrade-button" asChild variant="default">
                 <Link
                   href={`/org/${org?.slug}/billing?panel=${
                     org.plan.id === 'free'
@@ -164,11 +164,11 @@ export const Restriction = () => {
                 </Link>
               </Button>
               {!isUsagePage && (
-                <Button key="view-usage-button" asChild type="default">
+                <Button key="view-usage-button" asChild variant="default">
                   <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
                 </Button>
               )}
-              <Button asChild type="default" icon={<ExternalLink />}>
+              <Button asChild variant="default" icon={<ExternalLink />}>
                 <a href={`${DOCS_URL}/guides/platform/billing-faq#fair-use-policy`}>
                   About Fair Use Policy
                 </a>
@@ -192,7 +192,7 @@ export const Restriction = () => {
               before restrictions are fully lifted.
             </p>
             <div className="flex items-center gap-x-2 mt-3">
-              <Button key="upgrade-button" asChild type="default">
+              <Button key="upgrade-button" asChild variant="default">
                 <Link
                   href={`/org/${org?.slug}/billing?panel=${
                     org.plan.id === 'free'
@@ -204,11 +204,11 @@ export const Restriction = () => {
                 </Link>
               </Button>
               {!isUsagePage && (
-                <Button key="view-usage-button" asChild type="default">
+                <Button key="view-usage-button" asChild variant="default">
                   <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
                 </Button>
               )}
-              <Button asChild type="default" icon={<ExternalLink />}>
+              <Button asChild variant="default" icon={<ExternalLink />}>
                 <a href={`${DOCS_URL}/guides/platform/billing-faq#fair-use-policy`}>
                   About Fair Use Policy
                 </a>
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx
index c7067c8bffc..b64817dc36d 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx
@@ -113,7 +113,7 @@ export const CancellationFlow = (props: CancellationFlowProps) => {
 
 type InitiateCancellationFlowButtonProps = Pick<
   ComponentProps<typeof ButtonTooltip>,
-  'children' | 'type'
+  'children' | 'variant'
 >
 
 export const InitiateCancellationFlowButton = (props: InitiateCancellationFlowButtonProps) => {
@@ -145,7 +145,7 @@ export const InitiateCancellationFlowButton = (props: InitiateCancellationFlowBu
   return (
     <>
       <ButtonTooltip
-        type={props.type}
+        variant={props.variant}
         disabled={!isDowngradeablePlan || !canUpdateSubscription || isAwsManaged}
         tooltip={{
           content: {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
index 8c4ec21b5f1..c31c236f730 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
@@ -45,7 +45,7 @@ export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) =>
         <Button
           block
           asChild
-          type="default"
+          variant="default"
           size="tiny"
           onClick={() =>
             track('studio_pricing_plan_cta_clicked', {
@@ -81,7 +81,7 @@ export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) =>
         <Button
           block
           asChild
-          type="default"
+          variant="default"
           size="tiny"
           onClick={() =>
             track('studio_pricing_plan_cta_clicked', {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
index 523119d7df7..8e754fdf661 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
@@ -190,12 +190,12 @@ export const ExitSurveyModal = ({ visible, projects, onClose }: ExitSurveyModalP
         </DialogSection>
 
         <DialogFooter>
-          <Button type="default" onClick={() => onClose()}>
+          <Button variant="default" onClick={() => onClose()}>
             Cancel
           </Button>
           <ProjectUpdateDisabledTooltip projectUpdateDisabled={subscriptionUpdateDisabled}>
             <Button
-              type="danger"
+              variant="danger"
               className="pointer-events-auto"
               loading={isSubmitting}
               disabled={subscriptionUpdateDisabled || isSubmitting}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
index 22645551a3f..d3bd6f55b24 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
@@ -192,7 +192,7 @@ export const PlanUpdateSidePanel = () => {
         header={
           <div className="flex items-center justify-between w-full">
             <h4>Change subscription plan for {selectedOrganization?.name}</h4>
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <a href="https://supabase.com/pricing" target="_blank" rel="noreferrer">
                 Pricing
               </a>
@@ -282,7 +282,7 @@ export const PlanUpdateSidePanel = () => {
                       <p className="text-foreground-light text-sm">{plan.costUnit}</p>
                     </div>
                     {isCurrentPlan ? (
-                      <Button block disabled type="default">
+                      <Button block disabled variant="default">
                         Current plan
                       </Button>
                     ) : !canUpdateSubscription && !isDowngradeOption ? (
@@ -290,7 +290,7 @@ export const PlanUpdateSidePanel = () => {
                     ) : (
                       <ButtonTooltip
                         block
-                        type={isDowngradeOption ? 'default' : 'primary'}
+                        variant={isDowngradeOption ? 'default' : 'primary'}
                         disabled={
                           (!canUpdateSubscription && isDowngradeOption) ||
                           subscription?.plan?.id === 'enterprise' ||
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
index 07389bf35c8..b7dadc4f15d 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
@@ -86,14 +86,14 @@ const Subscription = () => {
                     {canChangeTier && (
                       <div className="flex space-x-2">
                         <Button
-                          type="default"
+                          variant="default"
                           className="pointer-events-auto"
                           onClick={() => snap.setPanelKey('subscriptionPlan')}
                         >
                           Change subscription plan
                         </Button>
                         {currentPlan && currentPlan.id !== 'free' && (
-                          <InitiateCancellationFlowButton type="danger">
+                          <InitiateCancellationFlowButton variant="danger">
                             Cancel Subscription
                           </InitiateCancellationFlowButton>
                         )}
@@ -118,7 +118,7 @@ const Subscription = () => {
                           title={`Unable to update plan from ${planName}`}
                           description="Please contact us if you'd like to change your plan."
                           actions={
-                            <Button asChild key="contact-support" type="default">
+                            <Button asChild key="contact-support" variant="default">
                               <SupportLink
                                 queryParams={{
                                   category: SupportCategories.SALES_ENQUIRY,
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
index fe86ce81387..088149e39fa 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
@@ -513,7 +513,7 @@ export const SubscriptionPlanUpdateDialog = ({
                 <Button
                   loading={isUpdating || paymentConfirmationLoading || isConfirming}
                   disabled={subscriptionPreviewIsLoading || subscriptionPreviewIsFetching}
-                  type="primary"
+                  variant="primary"
                   onClick={onUpdateSubscription}
                   className="flex-1"
                   size="small"
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx
index 6151891955d..b15a7da9658 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx
@@ -127,10 +127,15 @@ const UpgradeSurveyModal = ({
           </div>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" disabled={isSubmitting} onClick={() => onClose()}>
+          <Button variant="default" disabled={isSubmitting} onClick={() => onClose()}>
             Skip
           </Button>
-          <Button type="primary" disabled={isSubmitting} loading={isSubmitting} onClick={onSubmit}>
+          <Button
+            variant="primary"
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            onClick={onSubmit}
+          >
             Confirm
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx
index b1f571296e1..4392359d4fe 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx
@@ -155,7 +155,7 @@ export const AwsMarketplaceOnboardingScreen = ({ buyerId }: { buyerId?: string }
               </p>
             }
           />
-          <Button type="default" block asChild>
+          <Button variant="default" block asChild>
             <Link href="/organizations">Back to dashboard</Link>
           </Button>
         </div>
@@ -191,7 +191,7 @@ export const AwsMarketplaceOnboardingScreen = ({ buyerId }: { buyerId?: string }
               </>
             }
           />
-          <Button type="default" block asChild>
+          <Button variant="default" block asChild>
             <Link href="/organizations">Back to dashboard</Link>
           </Button>
         </div>
@@ -206,7 +206,7 @@ export const AwsMarketplaceOnboardingScreen = ({ buyerId }: { buyerId?: string }
       <AwsMarketplaceInterstitial description={getContractIneligibilityDescription(reason)}>
         <div className="flex flex-col gap-3">
           <ContractIneligibilityNotice reason={reason} />
-          <Button type="default" block asChild>
+          <Button variant="default" block asChild>
             <Link href="/organizations">Back to dashboard</Link>
           </Button>
         </div>
@@ -227,7 +227,7 @@ export const AwsMarketplaceOnboardingScreen = ({ buyerId }: { buyerId?: string }
                 : 'The selected organization will be billed through AWS Marketplace.'
             }
           />
-          <Button type="primary" block asChild>
+          <Button variant="primary" block asChild>
             <Link href={`/org/${linkedOrganization?.slug ?? linkedOrgSlug}`}>
               Go to organization
             </Link>
@@ -292,7 +292,7 @@ export const AwsMarketplaceOnboardingScreen = ({ buyerId }: { buyerId?: string }
 
           <div className="flex flex-col gap-5">
             <Button
-              type="primary"
+              variant="primary"
               block
               loading={isLinking}
               disabled={hasLinkableOrganizations && (!selectedOrgSlug || isLinking)}
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgModal.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgModal.tsx
index caf91e02e0b..e5fd1c09424 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgModal.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgModal.tsx
@@ -104,7 +104,7 @@ const AwsMarketplaceOrgCreationDialog = ({
         <DialogFooter>
           <Button
             form={CREATE_AWS_MANAGED_ORG_FORM_ID}
-            htmlType="submit"
+            type="submit"
             loading={isCreatingOrganization}
           >
             Create and link organization
diff --git a/apps/studio/components/interfaces/Organization/Documents/CustomDocument.tsx b/apps/studio/components/interfaces/Organization/Documents/CustomDocument.tsx
index 9b14686d2cb..f76881a297b 100644
--- a/apps/studio/components/interfaces/Organization/Documents/CustomDocument.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/CustomDocument.tsx
@@ -25,7 +25,7 @@ export const CustomDocument = ({ doc }: CustomDocumentProps) => {
         </ScaffoldSectionDetail>
         <ScaffoldSectionContent>
           <div className="@lg:flex items-center justify-center h-full">
-            <Button asChild type="default" iconRight={<ExternalLink />}>
+            <Button asChild variant="default" iconRight={<ExternalLink />}>
               <a download href={doc.action.url} target="_blank" rel="noreferrer noopener">
                 {doc.action.text}
               </a>
diff --git a/apps/studio/components/interfaces/Organization/Documents/DPA.tsx b/apps/studio/components/interfaces/Organization/Documents/DPA.tsx
index 13ef0d5a2ff..d66e124a097 100644
--- a/apps/studio/components/interfaces/Organization/Documents/DPA.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/DPA.tsx
@@ -64,7 +64,7 @@ export const DPA = () => {
                 setIsOpen(true)
                 track('dpa_request_button_clicked')
               }}
-              type="default"
+              variant="default"
             >
               Request DPA
             </Button>
diff --git a/apps/studio/components/interfaces/Organization/Documents/HIPAA.tsx b/apps/studio/components/interfaces/Organization/Documents/HIPAA.tsx
index dca191564d4..39750439475 100644
--- a/apps/studio/components/interfaces/Organization/Documents/HIPAA.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/HIPAA.tsx
@@ -32,7 +32,7 @@ export const HIPAA = () => {
       </ScaffoldSectionDetail>
       <ScaffoldSectionContent>
         <div className="@lg:flex items-center justify-center h-full">
-          <Button asChild type="default" iconRight={<ExternalLink />}>
+          <Button asChild variant="default" iconRight={<ExternalLink />}>
             <a
               href="https://forms.supabase.com/hipaa2"
               target="_blank"
diff --git a/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx b/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx
index 0460ae91cf5..243d683987e 100644
--- a/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx
@@ -82,7 +82,7 @@ export const ISO27001 = () => {
         ) : (
           <div className="@lg:flex items-center justify-center h-full">
             <Button
-              type="default"
+              variant="default"
               icon={<Download />}
               onClick={handleDownloadClick}
               disabled={!slug}
diff --git a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
index 6b7d48642d7..488d71de731 100644
--- a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
@@ -80,7 +80,7 @@ export const SOC2 = () => {
         ) : (
           <div className="@lg:flex items-center justify-center h-full">
             <Button
-              type="default"
+              variant="default"
               icon={<Download />}
               onClick={handleDownloadClick}
               disabled={!slug}
diff --git a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
index 456a8420c9b..aa385898696 100644
--- a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
@@ -68,7 +68,7 @@ export const SecurityQuestionnaire = () => {
           <NoPermission resourceText="access our security questionnaire" />
         ) : !hasAccessToQuestionnaire ? (
           <div className="@lg:flex items-center justify-center h-full">
-            <Button asChild type="default">
+            <Button asChild variant="default">
               <Link
                 href={`/org/${slug}/billing?panel=subscriptionPlan&source=securityQuestionnaire`}
               >
@@ -79,7 +79,7 @@ export const SecurityQuestionnaire = () => {
         ) : (
           <div className="@lg:flex items-center justify-center h-full">
             <Button
-              type="default"
+              variant="default"
               icon={<Download />}
               onClick={handleDownloadClick}
               disabled={!slug}
diff --git a/apps/studio/components/interfaces/Organization/Documents/TIA.tsx b/apps/studio/components/interfaces/Organization/Documents/TIA.tsx
index 1e4feece1c4..c9a63b85e14 100644
--- a/apps/studio/components/interfaces/Organization/Documents/TIA.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/TIA.tsx
@@ -24,7 +24,7 @@ export const TIA = () => {
       </ScaffoldSectionDetail>
       <ScaffoldSectionContent>
         <div className="@lg:flex items-center justify-center h-full">
-          <Button asChild type="default" iconRight={<Download />}>
+          <Button asChild variant="default" iconRight={<Download />}>
             <a
               href="https://supabase.com/downloads/docs/Supabase+TIA+250314.pdf"
               target="_blank"
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
index 182858bdb8b..359d0868497 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
@@ -141,7 +141,7 @@ export const DeleteOrganizationButton = () => {
     <>
       <div className="mt-2">
         <ButtonTooltip
-          type="danger"
+          variant="danger"
           disabled={!canDeleteOrganization || !orgSlug}
           loading={!orgSlug}
           onClick={() => {
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/OptInToOpenAIToggle.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/OptInToOpenAIToggle.tsx
index ddbf50201e5..44272d1bcf5 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/OptInToOpenAIToggle.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/OptInToOpenAIToggle.tsx
@@ -14,7 +14,7 @@ export const OptInToOpenAIToggle = () => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="outline" className="w-fit">
+        <Button variant="outline" className="w-fit">
           Learn more about data privacy
         </Button>
       </DialogTrigger>
diff --git a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
index 302648dcf61..9e8b25208ab 100644
--- a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
+++ b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
@@ -108,7 +108,7 @@ export const HeaderBanner = ({ variant, title, description, onDismiss }: HeaderB
 
         {onDismiss && (
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             className="opacity-75 z-1 shrink-0 p-0.5 h-auto absolute right-5 md:right-4 top-1/2 -translate-y-1/2"
             onClick={onDismiss}
diff --git a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
index 348f5271829..42a058dfeed 100644
--- a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
@@ -201,7 +201,7 @@ export const InvoicesSettings = () => {
                           )}
 
                         <ButtonTooltip
-                          type="outline"
+                          variant="outline"
                           className="w-7"
                           icon={<ScrollText size={16} strokeWidth={1.5} />}
                           onClick={() => fetchInvoice(x.id)}
@@ -210,7 +210,7 @@ export const InvoicesSettings = () => {
 
                         {x.status === InvoiceStatus.PAID && x.amount_due > 0 && (
                           <ButtonTooltip
-                            type="outline"
+                            variant="outline"
                             className="w-7"
                             icon={<Receipt size={16} strokeWidth={1.5} />}
                             onClick={() => fetchReceipt(x.id)}
@@ -239,7 +239,7 @@ export const InvoicesSettings = () => {
             <Button
               icon={<ChevronLeft />}
               aria-label="Previous page"
-              type="default"
+              variant="default"
               size="tiny"
               disabled={page === 1}
               onClick={async () => setPage(page - 1)}
@@ -247,7 +247,7 @@ export const InvoicesSettings = () => {
             <Button
               icon={<ChevronRight />}
               aria-label="Next page"
-              type="default"
+              variant="default"
               size="tiny"
               disabled={page * PAGE_LIMIT >= (count ?? 0)}
               onClick={async () => setPage(page + 1)}
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
index d88e6280a19..7197b5679d0 100644
--- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -373,7 +373,7 @@ export const NewOrgForm = ({
           footer={
             <div key="panel-footer" className="flex w-full items-center justify-between">
               <Button
-                type="default"
+                variant="default"
                 disabled={newOrgLoading || paymentConfirmationLoading}
                 onClick={() => {
                   if (!!lastVisitedOrganization) router.push(`/org/${lastVisitedOrganization}`)
@@ -385,8 +385,8 @@ export const NewOrgForm = ({
 
               <Button
                 form={FORM_ID}
-                htmlType="submit"
-                type="primary"
+                type="submit"
+                variant="primary"
                 loading={newOrgLoading}
                 disabled={newOrgLoading || creationPreviewIsFetching}
               >
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
index bae93810eb7..f7825359b82 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
@@ -32,7 +32,7 @@ export const AuthorizedAppRow = ({ app, onSelectRevoke }: AuthorizedAppRowProps)
           <p className="text-xs font-mono truncate" title={app.app_id}>
             {app.app_id}
           </p>
-          <CopyButton iconOnly type="default" text={app.app_id} className="px-1" />
+          <CopyButton iconOnly variant="default" text={app.app_id} className="px-1" />
         </div>
       </TableCell>
       <TableCell>
@@ -43,7 +43,12 @@ export const AuthorizedAppRow = ({ app, onSelectRevoke }: AuthorizedAppRowProps)
         />
       </TableCell>
       <TableCell className="text-right">
-        <Button type="default" icon={<Trash />} className="px-1" onClick={() => onSelectRevoke()} />
+        <Button
+          variant="default"
+          icon={<Trash />}
+          className="px-1"
+          onClick={() => onSelectRevoke()}
+        />
       </TableCell>
     </TableRow>
   )
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
index 1f9b78bcef6..e28c76c4321 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
@@ -55,7 +55,7 @@ export const OAuthAppRow = ({ app, onSelectEdit, onSelectDelete }: OAuthAppRowPr
           <p className="text-xs font-mono truncate" title={app.client_id}>
             {app.client_id}
           </p>
-          <CopyButton type="default" iconOnly text={app.client_id ?? ''} className="px-1" />
+          <CopyButton variant="default" iconOnly text={app.client_id ?? ''} className="px-1" />
         </div>
       </TableCell>
       <TableCell>
@@ -68,7 +68,7 @@ export const OAuthAppRow = ({ app, onSelectEdit, onSelectDelete }: OAuthAppRowPr
       <TableCell className="text-right">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="default" icon={<MoreVertical />} className="px-1" />
+            <Button variant="default" icon={<MoreVertical />} className="px-1" />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" side="bottom" className="w-32">
             <Tooltip>
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
index bb26d0e0f0d..1eef5169579 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
@@ -171,7 +171,7 @@ export const OAuthApps = () => {
               >
                 <ButtonTooltip
                   disabled={!canCreateOAuthApps}
-                  type="primary"
+                  variant="primary"
                   onClick={() => setShowPublishModal(true)}
                   tooltip={{
                     content: {
@@ -215,7 +215,7 @@ export const OAuthApps = () => {
               >
                 <div className="absolute top-4 right-4">
                   <Button
-                    type="text"
+                    variant="text"
                     icon={<X size={18} />}
                     className="px-1"
                     onClick={() => setCreatedApp(undefined)}
@@ -236,13 +236,13 @@ export const OAuthApps = () => {
                     <div className="flex items-center gap-2">
                       <p className="text-sm text-foreground-light">Client ID</p>
                       <p className="font-mono text-sm">{createdApp.client_id}</p>
-                      <CopyButton text={createdApp.client_id} type="default" iconOnly />
+                      <CopyButton text={createdApp.client_id} variant="default" iconOnly />
                     </div>
 
                     <div className="flex items-center gap-2">
                       <p className="text-sm text-foreground-light">Client Secret</p>
                       <p className="font-mono text-sm">{createdApp.client_secret}</p>
-                      <CopyButton text={createdApp.client_secret} type="default" iconOnly />
+                      <CopyButton text={createdApp.client_secret} variant="default" iconOnly />
                     </div>
                   </div>
                 </div>
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/OAuthSecrets.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/OAuthSecrets.tsx
index 8027f693adb..6011f897441 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/OAuthSecrets.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/OAuthSecrets.tsx
@@ -54,7 +54,7 @@ export const OAuthSecrets = ({ selectedApp }: Props) => {
 
         {canManageSecrets && (
           <ButtonTooltip
-            type="default"
+            variant="default"
             disabled={!appId || secrets.length >= 5}
             onClick={handleCreateSecret}
             loading={isCreatingSecret}
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/SecretRow.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/SecretRow.tsx
index f0663797b44..f00e35e196a 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/SecretRow.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/SecretRow.tsx
@@ -66,7 +66,7 @@ export const SecretRow = ({ secret, appId }: SecretRowProps) => {
                   {isNew ? secret.client_secret : `${secret.client_secret_alias}${'*'.repeat(36)}`}
                 </p>
                 {isNew && secret.client_secret && (
-                  <CopyButton text={secret.client_secret} type="default" iconOnly />
+                  <CopyButton text={secret.client_secret} variant="default" iconOnly />
                 )}
               </div>
             </div>
@@ -87,7 +87,7 @@ export const SecretRow = ({ secret, appId }: SecretRowProps) => {
         </div>
         <div className="flex items-center gap-2">
           <ButtonTooltip
-            type="default"
+            variant="default"
             className="w-7"
             icon={<Trash />}
             disabled={!appId || !canManageSecrets || isLast}
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/Scopes.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/Scopes.tsx
index f4a8baea852..844aaf421ee 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/Scopes.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/Scopes.tsx
@@ -76,7 +76,7 @@ const Scope = ({
       </div>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="default" iconRight={<ChevronDown />}>
+          <Button variant="default" iconRight={<ChevronDown />}>
             <p>{accessDescription}</p>
           </Button>
         </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
index f16f8ff9c1d..2f4dbd6b39e 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
@@ -274,7 +274,7 @@ export const PublishAppSidePanel = ({
                         <div className="absolute bottom-1 right-1">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                              <Button type="default" className="px-1">
+                              <Button variant="default" className="px-1">
                                 <Edit />
                               </Button>
                             </DropdownMenuTrigger>
@@ -338,7 +338,7 @@ export const PublishAppSidePanel = ({
                     </p>
                   </div>
                   <Button
-                    type="default"
+                    variant="default"
                     onClick={() => appendCallbackUrl({ id: uuidv4(), value: '' })}
                   >
                     Add URL
@@ -364,7 +364,7 @@ export const PublishAppSidePanel = ({
                               {callbackUrlsFields.length > 1 ? (
                                 <InputGroupAddon align="inline-end">
                                   <InputGroupButton
-                                    type="default"
+                                    variant="default"
                                     onClick={() => removeCallbackUrl(index)}
                                   >
                                     Remove
@@ -414,14 +414,14 @@ export const PublishAppSidePanel = ({
             <SidePanel.Content>
               <div className="pt-2 pb-3 flex items-center justify-between">
                 <Button
-                  type="default"
+                  variant="default"
                   onClick={() => setShowPreview(true)}
                   disabled={name.length === 0 || website.length === 0}
                 >
                   Preview consent for users
                 </Button>
                 <div className="flex items-center space-x-2">
-                  <Button type="default" disabled={isSubmitting} onClick={() => onClose()}>
+                  <Button variant="default" disabled={isSubmitting} onClick={() => onClose()}>
                     Cancel
                   </Button>
                   <Shortcut
@@ -430,7 +430,7 @@ export const PublishAppSidePanel = ({
                     options={{ enabled: visible && !isSubmitting }}
                     side="top"
                   >
-                    <Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting}>
+                    <Button type="submit" loading={isSubmitting} disabled={isSubmitting}>
                       Confirm
                     </Button>
                   </Shortcut>
diff --git a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx
index 6f11361e133..6c761bb596d 100644
--- a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx
+++ b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx
@@ -77,12 +77,12 @@ export function AppsList({ onCreateApp, createShortcutId }: AppsListProps) {
         >
           {createShortcutId ? (
             <Shortcut id={createShortcutId} onTrigger={onCreateApp} side="bottom">
-              <Button type="primary" icon={<Plus size={14} />} onClick={onCreateApp}>
+              <Button variant="primary" icon={<Plus size={14} />} onClick={onCreateApp}>
                 Create app
               </Button>
             </Shortcut>
           ) : (
-            <Button type="primary" icon={<Plus size={14} />} onClick={onCreateApp}>
+            <Button variant="primary" icon={<Plus size={14} />} onClick={onCreateApp}>
               Create app
             </Button>
           )}
diff --git a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsListTable.tsx b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsListTable.tsx
index 9c56df35c0c..700524f21f9 100644
--- a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsListTable.tsx
+++ b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsListTable.tsx
@@ -80,7 +80,7 @@ export function AppsListTable({
                 <TableCell className="text-right">
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button type="default" icon={<MoreVertical size={14} />} className="w-7" />
+                      <Button variant="default" icon={<MoreVertical size={14} />} className="w-7" />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end" side="bottom" className="w-44">
                       <DropdownMenuItem className="gap-x-2" onClick={() => onViewApp(app)}>
diff --git a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx
index 5f603fa83c4..88c520acf81 100644
--- a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx
+++ b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx
@@ -182,7 +182,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                     <div className="flex items-center gap-2">
                       {selectedPermissions.length > 0 && (
                         <Button
-                          type="default"
+                          variant="default"
                           size="tiny"
                           className="p-1"
                           icon={<RotateCcw size={16} />}
@@ -197,7 +197,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                       >
                         <PopoverTrigger asChild>
                           <Button
-                            type="default"
+                            variant="default"
                             size="tiny"
                             icon={<Plus size={14} />}
                             disabled={isLoading}
@@ -263,7 +263,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                                 )}
                               </div>
                               <Button
-                                type="text"
+                                variant="text"
                                 size="tiny"
                                 className="p-1"
                                 icon={<X size={16} />}
@@ -316,7 +316,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                         <h3 className="text-sm font-medium">Private key</h3>
                         <div className="flex items-center gap-2">
                           <Button
-                            type="default"
+                            variant="default"
                             size="tiny"
                             icon={<Copy size={12} />}
                             onClick={() => copy(generatedKey.private_key, { withToast: true })}
@@ -324,7 +324,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                             Copy
                           </Button>
                           <Button
-                            type="default"
+                            variant="default"
                             size="tiny"
                             icon={<Download size={12} />}
                             onClick={() => {
@@ -368,12 +368,12 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
 
           <SheetFooter className="justify-end! w-full mt-auto py-4 border-t">
             <div className="flex gap-2">
-              <Button type="default" onClick={handleRequestClose} disabled={isLoading}>
+              <Button variant="default" onClick={handleRequestClose} disabled={isLoading}>
                 Cancel
               </Button>
               {keyRevealed ? (
                 <Button
-                  type="primary"
+                  variant="primary"
                   disabled={!keyCopied}
                   onClick={() => {
                     onCreated(createdApp!)
@@ -384,7 +384,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                 </Button>
               ) : (
                 <Button
-                  type="primary"
+                  variant="primary"
                   disabled={!canCreate}
                   loading={isLoading}
                   onClick={handleCreate}
diff --git a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheet.tsx b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheet.tsx
index 1ced43bcd04..47a46945a3b 100644
--- a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheet.tsx
+++ b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheet.tsx
@@ -68,7 +68,7 @@ export function ViewAppSheet({ app, visible, onClose, onDeleted }: ViewAppSheetP
             className={cn('flex flex-row justify-between gap-x-4 items-center border-b')}
           >
             <p className="truncate font-medium">{app?.name}</p>
-            <Button type="text" icon={<X size={16} />} className="px-1" onClick={onClose} />
+            <Button variant="text" icon={<X size={16} />} className="px-1" onClick={onClose} />
           </SheetHeader>
 
           <ScrollArea className="flex-1 max-h-[calc(100vh-60px)]">
diff --git a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetDangerZone.tsx b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetDangerZone.tsx
index 52693b413cf..b09b409fc40 100644
--- a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetDangerZone.tsx
+++ b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetDangerZone.tsx
@@ -13,7 +13,7 @@ export function ViewAppSheetDangerZone({ onDelete }: ViewAppSheetDangerZoneProps
         <AlertTitle>Delete app</AlertTitle>
         <AlertDescription>Permanently delete this app and all its installations.</AlertDescription>
         <div className="mt-2">
-          <Button type="danger" onClick={onDelete}>
+          <Button variant="danger" onClick={onDelete}>
             Delete app
           </Button>
         </div>
diff --git a/apps/studio/components/interfaces/Organization/SSO/AttributeMapping.tsx b/apps/studio/components/interfaces/Organization/SSO/AttributeMapping.tsx
index 96d8525d08a..bf833f8f1b3 100644
--- a/apps/studio/components/interfaces/Organization/SSO/AttributeMapping.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/AttributeMapping.tsx
@@ -112,7 +112,7 @@ export const AttributeMapping = ({
           <p>Map SSO attributes to user fields. Presets for supported identity providers:</p>
           <div className="flex flex-wrap items-center gap-2">
             {PROVIDER_PRESETS.map((preset) => (
-              <Button key={preset.name} type="outline" onClick={() => applyPreset(preset)}>
+              <Button key={preset.name} variant="outline" onClick={() => applyPreset(preset)}>
                 {preset.name}
               </Button>
             ))}
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
index e9e697ba9a2..04e36069667 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
@@ -382,7 +382,7 @@ export const SSOConfig = () => {
                     <div>
                       {!!ssoConfig && (
                         <Button
-                          type="danger"
+                          variant="danger"
                           icon={<Trash />}
                           onClick={() => setIsDeleteModalVisible(true)}
                           disabled={isCreating || isUpdating || isDeleting}
@@ -394,7 +394,7 @@ export const SSOConfig = () => {
                     <div className="flex space-x-2">
                       {form.formState.isDirty && (
                         <Button
-                          type="default"
+                          variant="default"
                           disabled={isCreating || isUpdating}
                           onClick={() => form.reset()}
                         >
@@ -402,8 +402,8 @@ export const SSOConfig = () => {
                         </Button>
                       )}
                       <Button
-                        type="primary"
-                        htmlType="submit"
+                        variant="primary"
+                        type="submit"
                         loading={isCreating || isUpdating}
                         disabled={!form.formState.isDirty || isCreating || isUpdating}
                       >
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx b/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx
index 8ecc96de285..8f4c63e0920 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx
@@ -51,7 +51,7 @@ export const SSODomains = ({ form }: { form: ReturnType<typeof useForm<SSOConfig
               />
 
               <Button
-                type="default"
+                variant="default"
                 icon={<Trash size={12} />}
                 className="h-[34px] w-[34px]"
                 onClick={() => remove(idx)}
@@ -60,7 +60,7 @@ export const SSODomains = ({ form }: { form: ReturnType<typeof useForm<SSOConfig
           ))}
           <div>
             <Button
-              type="default"
+              variant="default"
               icon={<Plus className="w-4 h-4" />}
               size="tiny"
               onClick={() => append({ value: '' })}
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx
index bd270e2bb51..2084eceff3d 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx
@@ -109,7 +109,7 @@ export const SSOMetadata = ({
                       onChange={handleFileChange}
                     />
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<Upload className="w-4 h-4" />}
                       onClick={() => fileInputRef.current?.click()}
                     >
diff --git a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
index 1e72cd5b5fb..a8ea11d9644 100644
--- a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
+++ b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
@@ -171,7 +171,7 @@ export const SecuritySettings = () => {
                     <CardFooter className="justify-end space-x-2">
                       {form.formState.isDirty && (
                         <Button
-                          type="default"
+                          variant="default"
                           disabled={isLoadingMfa || isUpdatingMfa}
                           onClick={() =>
                             form.reset({ enforceMfa: hasAccessToEnforceMfa ? mfaConfig : false })
@@ -181,8 +181,8 @@ export const SecuritySettings = () => {
                         </Button>
                       )}
                       <Button
-                        type="primary"
-                        htmlType="submit"
+                        variant="primary"
+                        type="submit"
                         disabled={
                           !hasAccessToEnforceMfa ||
                           !canUpdateMfaConfig ||
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index ee9b857f01f..140fb26a64f 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -260,7 +260,7 @@ export const InviteMemberButton = () => {
           tooltipOpen={isOpen ? false : undefined}
         >
           <ButtonTooltip
-            type="primary"
+            variant="primary"
             disabled={!canInviteMembers}
             icon={<UserPlus size={14} />}
             className="pointer-events-auto grow md:grow-0"
@@ -467,7 +467,7 @@ export const InviteMemberButton = () => {
           </Form>
         </SheetSection>
         <SheetFooter>
-          <Button type="default" onClick={confirmOnClose}>
+          <Button variant="default" onClick={confirmOnClose}>
             Cancel
           </Button>
           <Shortcut
@@ -477,9 +477,9 @@ export const InviteMemberButton = () => {
             side="top"
           >
             <Button
-              type="primary"
+              variant="primary"
               form="organization-invitation"
-              htmlType="submit"
+              type="submit"
               loading={isInviting}
             >
               {emailCount >= 2 ? 'Send invitations' : 'Send invitation'}
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/LeaveTeamButton.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/LeaveTeamButton.tsx
index 96ccde60057..556958d6ce0 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/LeaveTeamButton.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/LeaveTeamButton.tsx
@@ -74,7 +74,7 @@ export const LeaveTeamButton = () => {
   return (
     <>
       <ButtonTooltip
-        type="default"
+        variant="default"
         disabled={!canLeave || !organizationMembersDeletionEnabled || isLeaving}
         onClick={() => setIsLeaveTeamModalOpen(true)}
         tooltip={{
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
index 6e32afd562a..7371cded9cb 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -163,7 +163,7 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
     <>
       <div className="flex items-center justify-end gap-x-2">
         <ButtonTooltip
-          type="default"
+          variant="default"
           disabled={isPendingInviteAcceptance || !canRemoveMember}
           onClick={() => setShowAccessModal(true)}
           tooltip={{
@@ -183,7 +183,7 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               className="px-1.5"
               disabled={isLoading}
               loading={isLoading}
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx
index dbf645bfb8e..f019cfdb6e7 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx
@@ -318,7 +318,7 @@ export const UpdateRolesPanel = ({ visible, member, onClose }: UpdateRolesPanelP
 
                         {!isApplyingRoleToAllProjects && (
                           <ButtonTooltip
-                            type="text"
+                            variant="text"
                             disabled={!canRemoveRole}
                             className="px-1"
                             icon={<X />}
@@ -346,7 +346,7 @@ export const UpdateRolesPanel = ({ visible, member, onClose }: UpdateRolesPanelP
                   modal={true}
                   onSelect={onSelectProject}
                   renderTrigger={() => (
-                    <Button type="default" className="w-min">
+                    <Button variant="default" className="w-min">
                       Add project
                     </Button>
                   )}
@@ -369,7 +369,7 @@ export const UpdateRolesPanel = ({ visible, member, onClose }: UpdateRolesPanelP
             </SheetSection>
 
             <SheetFooter className="flex items-center justify-end! px-5 py-4 w-full border-t">
-              <Button type="default" disabled={false} onClick={() => onClose()}>
+              <Button variant="default" disabled={false} onClick={() => onClose()}>
                 Cancel
               </Button>
               <Button
diff --git a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
index f9221c0ae2f..e6fb9283d97 100644
--- a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
@@ -167,7 +167,7 @@ export const Usage = () => {
                       return (
                         <Button
                           block
-                          type="default"
+                          variant="default"
                           role="combobox"
                           size="tiny"
                           aria-expanded={open}
diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx
index 7a5f7da5f9d..53f64a0a574 100644
--- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx
@@ -259,7 +259,7 @@ const AttributeUsage = ({
                       </div>
                     </div>
 
-                    <Button type="primary" asChild>
+                    <Button variant="primary" asChild>
                       <Link href={upgradeUrl}>Upgrade plan</Link>
                     </Button>
                   </div>
diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DatabaseSizeUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DatabaseSizeUsage.tsx
index 24334d7dcfe..4c597269bd8 100644
--- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DatabaseSizeUsage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DatabaseSizeUsage.tsx
@@ -112,7 +112,7 @@ const DatabaseSizeUsage = ({
                       <span className="text-foreground-light flex items-center gap-2">
                         {project.name}
                       </span>
-                      <Button asChild type="default" size={'tiny'}>
+                      <Button asChild variant="default" size={'tiny'}>
                         <Link
                           href={`/project/${project.ref}/observability/database#database-size-report`}
                         >
diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
index b65ee501eaa..8dc64ae58b7 100644
--- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
@@ -174,7 +174,7 @@ export const DiskUsage = ({
                         <span className="text-foreground-light flex items-center gap-2">
                           {project.name}
                         </span>
-                        <Button asChild type="default" size={'tiny'}>
+                        <Button asChild variant="default" size={'tiny'}>
                           <Link href={`/project/${project.ref}/settings/compute-and-disk`}>
                             Manage Disk
                           </Link>
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
index 214702fd3f7..a89cf6162a4 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -108,11 +108,11 @@ export const OrganizationInvite = () => {
   if (isSignedOut) {
     return withLayout(
       <div className="flex flex-col gap-2">
-        <Button asChild type="primary" block>
+        <Button asChild variant="primary" block>
           <Link href={loginRedirectLink}>Sign in</Link>
         </Button>
         {isSignUpEnabled && (
-          <Button asChild type="default" block>
+          <Button asChild variant="default" block>
             <Link href={signupRedirectLink}>Create an account</Link>
           </Button>
         )}
@@ -147,7 +147,7 @@ export const OrganizationInvite = () => {
           type="warning"
           description="This invite has already been accepted or declined."
         />
-        <Button type="default" block asChild>
+        <Button variant="default" block asChild>
           <Link href="/">Back to dashboard</Link>
         </Button>
       </div>
@@ -171,7 +171,7 @@ export const OrganizationInvite = () => {
 
       <div className="flex flex-col gap-2">
         <Button
-          type="primary"
+          variant="primary"
           block
           loading={isJoining}
           disabled={isJoining}
@@ -179,7 +179,7 @@ export const OrganizationInvite = () => {
         >
           Accept invite
         </Button>
-        <Button asChild type="text" block>
+        <Button asChild variant="text" block>
           <Link href="/projects">Decline</Link>
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
index e009e3789b7..2209dfeb9a2 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
@@ -64,7 +64,7 @@ export const OrganizationInviteError = ({
             )
           }
         />
-        <Button type="default" block onClick={handleSignOut}>
+        <Button variant="default" block onClick={handleSignOut}>
           Sign out
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx
index fec8c1a2999..7d762cba140 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx
@@ -150,7 +150,7 @@ export const PlatformWebhooksDeliveryDetailsSheet = ({
                         label="Copy event payload"
                       >
                         <Button
-                          type="text"
+                          variant="text"
                           icon={<Copy size={14} />}
                           onClick={() => onCopy(deliveryEventPayload, 'event payload')}
                         >
@@ -193,7 +193,7 @@ export const PlatformWebhooksDeliveryDetailsSheet = ({
                         label="Copy response payload"
                       >
                         <Button
-                          type="text"
+                          variant="text"
                           icon={<Copy size={14} />}
                           onClick={() => onCopy(deliveryResponsePayload, 'response payload')}
                         >
@@ -220,7 +220,7 @@ export const PlatformWebhooksDeliveryDetailsSheet = ({
               onTrigger={() => onRetryDelivery(retryableDelivery.id)}
             >
               <Button
-                type="default"
+                variant="default"
                 icon={<RotateCcw />}
                 onClick={() => onRetryDelivery(retryableDelivery.id)}
               >
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
index cb4d871c814..e026d94b92d 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
@@ -123,7 +123,7 @@ const DELIVERY_COLUMNS: ColumnDef<WebhookDelivery>[] = [
         <div className="flex h-full items-center justify-end">
           {row.original.status !== 'success' ? (
             <ButtonTooltip
-              type="default"
+              variant="default"
               size="tiny"
               className="w-7 shrink-0 hit-area-2"
               icon={<RotateCcw />}
@@ -137,7 +137,7 @@ const DELIVERY_COLUMNS: ColumnDef<WebhookDelivery>[] = [
             />
           ) : (
             <Button
-              type="default"
+              variant="default"
               size="tiny"
               className="w-7 shrink-0 hit-area-2 invisible pointer-events-none"
               icon={<RotateCcw />}
@@ -216,7 +216,7 @@ export const PlatformWebhooksEndpointDetails = ({
                   label="Copy endpoint URL"
                 >
                   <Button
-                    type="text"
+                    variant="text"
                     size="tiny"
                     className="mt-0.5 shrink-0 h-5 w-5 p-0"
                     icon={<Copy size={12} />}
@@ -366,7 +366,7 @@ export const PlatformWebhooksEndpointDetails = ({
                   icon={<ChevronLeft />}
                   className="w-7 hit-area-2"
                   aria-label="Previous page"
-                  type="default"
+                  variant="default"
                   size="tiny"
                   disabled={!table.getCanPreviousPage()}
                   onClick={() => table.previousPage()}
@@ -375,7 +375,7 @@ export const PlatformWebhooksEndpointDetails = ({
                   icon={<ChevronRight />}
                   className="w-7 hit-area-2"
                   aria-label="Next page"
-                  type="default"
+                  variant="default"
                   size="tiny"
                   disabled={!table.getCanNextPage()}
                   onClick={() => table.nextPage()}
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
index 199dcca2556..1373b733d37 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
@@ -121,7 +121,7 @@ export const PlatformWebhooksEndpointList = ({
           label="New endpoint"
           onTrigger={onCreateEndpoint}
         >
-          <Button type="primary" icon={<Plus />} onClick={onCreateEndpoint}>
+          <Button variant="primary" icon={<Plus />} onClick={onCreateEndpoint}>
             New endpoint
           </Button>
         </Shortcut>
@@ -133,7 +133,7 @@ export const PlatformWebhooksEndpointList = ({
           title="No endpoints yet"
           description="Create an endpoint to start receiving webhook deliveries."
         >
-          <Button type="default" onClick={onCreateEndpoint}>
+          <Button variant="default" onClick={onCreateEndpoint}>
             Create endpoint
           </Button>
         </EmptyStatePresentational>
@@ -215,7 +215,7 @@ export const PlatformWebhooksEndpointList = ({
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
                             <Button
-                              type="default"
+                              variant="default"
                               icon={<MoreVertical />}
                               className="w-7 hit-area-2"
                             />
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
index b13630f069f..5ba618c8ccf 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
@@ -582,7 +582,7 @@ export const PlatformWebhooksEndpointSheet = ({
           </Form>
         </SheetSection>
         <SheetFooter>
-          <Button type="default" onClick={confirmOnClose}>
+          <Button variant="default" onClick={confirmOnClose}>
             Cancel
           </Button>
           <Shortcut
@@ -590,7 +590,7 @@ export const PlatformWebhooksEndpointSheet = ({
             label={mode === 'create' ? 'Create endpoint' : 'Save changes'}
             onTrigger={() => form.handleSubmit(onSubmit)()}
           >
-            <Button form="platform-webhook-endpoint-form" htmlType="submit">
+            <Button form="platform-webhook-endpoint-form" type="submit">
               {mode === 'create' ? 'Create endpoint' : 'Save changes'}
             </Button>
           </Shortcut>
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx
index 2c5a0cbe8cc..a0b26c95a94 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx
@@ -342,7 +342,7 @@ export const PlatformWebhooksPage = ({ scope, endpointId }: PlatformWebhooksPage
                 options={{ enabled: !isEndpointSheetOpen }}
               >
                 <Button
-                  type="default"
+                  variant="default"
                   icon={<Pencil size={14} />}
                   onClick={() => {
                     setEditEnabledOverride(null)
@@ -354,7 +354,7 @@ export const PlatformWebhooksPage = ({ scope, endpointId }: PlatformWebhooksPage
               </Shortcut>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="default" icon={<EllipsisVertical />} className="w-7" />
+                  <Button variant="default" icon={<EllipsisVertical />} className="w-7" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" side="bottom" className="w-48">
                   <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Project/ResumeProjectButton.tsx b/apps/studio/components/interfaces/Project/ResumeProjectButton.tsx
index ce7b0eaebdf..0b78c9f0378 100644
--- a/apps/studio/components/interfaces/Project/ResumeProjectButton.tsx
+++ b/apps/studio/components/interfaces/Project/ResumeProjectButton.tsx
@@ -41,7 +41,7 @@ const FormSchema = z.object({
 
 type ResumeProjectButtonProps = Pick<
   ComponentPropsWithoutRef<typeof ButtonTooltip>,
-  'className' | 'size' | 'type'
+  'className' | 'size' | 'variant'
 > & {
   label?: string
 }
@@ -50,7 +50,7 @@ export const ResumeProjectButton = ({
   className,
   label = 'Resume project',
   size,
-  type = 'default',
+  variant = 'default',
 }: ResumeProjectButtonProps) => {
   const router = useRouter()
   const { ref } = useParams()
@@ -161,7 +161,7 @@ export const ResumeProjectButton = ({
       <ButtonTooltip
         className={className}
         size={size}
-        type={type}
+        variant={variant}
         disabled={buttonDisabled}
         loading={isRestoring}
         onClick={onSelectRestore}
@@ -249,8 +249,8 @@ export const ResumeProjectButton = ({
           </DialogSection>
           <DialogFooter>
             <Button
-              htmlType="button"
-              type="default"
+              type="button"
+              variant="default"
               onClick={() => setShowFreeProjectLimitWarning(false)}
             >
               Understood
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx
index 422677d63a3..a24e807f28b 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx
@@ -45,7 +45,7 @@ export const Entities = ({ language }: ContentProps) => {
         <div className="flex items-center gap-x-2 px-4 mt-3">
           <DocsButton href={`${DOCS_URL}/guides/database/api/generating-types`} />
           <Button
-            type="default"
+            variant="default"
             disabled={isGeneratingTypes}
             loading={isGeneratingTypes}
             icon={<Download strokeWidth={1.5} />}
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Introduction.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Introduction.tsx
index a29d0fdfe3e..e1139606d83 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Introduction.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Introduction.tsx
@@ -61,7 +61,7 @@ export const Introduction = ({ showKeys, language, apikey, endpoint }: ContentPr
                 actions={[
                   <Button
                     key="copy"
-                    type="default"
+                    variant="default"
                     icon={<Copy />}
                     onClick={() => {
                       setCopied('anon')
@@ -102,7 +102,7 @@ export const Introduction = ({ showKeys, language, apikey, endpoint }: ContentPr
                 actions={[
                   <Button
                     key="copy"
-                    type="default"
+                    variant="default"
                     icon={<Copy />}
                     onClick={() => {
                       setCopied('service')
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx
index 1535382868b..cc096785354 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx
@@ -107,7 +107,7 @@ export const FirstLevelNav = (): ReactNode => {
         <Button
           block
           asChild
-          type="text"
+          variant="text"
           size="small"
           icon={
             <SVG
@@ -123,7 +123,7 @@ export const FirstLevelNav = (): ReactNode => {
             GraphiQL
           </Link>
         </Button>
-        <Button block asChild type="text" size="small" icon={<BookOpen />}>
+        <Button block asChild variant="text" size="small" icon={<BookOpen />}>
           <Link
             href={`${DOCS_URL}/guides/graphql`}
             target="_blank"
@@ -136,12 +136,12 @@ export const FirstLevelNav = (): ReactNode => {
       </div>
 
       <div className="px-2 py-4">
-        <Button block asChild type="text" size="small" icon={<Book />}>
+        <Button block asChild variant="text" size="small" icon={<Book />}>
           <Link href={`${DOCS_URL}`} target="_blank" rel="noreferrer" className="justify-start!">
             Documentation
           </Link>
         </Button>
-        <Button block asChild type="text" size="small" icon={<BookOpen />}>
+        <Button block asChild variant="text" size="small" icon={<BookOpen />}>
           <Link
             href={`${DOCS_URL}/guides/api`}
             target="_blank"
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
index 1f4b2119ec6..5638fe962ac 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
@@ -35,7 +35,7 @@ const LanguageSelector = ({ simplifiedVersion = false }: LanguageSelectorProps)
       <Popover modal={false} open={showLanguage} onOpenChange={setShowLanguage}>
         <PopoverTrigger asChild>
           <Button
-            type="default"
+            variant="default"
             className={simplifiedVersion ? 'px-1' : ''}
             icon={
               simplifiedVersion ? (
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx
index b5236ff29f4..6882cae252f 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx
@@ -75,7 +75,7 @@ export const ProjectAPIDocs = () => {
             <div className="flex items-center space-x-1">
               {!isEntityDocs && <LanguageSelector simplifiedVersion />}
               {isIntroduction && (
-                <Button type="default" onClick={() => setShowKeys(!showKeys)}>
+                <Button variant="default" onClick={() => setShowKeys(!showKeys)}>
                   {showKeys ? 'Hide keys' : 'Show keys'}
                 </Button>
               )}
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.Layout.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.Layout.tsx
index 85991d8d16b..05ed7f5bf11 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.Layout.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.Layout.tsx
@@ -96,7 +96,7 @@ const NavTitle = ({ title, category }: NavTitleProps) => {
 
   return (
     <div className="flex items-center space-x-2 mb-2">
-      <Button type="text" icon={<ChevronLeft />} className="px-1" onClick={handleBack} />
+      <Button variant="text" icon={<ChevronLeft />} className="px-1" onClick={handleBack} />
       <p className="text-sm text-foreground-light capitalize">{title}</p>
     </div>
   )
@@ -116,7 +116,7 @@ const ResourcePicker = ({ category, resource, renderResourceList }: ResourcePick
     <Popover open={open} onOpenChange={setOpen} modal={false}>
       <PopoverTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           size="small"
           className="w-full justify-between gap-2"
           iconRight={<Code className="rotate-90" />}
diff --git a/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx b/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx
index 2352580003f..ae6d34c9173 100644
--- a/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx
@@ -172,7 +172,7 @@ export const ProjectCreationFooter = ({
 
       <div className="flex items-end col-span-8 space-x-2 ml-auto">
         <Button
-          type="default"
+          variant="default"
           disabled={isCreatingNewProject || isSuccessNewProject}
           onClick={() => {
             if (!!lastVisitedOrganization) router.push(`/org/${lastVisitedOrganization}`)
@@ -182,7 +182,7 @@ export const ProjectCreationFooter = ({
           Cancel
         </Button>
         <Button
-          htmlType="submit"
+          type="submit"
           loading={isCreatingNewProject || isSuccessNewProject}
           disabled={!canCreateProject}
         >
diff --git a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
index 83e5f3c96d7..8a8f91060f3 100644
--- a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
@@ -123,7 +123,7 @@ export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: bo
       ) : (
         <div className="flex justify-between items-center mb-6">
           {titleContent}
-          <Button type="default" icon={<AiIconAnimation />} onClick={handleAskAssistant}>
+          <Button variant="default" icon={<AiIconAnimation />} onClick={handleAskAssistant}>
             Ask Assistant
           </Button>
         </div>
@@ -209,7 +209,7 @@ export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: bo
                               })
                             }}
                             telemetrySource="advisor_section"
-                            type="text"
+                            variant="text"
                             className="w-7 h-7"
                           />
                         </div>
@@ -228,7 +228,7 @@ export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: bo
           </Row>
           {hiddenIssuesCount > 0 && (
             <div className="mt-4 flex justify-end">
-              <Button type="text" onClick={() => openSidebar(SIDEBAR_KEYS.ADVISOR_PANEL)}>
+              <Button variant="text" onClick={() => openSidebar(SIDEBAR_KEYS.ADVISOR_PANEL)}>
                 View {hiddenIssuesCount} more issue{hiddenIssuesCount !== 1 ? 's' : ''} in Advisor
               </Button>
             </div>
diff --git a/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
index 4268d6d69bb..c71c93e3d89 100644
--- a/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
@@ -338,7 +338,7 @@ export function CustomReportSection() {
         <div className="flex items-center gap-x-2">
           {layout.length > 0 && (
             <ButtonTooltip
-              type="default"
+              variant="default"
               icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
               className="w-7"
               disabled={isRefreshing}
@@ -351,7 +351,7 @@ export function CustomReportSection() {
               projectRef={ref}
               onSelect={addSnippetToReport}
               trigger={
-                <Button type="default" icon={<Plus />}>
+                <Button variant="default" icon={<Plus />}>
                   Add block
                 </Button>
               }
@@ -382,7 +382,7 @@ export function CustomReportSection() {
                 projectRef={ref}
                 onSelect={addSnippetToReport}
                 trigger={
-                  <Button type="default" iconRight={<Plus size={14} />}>
+                  <Button variant="default" iconRight={<Plus size={14} />}>
                     Add your first block
                   </Button>
                 }
diff --git a/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx
index c9911399469..766d93cb318 100644
--- a/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx
@@ -176,7 +176,7 @@ export const ProjectConnectionPopover = ({ projectRef }: ProjectConnectionPopove
       <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             className="shrink-0"
             iconRight={
@@ -227,7 +227,7 @@ export const ProjectConnectionPopover = ({ projectRef }: ProjectConnectionPopove
           <DropdownMenuSeparator />
           <div className="p-1">
             <Button
-              type="default"
+              variant="default"
               size="tiny"
               className="w-full"
               onClick={() => {
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsDetailSheet.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsDetailSheet.tsx
index 54690f5e868..e1442415d8b 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsDetailSheet.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsDetailSheet.tsx
@@ -121,7 +121,7 @@ export const QueryInsightsDetailSheet = ({
                 <div className="flex items-center justify-between px-5 py-2 border-b shrink-0">
                   <p className="text-xs text-foreground-lighter">EXPLAIN ANALYZE output</p>
                   <Button
-                    type="default"
+                    variant="default"
                     size="tiny"
                     icon={<AiIconAnimation size={14} />}
                     onClick={() => {
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx
index d4868800048..5d01dd41047 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTable.tsx
@@ -408,7 +408,7 @@ export const QueryInsightsTable = ({
                     <Button
                       key="clear"
                       size="tiny"
-                      type="text"
+                      variant="text"
                       icon={<X className="h-4 w-4" />}
                       onClick={() => setSearchQuery('')}
                       className="p-0 h-5 w-5"
@@ -435,7 +435,7 @@ export const QueryInsightsTable = ({
           ].join(' ')}
         >
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             className="rounded-full shadow-md"
             onClick={() => onCurrentSelectQuery?.(null)}
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTableRow.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTableRow.tsx
index 6c9cd8bbedf..c74d0ec4ec0 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTableRow.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsightsTable/QueryInsightsTableRow.tsx
@@ -127,7 +127,7 @@ export const QueryInsightsTableRow = ({
 
       <div className="flex items-center gap-2 shrink-0 justify-end w-[260px]">
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           onClick={(e) => {
             e.stopPropagation()
@@ -139,7 +139,7 @@ export const QueryInsightsTableRow = ({
 
         {(item.issueType === 'index' || item.issueType === 'slow') && (
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             icon={isExplainLoading ? <Loader2 size={12} className="animate-spin" /> : undefined}
             onClick={(e) => {
@@ -153,7 +153,7 @@ export const QueryInsightsTableRow = ({
 
         {item.issueType === 'index' && (
           <Button
-            type="primary"
+            variant="primary"
             size="tiny"
             onClick={(e) => {
               e.stopPropagation()
@@ -166,7 +166,7 @@ export const QueryInsightsTableRow = ({
 
         {(item.issueType === 'error' || item.issueType === 'slow') && (
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             icon={<AiIconAnimation size={14} />}
             onClick={(e) => {
diff --git a/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx b/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
index 17708d338ce..cd3fb64bea2 100644
--- a/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
@@ -87,7 +87,7 @@ export function useQueryInsightsTableColumns({
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="text"
+                      variant="text"
                       size="tiny"
                       className="p-1 h-5 w-5 shrink-0"
                       icon={<ChevronDown size={14} className="text-foreground-muted" />}
@@ -164,7 +164,7 @@ export function useQueryInsightsTableColumns({
                   tooltip={{ content: { text: 'Query details' } }}
                   icon={<ArrowRight size={14} />}
                   size="tiny"
-                  type="default"
+                  variant="default"
                   onClick={(e: React.MouseEvent) => {
                     e.stopPropagation()
                     setSelectedRow(props.rowIdx)
@@ -372,7 +372,7 @@ export function useQueryInsightsTableColumns({
                 tooltip={{ content: { text: 'Query details' } }}
                 icon={<ArrowRight size={14} />}
                 size="tiny"
-                type="default"
+                variant="default"
                 onClick={(e: React.MouseEvent) => {
                   e.stopPropagation()
                   setSelectedTriageRow(props.rowIdx)
@@ -497,7 +497,7 @@ export function useQueryInsightsTableColumns({
             <div className="flex items-center gap-2 justify-end w-full h-full">
               {!row.issueType && (
                 <Button
-                  type="default"
+                  variant="default"
                   size="tiny"
                   onClick={(e: React.MouseEvent) => {
                     e.stopPropagation()
@@ -510,7 +510,7 @@ export function useQueryInsightsTableColumns({
               {row.issueType === 'index' && (
                 <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
                   <Button
-                    type="primary"
+                    variant="primary"
                     size="tiny"
                     className="rounded-r-none border-r-0"
                     onClick={() => {
@@ -523,7 +523,7 @@ export function useQueryInsightsTableColumns({
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button
-                        type="primary"
+                        variant="primary"
                         size="tiny"
                         className="rounded-l-none px-1"
                         icon={<ChevronDown size={12} />}
diff --git a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton.tsx
index 936e80a5ca1..6bf3bc380c7 100644
--- a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton.tsx
@@ -25,7 +25,7 @@ export const EnableIndexAdvisorButton = () => {
   return (
     <>
       <Button
-        type="primary"
+        variant="primary"
         onClick={() => {
           setIsDialogOpen(true)
           track('index_advisor_enable_button_clicked', { origin: 'banner' })
diff --git a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorDisabledState.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorDisabledState.tsx
index a92791953f8..13351f9d8eb 100644
--- a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorDisabledState.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorDisabledState.tsx
@@ -76,12 +76,12 @@ export const IndexAdvisorDisabledState = () => {
       <AlertDescription className="mt-3">
         <div className="flex items-center gap-x-2">
           {indexAdvisor === undefined ? (
-            <Button asChild type="default">
+            <Button asChild variant="default">
               <Link href={`/project/${ref}/settings/infrastructure`}>Upgrade Postgres version</Link>
             </Button>
           ) : (
             <Button
-              type="default"
+              variant="default"
               disabled={isEnablingExtension}
               loading={isEnablingExtension}
               onClick={() => onEnableIndexAdvisor()}
diff --git a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorNotice.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorNotice.tsx
index 6707b2815a5..f2443402989 100644
--- a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorNotice.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorNotice.tsx
@@ -45,7 +45,7 @@ export const IndexAdvisorNotice = () => {
           </div>
           <div className="flex items-center gap-x-2">
             <Button
-              type="default"
+              variant="default"
               size="tiny"
               onClick={() => setIsDismissed(true)}
               aria-label="Dismiss notification"
diff --git a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx
index a2d4c2da37d..b22ac3967b0 100644
--- a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexSuggestionIcon.tsx
@@ -126,7 +126,7 @@ export const IndexSuggestionIcon = ({
         />
         <div className="p-3 flex gap-2 items-center border-t justify-end">
           <Button
-            type="text"
+            variant="text"
             onClick={(e) => {
               e.stopPropagation()
               if (onClickIcon && !isCreatingIndex) onClickIcon()
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx
index 0fe56e6b638..621b0845ece 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx
@@ -88,7 +88,7 @@ export const QueryDetail = ({ selectedRow, onClickViewSuggestion, onClose }: Que
             onOpenAssistant={handleExplainQuery}
             telemetrySource="query_performance"
             size="tiny"
-            type="default"
+            variant="default"
           />
         </div>
         <div
@@ -129,7 +129,7 @@ export const QueryDetail = ({ selectedRow, onClickViewSuggestion, onClose }: Que
         />
         <div className="absolute bottom-[-13px] left-0 right-0 w-full flex items-center justify-center z-10">
           <Button
-            type="default"
+            variant="default"
             className="rounded-full"
             icon={<ChevronsUpDown />}
             onClick={() => setIsExpanded(!isExpanded)}
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
index f3c122c9520..0e6f5aef43c 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
@@ -435,7 +435,7 @@ export const QueryIndexes = ({
           <Button
             disabled={isExecuting}
             loading={isExecuting}
-            type="primary"
+            variant="primary"
             onClick={() => createIndex()}
           >
             Create index
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
index 21dadf5fead..a820803905d 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
@@ -130,7 +130,7 @@ export const QueryPerformanceGrid = ({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    type="text"
+                    variant="text"
                     size="tiny"
                     className="p-1 h-5 w-5 shrink-0"
                     icon={<ChevronDown size={14} className="text-foreground-muted" />}
@@ -199,7 +199,7 @@ export const QueryPerformanceGrid = ({
                   tooltip={{ content: { text: 'Query details' } }}
                   icon={<ArrowRight size={14} />}
                   size="tiny"
-                  type="default"
+                  variant="default"
                   onClick={(e) => {
                     e.stopPropagation()
                     setSelectedRow(props.rowIdx)
@@ -488,7 +488,7 @@ export const QueryPerformanceGrid = ({
           >
             {onRetry && (
               <div className="mt-4">
-                <Button type="default" onClick={onRetry}>
+                <Button variant="default" onClick={onRetry}>
                   Try again
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx b/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx
index 8a51ef28f24..c20c5b76342 100644
--- a/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx
@@ -73,7 +73,7 @@ export const SqlMonacoBlock = ({
       {!hideCopy && (
         <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
           <Button
-            type="default"
+            variant="default"
             className="px-1.5"
             icon={copied ? <Check /> : <Copy />}
             onClick={() => handleCopy(content)}
diff --git a/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx b/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx
index 8129791be01..5c3b74add75 100644
--- a/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx
@@ -210,7 +210,7 @@ export const WithStatements = ({
               side="top"
             >
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
                 icon={<RefreshCw />}
                 onClick={handleRefresh}
@@ -223,7 +223,7 @@ export const WithStatements = ({
               side="top"
             >
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
                 icon={<RotateCcw />}
                 onClick={() => setShowResetgPgStatStatements(true)}
@@ -258,7 +258,7 @@ export const WithStatements = ({
       >
         <Button
           className="absolute top-1.5 right-3 px-1.5"
-          type="text"
+          variant="text"
           size="tiny"
           onClick={() => setShowBottomSection(false)}
         >
@@ -270,7 +270,7 @@ export const WithStatements = ({
             Consider resetting the analysis after optimizing any queries
           </p>
           <Button
-            type="default"
+            variant="default"
             className="mt-3! w-min"
             onClick={() => setShowResetgPgStatStatements(true)}
           >
diff --git a/apps/studio/components/interfaces/QueryPerformance/components/FilterInput.tsx b/apps/studio/components/interfaces/QueryPerformance/components/FilterInput.tsx
index bc53077d6e9..4ff48ec0ef4 100644
--- a/apps/studio/components/interfaces/QueryPerformance/components/FilterInput.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/components/FilterInput.tsx
@@ -29,7 +29,7 @@ export const FilterInput = ({ value, onChange, placeholder, className }: FilterI
           <Button
             key="clear"
             size="tiny"
-            type="text"
+            variant="text"
             icon={<X />}
             onClick={() => onChange('')}
             className="p-0 h-5 w-5"
diff --git a/apps/studio/components/interfaces/QueryPerformance/components/IndexAdvisorFilter.tsx b/apps/studio/components/interfaces/QueryPerformance/components/IndexAdvisorFilter.tsx
index b9d3823c4ea..8994f2308a0 100644
--- a/apps/studio/components/interfaces/QueryPerformance/components/IndexAdvisorFilter.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/components/IndexAdvisorFilter.tsx
@@ -9,7 +9,7 @@ interface IndexAdvisorFilterProps {
 export const IndexAdvisorFilter = ({ isActive, onToggle }: IndexAdvisorFilterProps) => {
   return (
     <Button
-      type={isActive ? 'default' : 'outline'}
+      variant={isActive ? 'default' : 'outline'}
       size="tiny"
       className={cn(isActive ? 'bg-surface-300' : 'border-dashed')}
       onClick={onToggle}
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx b/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx
index fb852f8d2ca..69403335734 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx
@@ -97,7 +97,7 @@ export const ChooseChannelPopover = ({
 
   const channelPopoverTrigger = (
     <PopoverTrigger asChild>
-      <Button className="rounded-r-none" type="default" size="tiny" iconRight={<ChevronDown />}>
+      <Button className="rounded-r-none" variant="default" size="tiny" iconRight={<ChevronDown />}>
         <p
           className="max-w-[120px] truncate"
           title={config.channelName.length > 0 ? config.channelName : ''}
@@ -145,7 +145,7 @@ export const ChooseChannelPopover = ({
                             </FormControl>
                             <InputGroupAddon align="inline-end">
                               <InputGroupButton
-                                type="primary"
+                                variant="primary"
                                 disabled={form.getValues().channel.length === 0}
                                 onClick={() => onSubmit()}
                               >
@@ -220,7 +220,7 @@ export const ChooseChannelPopover = ({
                 If you leave this channel, all of the messages populated on this page will disappear
               </p>
               <Button
-                type="default"
+                variant="default"
                 onClick={() => onChangeConfig({ ...config, channelName: '', enabled: false })}
               >
                 Leave channel
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/EmptyRealtime.tsx b/apps/studio/components/interfaces/Realtime/Inspector/EmptyRealtime.tsx
index 8139df5a4e6..0bb0f97f261 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/EmptyRealtime.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/EmptyRealtime.tsx
@@ -33,7 +33,7 @@ export const EmptyRealtime = ({ projectRef }: { projectRef: string }) => {
             Send your first realtime message from your database, application code or edge function
           </p>
           <Button
-            type="default"
+            variant="default"
             icon={<AiIconAnimation />}
             onClick={handleCreateTriggerWithAssistant}
           >
@@ -56,7 +56,7 @@ export const EmptyRealtime = ({ projectRef }: { projectRef: string }) => {
             <p className="text-foreground-light text-sm mb-4 flex-1">
               Send messages to a channel from your client application or database via triggers.
             </p>
-            <Button type="default" className="w-full">
+            <Button variant="default" className="w-full">
               <Link href={`/project/${projectRef}/database/triggers`}>Create a trigger</Link>
             </Button>
           </div>
@@ -75,7 +75,7 @@ export const EmptyRealtime = ({ projectRef }: { projectRef: string }) => {
             <p className="text-foreground-light text-sm mb-4 flex-1">
               Set up Row Level Security policies to control who can see messages within a channel
             </p>
-            <Button type="default">
+            <Button variant="default">
               <Link href={`/project/${projectRef}/realtime/policies`}>Write a policy</Link>
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx b/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx
index 9b58e2a9bd2..7379168c221 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx
@@ -65,7 +65,7 @@ export const Header = ({
   const listeningButton = (
     <Button
       size="tiny"
-      type={config.enabled ? 'warning' : 'primary'}
+      variant={config.enabled ? 'warning' : 'primary'}
       className="rounded-l-none border-l-0"
       disabled={!canToggleListening}
       icon={config.enabled ? <StopCircle size="16" /> : <PlayCircle size="16" />}
@@ -92,7 +92,7 @@ export const Header = ({
         ) : (
           <ButtonTooltip
             size="tiny"
-            type={config.enabled ? 'warning' : 'primary'}
+            variant={config.enabled ? 'warning' : 'primary'}
             className="rounded-l-none border-l-0"
             disabled
             icon={config.enabled ? <StopCircle size="16" /> : <PlayCircle size="16" />}
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx
index e8758d443bb..20c9ba5ef70 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx
@@ -38,7 +38,7 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => {
   const copyButton = (
     <CopyButton
       text={selectionText}
-      type="default"
+      variant="default"
       title="Copy log to clipboard"
       onClick={() => {
         track('realtime_inspector_copy_message_clicked')
@@ -100,7 +100,7 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => {
               )}
             </div>
             <Button
-              type="text"
+              variant="text"
               className="cursor-pointer transition hover:text-scale-1200 h-8 w-8 px-0 py-0 flex items-center justify-center"
               onClick={onClose}
             >
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx
index f3793ca0aa9..52116500fd5 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx
@@ -41,7 +41,7 @@ export const SelectionDetailedRow = ({
         <CopyButton
           text={value}
           className="group-hover:opacity-100 opacity-0 my-auto transition col-span-2  h-4 w-4 px-0 py-0"
-          type="text"
+          variant="text"
           title="Copy to clipboard"
         />
       )}
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
index 5a6ab9c754a..47e41b19c48 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
@@ -42,7 +42,7 @@ const NoResultAlert = ({
   )
 
   const broadcastButton = (
-    <Button type="default" onClick={showSendMessage}>
+    <Button variant="default" onClick={showSendMessage}>
       Broadcast a message
     </Button>
   )
@@ -90,7 +90,7 @@ const NoResultAlert = ({
                 </p>
               </div>
               <Link href={`/project/${ref}/realtime/inspector`} target="_blank" rel="noreferrer">
-                <Button type="default" iconRight={<ExternalLink />}>
+                <Button variant="default" iconRight={<ExternalLink />}>
                   Open inspector
                 </Button>
               </Link>
@@ -106,7 +106,7 @@ const NoResultAlert = ({
                 <p className="text-foreground-lighter text-xs">Tables must have realtime enabled</p>
               </div>
               <Link href={`/project/${ref}/database/publications`} target="_blank" rel="noreferrer">
-                <Button type="default" iconRight={<ExternalLink />}>
+                <Button variant="default" iconRight={<ExternalLink />}>
                   Publications settings
                 </Button>
               </Link>
@@ -180,7 +180,7 @@ const MessagesTable = ({
                 </div>
                 <ShortcutTooltip shortcutId={SHORTCUT_IDS.INSPECTOR_BROADCAST} side="bottom">
                   <Button
-                    type="default"
+                    variant="default"
                     onClick={showSendMessage}
                     icon={<Megaphone strokeWidth={1.5} />}
                   >
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
index 8d8b07df62e..9d78b51d1c4 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
@@ -80,7 +80,7 @@ const TableSelector = ({
         <PopoverTrigger asChild>
           <Button
             size={size}
-            type="outline"
+            variant="outline"
             disabled={isLoading}
             className={`w-full [&>span]:w-full ${size === 'small' ? 'py-1.5' : ''}`}
             icon={isLoading ? <Loader className="animate-spin" size={12} /> : null}
@@ -117,7 +117,7 @@ const TableSelector = ({
                   <AlertDescription className="text-xs mb-2">
                     Error: {(error as any)?.message}
                   </AlertDescription>
-                  <Button type="default" size="tiny" onClick={() => refetch()}>
+                  <Button variant="default" size="tiny" onClick={() => refetch()}>
                     Reload tables
                   </Button>
                 </Alert>
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx
index a6f8a94565d..6692d6e0267 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx
@@ -89,7 +89,7 @@ export const RealtimeFilterPopover = ({
     <PopoverTrigger asChild>
       <Button
         icon={<PlusCircle size="16" />}
-        type={isFiltered ? 'primary' : 'dashed'}
+        variant={isFiltered ? 'primary' : 'dashed'}
         className={cn('rounded-full px-1 text-xs h-[26px]')}
         size="small"
       >
@@ -252,7 +252,7 @@ export const RealtimeFilterPopover = ({
             </>
           )}
           <div className="px-4 py-2 gap-2 flex justify-end">
-            <Button type="default" onClick={() => setOpen(false)}>
+            <Button variant="default" onClick={() => setOpen(false)}>
               Cancel
             </Button>
             <Button onClick={() => setApplyConfigOpen(true)}>Apply</Button>
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/SendMessageModal.tsx b/apps/studio/components/interfaces/Realtime/Inspector/SendMessageModal.tsx
index 41c0adcd491..7f00e199f5b 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/SendMessageModal.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/SendMessageModal.tsx
@@ -76,7 +76,7 @@ export const SendMessageModal = ({
           </div>
         </DialogSection>
         <DialogFooter>
-          <Button onClick={onSelectCancel} type="default">
+          <Button onClick={onSelectCancel} variant="default">
             Cancel
           </Button>
           <Button
@@ -88,7 +88,7 @@ export const SendMessageModal = ({
                 onSelectConfirm({ ...values, payload })
               }
             }}
-            type="primary"
+            variant="primary"
           >
             Confirm
           </Button>
diff --git a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
index 5781d3f5a24..7715d1fc869 100644
--- a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
+++ b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
@@ -288,7 +288,7 @@ export const RealtimeSettings = () => {
                                       table. No messages will be received by users.
                                     </p>
 
-                                    <Button asChild type="default" className="mt-2">
+                                    <Button asChild variant="default" className="mt-2">
                                       <Link href={`/project/${projectRef}/realtime/policies`}>
                                         Create policy
                                       </Link>
@@ -552,13 +552,13 @@ export const RealtimeSettings = () => {
                 </div>
                 <div className="flex items-center gap-x-2">
                   {form.formState.isDirty && (
-                    <Button type="default" onClick={() => form.reset(data as any)}>
+                    <Button variant="default" onClick={() => form.reset(data as any)}>
                       Cancel
                     </Button>
                   )}
                   <Button
-                    type="primary"
-                    htmlType="submit"
+                    variant="primary"
+                    type="submit"
                     form={formId}
                     disabled={!canUpdateConfig || isUpdatingConfig || !form.formState.isDirty}
                     loading={isUpdatingConfig}
diff --git a/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx b/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx
index 3b622765a32..796c5b8500c 100644
--- a/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx
+++ b/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx
@@ -148,7 +148,7 @@ export const RedeemCreditsScreen = () => {
           <div className="flex flex-col gap-2">
             <Button
               block
-              type="primary"
+              variant="primary"
               disabled={!selectedOrgSlug || organizationOptions.length === 0}
               onClick={openRedemption}
             >
diff --git a/apps/studio/components/interfaces/Reports/CreateReportModal.tsx b/apps/studio/components/interfaces/Reports/CreateReportModal.tsx
index 1e0e0b39170..54adb6f92fb 100644
--- a/apps/studio/components/interfaces/Reports/CreateReportModal.tsx
+++ b/apps/studio/components/interfaces/Reports/CreateReportModal.tsx
@@ -154,10 +154,10 @@ export const CreateReportModal = ({ visible, onCancel, afterSubmit }: CreateRepo
               />
             </DialogSection>
             <DialogFooter>
-              <Button htmlType="reset" type="default" onClick={handleCancel} disabled={isCreating}>
+              <Button type="reset" variant="default" onClick={handleCancel} disabled={isCreating}>
                 Cancel
               </Button>
-              <Button htmlType="submit" loading={isCreating} disabled={isCreating || !isDirty}>
+              <Button type="submit" loading={isCreating} disabled={isCreating || !isDirty}>
                 Create report
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
index 63f1888a827..6dbc5385b98 100644
--- a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
@@ -224,7 +224,7 @@ export const ChartBlock = ({
       actions={
         <>
           <ButtonTooltip
-            type="text"
+            variant="text"
             size="tiny"
             disabled={loading}
             className="w-7 h-7"
@@ -243,7 +243,7 @@ export const ChartBlock = ({
             }}
           />
           <ButtonTooltip
-            type={logScale ? 'default' : 'text'}
+            variant={logScale ? 'default' : 'text'}
             size="tiny"
             disabled={loading}
             className="h-7 px-1.5 font-mono text-[10px]"
diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx
index 87a4d464298..fc75bd1b27d 100644
--- a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx
@@ -167,7 +167,7 @@ export const ReportBlock = ({
           isWriteQuery={isWriteQuery}
           actions={
             <ButtonTooltip
-              type="text"
+              variant="text"
               icon={<X />}
               className="w-7 h-7"
               onClick={() => onRemoveChart({ metric: { key: item.attribute } })}
@@ -187,7 +187,7 @@ export const ReportBlock = ({
           actions={
             !disableUpdate ? (
               <ButtonTooltip
-                type="text"
+                variant="text"
                 icon={<X />}
                 className="h-7 w-7"
                 onClick={() => onRemoveChart({ metric: { key: item.attribute } })}
@@ -203,7 +203,7 @@ export const ReportBlock = ({
           actions={
             !disableUpdate ? (
               <ButtonTooltip
-                type="text"
+                variant="text"
                 icon={<X />}
                 className="w-7 h-7"
                 onClick={() => onRemoveChart({ metric: { key: item.attribute } })}
@@ -226,7 +226,7 @@ export const ReportBlock = ({
           actions={
             !disableUpdate ? (
               <ButtonTooltip
-                type="text"
+                variant="text"
                 icon={<X />}
                 className="w-7 h-7"
                 onClick={() => onRemoveChart({ metric: { key: item.attribute } })}
diff --git a/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx b/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx
index a7aea4479c6..4c3aaba51c5 100644
--- a/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx
@@ -236,7 +236,7 @@ const ReportFilterBar = ({
             side="bottom"
           >
             <Button
-              type="default"
+              variant="default"
               disabled={isLoading}
               icon={<RefreshCw className={isLoading ? 'animate-spin' : ''} />}
               className="w-7"
@@ -263,7 +263,7 @@ const ReportFilterBar = ({
             >
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="default"
+                  variant="default"
                   className="inline-flex flex-row gap-2"
                   iconRight={<ChevronDown size={14} />}
                 >
@@ -325,7 +325,7 @@ const ReportFilterBar = ({
             <span className="text-foreground-lighter">{filter.compare}</span>
             <span className="">{filter.value}</span>
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               className="p-0! space-x-0!"
               onClick={() => onRemoveFilters([filter])}
@@ -343,7 +343,7 @@ const ReportFilterBar = ({
           >
             <PopoverTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
                 icon={<Plus className={`text-foreground-light `} />}
               >
@@ -433,7 +433,7 @@ const ReportFilterBar = ({
 
             <div className="flex items-center justify-end gap-2 border-t border-default p-2">
               <Button
-                type="primary"
+                variant="primary"
                 size="tiny"
                 onClick={() => {
                   onAddFilter(addFilterValues)
diff --git a/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx b/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
index da045344504..cf658389bac 100644
--- a/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
@@ -197,7 +197,7 @@ const ReportFilterRow = ({
         <DropdownControl align="start" options={propertyOptions} onSelect={handlePropertyChange}>
           <Button
             asChild
-            type="outline"
+            variant="outline"
             icon={
               <div className="text-foreground-lighter">
                 <ChevronDown strokeWidth={1.5} />
@@ -212,7 +212,7 @@ const ReportFilterRow = ({
         <DropdownControl align="start" options={operatorOptions} onSelect={handleOperatorChange}>
           <Button
             asChild
-            type="outline"
+            variant="outline"
             icon={
               <div className="text-foreground-lighter">
                 <ChevronDown strokeWidth={1.5} />
@@ -248,7 +248,7 @@ const ReportFilterRow = ({
           />
         )}
         <Button
-          type="text"
+          variant="text"
           size="tiny"
           className="px-1"
           icon={<X strokeWidth={1.5} />}
@@ -334,7 +334,7 @@ export const ReportFilterPopover = ({
     <Popover open={open} onOpenChange={setOpen} modal={false}>
       <PopoverTrigger asChild>
         <Button
-          type={filters.length > 0 ? 'link' : 'text'}
+          variant={filters.length > 0 ? 'link' : 'text'}
           icon={<FilterIcon />}
           disabled={disabled}
         >
@@ -367,16 +367,16 @@ export const ReportFilterPopover = ({
           <PopoverSeparator />
           <div className="px-3 flex flex-row justify-between">
             <div className="flex gap-2">
-              <Button icon={<Plus />} type="text" onClick={onAddFilter}>
+              <Button icon={<Plus />} variant="text" onClick={onAddFilter}>
                 Add filter
               </Button>
               {filters.length > 0 && (
-                <Button type="text" onClick={onResetFilters}>
+                <Button variant="text" onClick={onResetFilters}>
                   Clear all
                 </Button>
               )}
             </div>
-            <Button disabled={!hasChanges} type="default" onClick={onApplyFilters}>
+            <Button disabled={!hasChanges} variant="default" onClick={onApplyFilters}>
               Apply filters
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/Reports/ReportWidget.tsx b/apps/studio/components/interfaces/Reports/ReportWidget.tsx
index 4d8f6177cc7..ace762e6825 100644
--- a/apps/studio/components/interfaces/Reports/ReportWidget.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportWidget.tsx
@@ -60,7 +60,7 @@ const ReportWidget = (props: ReportWidgetProps) => {
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  type="default"
+                  variant="default"
                   icon={<ExternalLink />}
                   className="px-1"
                   onClick={() => {
diff --git a/apps/studio/components/interfaces/Reports/Reports.tsx b/apps/studio/components/interfaces/Reports/Reports.tsx
index 5f360f319ac..9ee6bf22a91 100644
--- a/apps/studio/components/interfaces/Reports/Reports.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.tsx
@@ -377,14 +377,14 @@ const Reports = () => {
           {hasEdits && (
             <div className="flex items-center gap-x-2">
               <Button
-                type="default"
+                variant="default"
                 disabled={isSaving}
                 onClick={() => setConfig(currentReportContent)}
               >
                 Cancel
               </Button>
               <Button
-                type="primary"
+                variant="primary"
                 icon={<Save />}
                 loading={isSaving}
                 onClick={() => onSaveReport()}
@@ -397,7 +397,7 @@ const Reports = () => {
         <div className={cn('mb-4 flex items-center gap-x-3 justify-between')}>
           <div className="flex items-center gap-x-2">
             <ButtonTooltip
-              type="default"
+              variant="default"
               icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
               className="w-7"
               disabled={isRefreshing}
@@ -426,7 +426,7 @@ const Reports = () => {
             {canUpdateReport ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="default" icon={<Plus />}>
+                  <Button variant="default" icon={<Plus />}>
                     <span>Add block</span>
                   </Button>
                 </DropdownMenuTrigger>
@@ -437,7 +437,7 @@ const Reports = () => {
             ) : (
               <ButtonTooltip
                 disabled
-                type="default"
+                variant="default"
                 icon={<Plus />}
                 tooltip={{
                   content: {
@@ -467,7 +467,7 @@ const Reports = () => {
             {canUpdateReport ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="default" iconRight={<Plus size={14} />}>
+                  <Button variant="default" iconRight={<Plus size={14} />}>
                     Add your first chart
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Reports/UpdateModal.tsx b/apps/studio/components/interfaces/Reports/UpdateModal.tsx
index cfd1f5d949b..2c1db9e9944 100644
--- a/apps/studio/components/interfaces/Reports/UpdateModal.tsx
+++ b/apps/studio/components/interfaces/Reports/UpdateModal.tsx
@@ -131,10 +131,10 @@ export const UpdateCustomReportModal = ({
               />
             </DialogSection>
             <DialogFooter>
-              <Button htmlType="reset" type="default" onClick={handleCancel} disabled={isUpdating}>
+              <Button type="reset" variant="default" onClick={handleCancel} disabled={isUpdating}>
                 Cancel
               </Button>
-              <Button htmlType="submit" loading={isUpdating} disabled={isUpdating || !isDirty}>
+              <Button type="submit" loading={isUpdating} disabled={isUpdating || !isDirty}>
                 Save custom report
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
index f5fdaf149e4..c794a1d0116 100644
--- a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
+++ b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
@@ -225,7 +225,7 @@ export const TopApiRoutesRenderer = (
       />
       <div className="flex flex-row justify-end w-full gap-2 p-1">
         <Button
-          type="text"
+          variant="text"
           onClick={() => setShowMore(!showMore)}
           className={[
             'transition',
@@ -350,7 +350,7 @@ const RouteTdContent = (datum: RouteTdContentProps) => (
   <Collapsible>
     <CollapsibleTrigger asChild>
       <div className="flex gap-2 items-center">
-        <Button asChild type="text" className=" py-0! p-1!" title="Show more route details">
+        <Button asChild variant="text" className=" py-0! p-1!" title="Show more route details">
           <span>
             <ChevronRight
               size={14}
diff --git a/apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx b/apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx
index 026b4f90468..cc742720d56 100644
--- a/apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx
+++ b/apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx
@@ -48,7 +48,7 @@ export const ReportChartUpsell = ({ report, orgSlug }: ReportsChartUpsellProps)
         </p>
         <Button
           asChild
-          type="primary"
+          variant="primary"
           onMouseEnter={() => setIsHoveringUpgrade(true)}
           onMouseLeave={() => setIsHoveringUpgrade(false)}
           className="mt-4"
diff --git a/apps/studio/components/interfaces/Reports/v2/ReportSectionHeader.tsx b/apps/studio/components/interfaces/Reports/v2/ReportSectionHeader.tsx
index 9c298e292d9..35a01d4f9c4 100644
--- a/apps/studio/components/interfaces/Reports/v2/ReportSectionHeader.tsx
+++ b/apps/studio/components/interfaces/Reports/v2/ReportSectionHeader.tsx
@@ -32,7 +32,7 @@ export const ReportSectionHeader = ({ id, title, description }: ReportSectionHea
       >
         <h3 className="text-foreground text-lg font-medium">{title}</h3>
         <ButtonTooltip
-          type="text"
+          variant="text"
           icon={copiedLink === id ? <Check size={14} /> : <Link size={14} />}
           className="w-7 h-7 opacity-0 group-hover:opacity-100 transition-opacity"
           tooltip={{
diff --git a/apps/studio/components/interfaces/Reports/v2/ReportsNumericFilter.tsx b/apps/studio/components/interfaces/Reports/v2/ReportsNumericFilter.tsx
index 985a5d1d072..f102e68f338 100644
--- a/apps/studio/components/interfaces/Reports/v2/ReportsNumericFilter.tsx
+++ b/apps/studio/components/interfaces/Reports/v2/ReportsNumericFilter.tsx
@@ -110,7 +110,7 @@ export const ReportsNumericFilter = ({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          type={isActive ? 'default' : 'outline'}
+          variant={isActive ? 'default' : 'outline'}
           className={cn(
             'min-w-20 border-dashed relative group justify-between',
             { 'border-solid': isActive },
@@ -181,15 +181,15 @@ export const ReportsNumericFilter = ({
         </form>
 
         <div className="flex items-center justify-end gap-2 border-t border-default p-2">
-          <Button size="tiny" type="outline" onClick={handleClearAll}>
+          <Button size="tiny" variant="outline" onClick={handleClearAll}>
             Clear
           </Button>
           <Button
             loading={isLoading}
             size="tiny"
-            type="primary"
+            variant="primary"
             onClick={handleApply}
-            htmlType="button"
+            type="button"
           >
             Apply
           </Button>
diff --git a/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx b/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
index fe867b3c256..3e8737fa5f6 100644
--- a/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
+++ b/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
@@ -66,7 +66,7 @@ export const ReportsSelectFilter = ({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          type={isActive ? 'default' : 'outline'}
+          variant={isActive ? 'default' : 'outline'}
           className={cn(
             'min-w-20 border-dashed relative group justify-between',
             { 'border-solid': isActive },
@@ -120,15 +120,15 @@ export const ReportsSelectFilter = ({
         </Command>
 
         <div className="flex items-center justify-end gap-2 border-t border-default p-2">
-          <Button size="tiny" type="outline" onClick={handleClearAll} disabled={isLoading}>
+          <Button size="tiny" variant="outline" onClick={handleClearAll} disabled={isLoading}>
             Clear
           </Button>
           <Button
             loading={isLoading}
             size="tiny"
-            type="primary"
+            variant="primary"
             onClick={handleApply}
-            htmlType="button"
+            type="button"
           >
             Apply
           </Button>
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx
index 286e52cd3df..27d10d83561 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx
@@ -33,7 +33,7 @@ export const RoleImpersonationPopover = ({
       <PopoverTrigger asChild>
         <Button
           size="tiny"
-          type="default"
+          variant="default"
           className={cn(
             'h-[26px] pr-3 gap-0',
             variant === 'connected-on-right' && 'rounded-r-none border-r-0',
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
index 4d35621a178..496684d689d 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
@@ -253,7 +253,11 @@ export const UserImpersonationSelector = () => {
                   </InputGroupAddon>
                   <InputGroupAddon align="inline-end">
                     {searchText && (
-                      <InputGroupButton size="tiny" type="text" onClick={() => setSearchText('')}>
+                      <InputGroupButton
+                        size="tiny"
+                        variant="text"
+                        onClick={() => setSearchText('')}
+                      >
                         <span className="sr-only">Clear search</span>
                         <X size={12} />
                       </InputGroupButton>
@@ -314,7 +318,7 @@ export const UserImpersonationSelector = () => {
                             <CollapsibleContent className="mt-1 flex flex-col gap-y-4">
                               <Button
                                 size="tiny"
-                                type="text"
+                                variant="text"
                                 className="absolute right-0 top-0 py-2 hover:bg-muted flex items-center text"
                                 onClick={clearSearchHistory}
                               >
@@ -375,7 +379,7 @@ export const UserImpersonationSelector = () => {
                 </FormItemLayout>
                 <div className="flex items-center justify-end">
                   <Button
-                    type="default"
+                    variant="default"
                     disabled={!externalUserId}
                     onClick={impersonateExternalUser}
                   >
@@ -471,7 +475,7 @@ const BaseImpersonatingRow = ({
         </span>
       </div>
 
-      <Button type="default" onClick={onClick} disabled={isLoading} loading={isLoading}>
+      <Button variant="default" onClick={onClick} disabled={isLoading} loading={isLoading}>
         {isImpersonating ? 'Stop' : 'Impersonate'}
       </Button>
     </div>
@@ -567,7 +571,12 @@ const UserRow = ({ user, onClick, isImpersonating = false, isLoading = false }:
         </span>
       </div>
 
-      <Button type="default" onClick={() => onClick(user)} disabled={isLoading} loading={isLoading}>
+      <Button
+        variant="default"
+        onClick={() => onClick(user)}
+        disabled={isLoading}
+        loading={isLoading}
+      >
         {isImpersonating ? 'Stop' : 'Impersonate'}
       </Button>
     </div>
diff --git a/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx b/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx
index cc8e3b2e189..ab34c1826af 100644
--- a/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx
@@ -68,7 +68,7 @@ export const AskAIWidget = ({
       {isDiffVisible ? (
         <div className="flex justify-start p-0 border-t">
           <Button
-            type="text"
+            variant="text"
             onClick={onAccept}
             className="text-xs h-auto py-1 rounded-none px-3 border-r-border"
             disabled={isLoading}
@@ -77,7 +77,7 @@ export const AskAIWidget = ({
           </Button>
           <Button
             onClick={onReject}
-            type="text"
+            variant="text"
             className="text-xs h-auto py-1 rounded-none px-3 border-r-border"
             disabled={isLoading}
           >
@@ -87,7 +87,7 @@ export const AskAIWidget = ({
       ) : (
         <div className="flex justify-start p-0 border-t">
           <Button
-            type="text"
+            variant="text"
             onClick={handleSubmit}
             loading={isLoading}
             className="text-xs h-auto py-1 rounded-none px-3 border-r-border"
@@ -98,7 +98,7 @@ export const AskAIWidget = ({
           </Button>
           <Button
             onClick={onCancel}
-            type="text"
+            variant="text"
             className="text-xs h-auto py-1 rounded-none px-3 border-r-border"
             disabled={isLoading}
           >
diff --git a/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx b/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
index 30efd77a085..b6f809dd178 100644
--- a/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
@@ -153,14 +153,14 @@ export const DownloadSnippetModal = ({ id, ...props }: DownloadSnippetModalProps
         <DialogSection>
           <div className="flex items-center justify-start gap-x-2">
             {selectedSnippet.docLink && (
-              <Button asChild type="default" icon={<ExternalLink />}>
+              <Button asChild variant="default" icon={<ExternalLink />}>
                 <Link href={selectedSnippet.docLink.href} target="_blank" rel="noreferrer">
                   {selectedSnippet.docLink.label}
                 </Link>
               </Button>
             )}
 
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <Link href={CLI_DOCS_URL} target="_blank" rel="noreferrer">
                 About CLI
               </Link>
diff --git a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
index 981f001b6b7..7fd3ea7ae7e 100644
--- a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
@@ -235,7 +235,7 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
                     <Button
                       block
                       size="small"
-                      type="default"
+                      variant="default"
                       className="pr-2 justify-between"
                       iconRight={
                         <Code
@@ -353,15 +353,15 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
 
             <DialogFooter>
               <Button
-                type="default"
+                variant="default"
                 disabled={isMovingSnippet || isCreatingFolder}
                 onClick={() => onClose()}
               >
                 Cancel
               </Button>
               <Button
-                type="primary"
-                htmlType="submit"
+                variant="primary"
+                type="submit"
                 disabled={isMovingToSameFolder}
                 loading={isMovingSnippet || isCreatingFolder}
               >
diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
index 2fea7898291..0d9f17cd499 100644
--- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
@@ -88,7 +88,7 @@ export const OngoingQueriesPanel = () => {
               Running queries on{' '}
               {database?.identifier === project?.ref ? 'primary database' : 'read replica'}
               <Button
-                type="default"
+                variant="default"
                 className="px-1.5"
                 loading={isLoadingOngoingQueries || isFetchingOngoingQueries}
                 icon={<RefreshCw />}
@@ -122,7 +122,7 @@ export const OngoingQueriesPanel = () => {
                       : 'database'}
                 </span>
                 <Button
-                  type="default"
+                  variant="default"
                   loading={isLoadingOngoingQueries || isFetchingOngoingQueries}
                   icon={<RefreshCw />}
                   onClick={() => refetch()}
@@ -156,7 +156,7 @@ export const OngoingQueriesPanel = () => {
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
-                      type="warning"
+                      variant="warning"
                       className="px-1.5"
                       icon={<StopCircle />}
                       onClick={() => setSelectedId(query.pid)}
diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
index 550313b32b4..fa5da761acf 100644
--- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
@@ -192,7 +192,7 @@ export const RenameQueryModal = ({
               />
               <div className="flex w-full justify-end mt-2">
                 <ButtonTooltip
-                  type="default"
+                  variant="default"
                   onClick={() => generateTitle()}
                   size="tiny"
                   disabled={
@@ -241,15 +241,10 @@ export const RenameQueryModal = ({
               />
             </DialogSection>
             <DialogFooter>
-              <Button
-                htmlType="reset"
-                type="default"
-                onClick={handleCancel}
-                disabled={isSubmitting}
-              >
+              <Button type="reset" variant="default" onClick={handleCancel} disabled={isSubmitting}>
                 Cancel
               </Button>
-              <Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting || !isDirty}>
+              <Button type="submit" loading={isSubmitting} disabled={isSubmitting || !isDirty}>
                 Rename query
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
index 2209a4a7549..5a16a2e14cb 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
@@ -1061,7 +1061,7 @@ export const SQLEditor = () => {
                 {results.autoLimit !== undefined && (
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button type="default" iconRight={<ChevronUp size={14} />}>
+                      <Button variant="default" iconRight={<ChevronUp size={14} />}>
                         Limit results to:{' '}
                         {ROWS_PER_PAGE_OPTIONS.find((opt) => opt.value === snapV2.limit)?.label}
                       </Button>
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx
index 9e99e9d7ced..a54a698c6e2 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx
@@ -182,7 +182,7 @@ export const ChartConfig = ({
           <h2 className="text-sm text-foreground-lighter">Chart options</h2>
           {config.xKey && config.yKey && (
             <ButtonTooltip
-              type="text"
+              variant="text"
               size="tiny"
               onClick={onFlip}
               disabled={!canFlip}
@@ -220,7 +220,7 @@ export const ChartConfig = ({
             <p className="text-xs text-foreground-light mt-1!">
               SQL snippets can now be added and saved to your custom reports. Try it out now!
             </p>
-            <Button asChild size="tiny" type="default" className="mt-1">
+            <Button asChild size="tiny" variant="default" className="mt-1">
               <Link href={`/project/${ref}/reports`}>Head to Reports</Link>
             </Button>
           </Admonition>
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultCell.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultCell.tsx
index 7148af3b016..6e89f2884d6 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultCell.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultCell.tsx
@@ -29,7 +29,7 @@ export const ResultCell = ({ column, value, onContextMenu, onExpand }: ResultCel
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
-              type="default"
+              variant="default"
               size="tiny"
               className="absolute right-1 top-1/2 -translate-y-1/2 px-1 opacity-0 group-hover/cell:opacity-100 focus-visible:opacity-100"
               icon={<Expand size={10} />}
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/RunButton.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/RunButton.tsx
index d85406083a5..861481f457d 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/RunButton.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/RunButton.tsx
@@ -20,7 +20,7 @@ export const SqlRunButton = ({
     <Button
       onClick={onClick}
       disabled={isDisabled}
-      type="primary"
+      variant="primary"
       size="tiny"
       data-testid="sql-run-button"
       iconRight={
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
index 5380fa72a11..26f92e1b712 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
@@ -42,7 +42,7 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
       <div className="mx-2 flex items-center gap-2">
         {isSnippetOwner && savingState === 'UPDATING_FAILED' && (
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             icon={<RefreshCcw className="text-gray-1100" strokeWidth={2} />}
             onClick={retry}
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
index 7d1b484838f..0f9fceee440 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
@@ -87,7 +87,7 @@ export const UtilityActions = ({
         <DropdownMenuTrigger asChild>
           <Button
             data-testid="sql-editor-utility-actions"
-            type="default"
+            variant="default"
             className={cn('px-1', isAiOpen ? 'block 2xl:hidden' : 'hidden')}
             icon={<MoreVertical className="text-foreground-light" />}
           />
@@ -135,7 +135,7 @@ export const UtilityActions = ({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               className="px-1"
               icon={<Keyboard className="text-foreground-light" />}
             />
@@ -153,7 +153,7 @@ export const UtilityActions = ({
             <TooltipTrigger asChild>
               {isFavorite ? (
                 <Button
-                  type="text"
+                  variant="text"
                   size="tiny"
                   onClick={removeFavorite}
                   className="px-1"
@@ -161,7 +161,7 @@ export const UtilityActions = ({
                 />
               ) : (
                 <Button
-                  type="text"
+                  variant="text"
                   size="tiny"
                   onClick={addFavorite}
                   className="px-1"
@@ -178,7 +178,7 @@ export const UtilityActions = ({
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
-              type="text"
+              variant="text"
               onClick={prettifyQuery}
               className="px-1"
               icon={<AlignLeft strokeWidth={2} className="text-foreground-light" />}
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
index 2f164cc9142..662dec0fc50 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
@@ -145,7 +145,7 @@ export const UtilityPanel = ({
 
           {result?.rows && (
             <DownloadResultsButton
-              type="text"
+              variant="text"
               results={result.rows as any[]}
               fileName={`Supabase Snippet ${snippet.name}`}
               onDownloadAsCSV={() => track('sql_editor_result_download_csv_clicked')}
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx
index e1713eaa6b8..c6142c70c09 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx
@@ -57,7 +57,7 @@ export function UtilityTabExplain({ id, isExecuting }: UtilityTabExplainProps) {
             {formattedError.length > 0 && (
               <Tooltip>
                 <TooltipTrigger>
-                  <CopyButton iconOnly type="default" text={formattedError.join('\n')} />
+                  <CopyButton iconOnly variant="default" text={formattedError.join('\n')} />
                 </TooltipTrigger>
                 <TooltipContent side="bottom" align="center">
                   <span>Copy error</span>
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
index 644b1e3d125..dbc3f603bf6 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
@@ -136,7 +136,7 @@ export const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsPro
               {readReplicaError && (
                 <Button
                   className="py-2"
-                  type="default"
+                  variant="default"
                   onClick={() => {
                     state.setSelectedDatabaseId(ref)
                     snapV2.resetResults(id)
@@ -148,7 +148,7 @@ export const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsPro
               {errorLines.length > 0 && (
                 <Tooltip>
                   <TooltipTrigger>
-                    <CopyButton iconOnly type="default" text={errorLines.join('\n')} />
+                    <CopyButton iconOnly variant="default" text={errorLines.join('\n')} />
                   </TooltipTrigger>
                   <TooltipContent side="bottom" align="center">
                     <span>Copy error</span>
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx
index 3e8041fa35f..c49fb50c343 100644
--- a/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx
+++ b/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx
@@ -101,7 +101,7 @@ export const ExposedFunctionSelector = ({
         <Button
           size="small"
           disabled={disabled}
-          type="default"
+          variant="default"
           className="w-full [&>span]:w-full pr-1! space-x-1"
           iconRight={<ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />}
         >
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
index 2c9751d9e3c..2810405de6b 100644
--- a/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
+++ b/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
@@ -76,7 +76,7 @@ export const ExposedSchemaSelector = ({
         <Button
           size="small"
           disabled={disabled}
-          type="default"
+          variant="default"
           className="w-full [&>span]:w-full pr-1! space-x-1"
           iconRight={<ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />}
         >
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
index 21695b9105a..83d326b7593 100644
--- a/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
+++ b/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
@@ -95,7 +95,7 @@ export const ExposedTableSelector = ({
         <Button
           size="small"
           disabled={disabled}
-          type="default"
+          variant="default"
           className="w-full [&>span]:w-full pr-1! space-x-1"
           iconRight={<ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />}
         >
diff --git a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
index 3fad1ad0881..3ed81f7a65b 100644
--- a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
+++ b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
@@ -174,7 +174,7 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
             </div>
 
             <ButtonTooltip
-              type="primary"
+              variant="primary"
               className="w-min mx-5"
               onClick={onSelectCreateAndExposeAPISchema}
               disabled={hasAPISchema && isAPISchemaExposed}
@@ -247,7 +247,7 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
                 and Extra search path in your API configuration.
               </p>
               <ButtonTooltip
-                type="primary"
+                variant="primary"
                 className="w-min"
                 disabled={!isPublicSchemaExposed}
                 loading={isUpdatingConfig}
diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index 4954e2d0d7f..69fdc9f6881 100644
--- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -595,7 +595,7 @@ export const PostgrestConfig = () => {
                 description="Expose a custom schema instead of the public schema"
               >
                 <div className="flex gap-2 items-center justify-end">
-                  <Button type="default" icon={<Lock />} onClick={() => setShowModal(true)}>
+                  <Button variant="default" icon={<Lock />} onClick={() => setShowModal(true)}>
                     Harden Data API
                   </Button>
                 </div>
diff --git a/apps/studio/components/interfaces/Settings/API/UnsafeEntitiesConfirmModal.tsx b/apps/studio/components/interfaces/Settings/API/UnsafeEntitiesConfirmModal.tsx
index bfc59b067da..5a4edd6da23 100644
--- a/apps/studio/components/interfaces/Settings/API/UnsafeEntitiesConfirmModal.tsx
+++ b/apps/studio/components/interfaces/Settings/API/UnsafeEntitiesConfirmModal.tsx
@@ -158,7 +158,7 @@ const EntityList = ({ entities }: { entities: Array<ExposedEntity> }) => {
       </CollapsibleContent>
       <CollapsibleTrigger asChild>
         <Button
-          type="text"
+          variant="text"
           size="tiny"
           className="px-0 h-auto text-xs text-foreground-lighter hover:text-foreground"
         >
diff --git a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
index 400b4529bac..db2b8e2ef4d 100644
--- a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
@@ -150,7 +150,7 @@ export const Addons = () => {
           Contact support for further assistance.
         </AlertDescription>
         <div className="mt-4">
-          <Button type="default" asChild>
+          <Button variant="default" asChild>
             <SupportLink>Contact support</SupportLink>
           </Button>
         </div>
@@ -164,7 +164,7 @@ export const Addons = () => {
           <p className="text-sm leading-normal mb-2">
             Reach out to us via support if you're interested
           </p>
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <SupportLink
               queryParams={{
                 projectRef,
diff --git a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
index 5c8a41e69d5..78b63f7b416 100644
--- a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
@@ -252,7 +252,7 @@ const PITRSidePanel = () => {
                 support for further assistance.
               </AlertDescription>
               <div className="mt-4">
-                <Button type="default" asChild>
+                <Button variant="default" asChild>
                   <SupportLink>Contact support</SupportLink>
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
index 5d9325e2d9b..83bcb9f257d 100644
--- a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
@@ -109,7 +109,7 @@ export const BannedIPs = () => {
                     {ip === userIPAddress && <Badge>Your IP address</Badge>}
                   </div>
                   <ButtonTooltip
-                    type="default"
+                    variant="default"
                     disabled={!canUnbanNetworks}
                     onClick={() => openConfirmationModal(ip)}
                     tooltip={{
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
index 5a02349d7b0..36104ba7e43 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
@@ -172,7 +172,7 @@ export const ConnectionPooling = () => {
             title="Dedicated pooler uses IPv6 by default"
             description="Connections from IPv4-only networks require enabling the IPv4 add-on on your project instance."
             actions={
-              <Button type="default" asChild>
+              <Button variant="default" asChild>
                 <Link href={`/project/${projectRef}/settings/addons?panel=ipv4`}>
                   Enable IPv4 add-on
                 </Link>
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseReadOnlyAlert.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseReadOnlyAlert.tsx
index 0b963ceb8c0..4b8f4539270 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseReadOnlyAlert.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseReadOnlyAlert.tsx
@@ -59,10 +59,10 @@ export const DatabaseReadOnlyAlert = () => {
             </ul>
           </AlertDescription>
           <div className="mt-4 flex items-center space-x-2">
-            <Button type="default" onClick={() => setShowConfirmationModal(true)}>
+            <Button variant="default" onClick={() => setShowConfirmationModal(true)}>
               Disable read-only mode
             </Button>
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <a
                 href={`${DOCS_URL}/guides/platform/database-size#disabling-read-only-mode`}
                 target="_blank"
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPasswordDialog.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPasswordDialog.tsx
index 1bde44e8d9d..4fc9e366095 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPasswordDialog.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPasswordDialog.tsx
@@ -32,7 +32,7 @@ export type ResetDbPasswordDialogProps = {
   triggerClassName?: string
   triggerIcon?: ReactNode
   triggerLabel?: string
-  triggerType?: ComponentProps<typeof ButtonTooltip>['type']
+  triggerVariant?: ComponentProps<typeof ButtonTooltip>['variant']
 }
 
 export const ResetDbPasswordDialog = ({
@@ -41,7 +41,7 @@ export const ResetDbPasswordDialog = ({
   triggerClassName,
   triggerIcon,
   triggerLabel = 'Reset password',
-  triggerType = 'default',
+  triggerVariant = 'default',
 }: ResetDbPasswordDialogProps) => {
   const { ref } = useParams()
   const isProjectActive = useIsProjectActive()
@@ -131,7 +131,7 @@ export const ResetDbPasswordDialog = ({
     <Dialog open={showResetDbPass} onOpenChange={(open) => setShowResetDbPass(open)}>
       <DialogTrigger asChild>
         <ButtonTooltip
-          type={triggerType}
+          variant={triggerVariant}
           className={triggerClassName}
           icon={triggerIcon}
           disabled={!canResetDbPassword || !isProjectActive || disabled}
@@ -181,14 +181,14 @@ export const ResetDbPasswordDialog = ({
         </DialogSection>
         <DialogFooter>
           <Button
-            type="default"
+            variant="default"
             disabled={isUpdatingPassword}
             onClick={() => setShowResetDbPass(false)}
           >
             Cancel
           </Button>
           <Button
-            type="primary"
+            variant="primary"
             loading={isUpdatingPassword}
             disabled={isUpdatingPassword}
             onClick={() => confirmResetDbPass()}
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
index a620d7c1788..ee568cd6024 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
@@ -108,7 +108,7 @@ export const DiskSizeConfiguration = ({ disabled = false }: DiskSizeConfiguratio
                         </p>
                         {!isAwsNimbus && (
                           <ButtonTooltip
-                            type="default"
+                            variant="default"
                             className="w-min ml-auto"
                             disabled={!canUpdateDiskSizeConfig || disabled}
                             onClick={() => setShowIncreaseDiskSizeModal(true)}
@@ -141,7 +141,11 @@ export const DiskSizeConfiguration = ({ disabled = false }: DiskSizeConfiguratio
 
                           {reportsAll && (
                             <div className="col-span-2 mt-4">
-                              <Button asChild type="default" iconRight={<ExternalLink size={14} />}>
+                              <Button
+                                asChild
+                                variant="default"
+                                iconRight={<ExternalLink size={14} />}
+                              >
                                 <Link
                                   href={`/project/${projectRef}/reports/database#database-size-report`}
                                 >
@@ -197,7 +201,7 @@ Read more about [disk management](${DOCS_URL}/guides/platform/database-size#disk
                     disable your spend cap.
                   </p>
                 )}
-                <Button asChild type="default" className="mt-3">
+                <Button asChild variant="default" className="mt-3">
                   <Link
                     href={`/org/${organization?.slug}/billing?panel=${
                       hasAccessToDiskSizeConfig === false ? 'subscriptionPlan' : 'costControl'
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
index 4ae2e8c5a9d..ae637ced893 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
@@ -157,7 +157,7 @@ const DiskSizeConfigurationModal = ({
                     You cannot manually expand the disk size any more than {maxDiskSize}GB. If you
                     need more than this, contact us via support for help.
                   </p>
-                  <Button asChild type="default" className="mt-3">
+                  <Button asChild variant="default" className="mt-3">
                     <SupportLink
                       queryParams={{
                         projectRef,
@@ -186,7 +186,7 @@ const DiskSizeConfigurationModal = ({
                               'DD MMM YYYY, HH:mm (ZZ)'
                             )}. You can resize your database again in approximately ${formattedTimeTillNextAvailableResize}`}
                       </div>
-                      <Button asChild type="default" iconRight={<ExternalLink size={14} />}>
+                      <Button asChild variant="default" iconRight={<ExternalLink size={14} />}>
                         <Link href={`${DOCS_URL}/guides/platform/database-size#disk-management`}>
                           Read more about disk management
                         </Link>
@@ -220,13 +220,13 @@ const DiskSizeConfigurationModal = ({
                   </Form>
                 </DialogSection>
                 <DialogFooter>
-                  <Button type="default" onClick={() => hideModal(false)}>
+                  <Button variant="default" onClick={() => hideModal(false)}>
                     Cancel
                   </Button>
                   <Button
                     form={formId}
-                    htmlType="submit"
-                    type="primary"
+                    type="submit"
+                    variant="primary"
                     disabled={!isAbleToResizeDatabase || isUpdatingDiskSize || !isDirty || loading}
                     loading={isUpdatingDiskSize || loading}
                   >
@@ -256,7 +256,7 @@ const DiskSizeConfigurationModal = ({
                   disable your spend cap.
                 </p>
               )}
-              <Button asChild type="default" className="mt-3">
+              <Button asChild variant="default" className="mt-3">
                 <Link
                   href={`/org/${organization?.slug}/billing?panel=${
                     hasAccessToDiskModifications === false ? 'subscriptionPlan' : 'costControl'
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx
index 8831e0e4144..9aaafb4ebb7 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx
@@ -374,11 +374,11 @@ export const JitDbAccessConfiguration = () => {
               }
               actions={
                 unavailableReason === 'postgres_upgrade_required' && ref ? (
-                  <Button type="default" asChild>
+                  <Button variant="default" asChild>
                     <Link href={`/project/${ref}/settings/infrastructure`}>Upgrade Postgres</Link>
                   </Button>
                 ) : (
-                  <Button type="default" asChild>
+                  <Button variant="default" asChild>
                     <SupportLink
                       queryParams={{
                         category: SupportCategories.PROBLEM,
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
index 8b360cacef4..480a970261f 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
@@ -332,11 +332,11 @@ export function JitDbAccessRuleSheet({
           </Form>
 
           <SheetFooter className="mt-auto w-full border-t py-4">
-            <Button type="default" onClick={confirmOnClose} disabled={isSubmitting}>
+            <Button variant="default" onClick={confirmOnClose} disabled={isSubmitting}>
               Cancel
             </Button>
             <Button
-              type="primary"
+              variant="primary"
               onClick={form.handleSubmit(handleSaveRule)}
               loading={isSubmitting}
             >
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx
index 3e8ce9cc634..1daf07960e7 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx
@@ -83,7 +83,12 @@ export function JitDbAccessRulesTable({
           <Tooltip>
             <TooltipTrigger asChild>
               <span className="inline-flex">
-                <Button type="default" icon={<Plus />} onClick={onAddRule} disabled={addDisabled}>
+                <Button
+                  variant="default"
+                  icon={<Plus />}
+                  onClick={onAddRule}
+                  disabled={addDisabled}
+                >
                   Add rule
                 </Button>
               </span>
@@ -168,7 +173,7 @@ export function JitDbAccessRulesTable({
                           <Button
                             icon={<EllipsisVertical />}
                             aria-label="More actions"
-                            type="default"
+                            variant="default"
                             size="tiny"
                             className="w-7 hit-area-2"
                             disabled={!canUpdate || disableActions}
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
index 06a417f07ae..49b093f8fe6 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
@@ -264,10 +264,10 @@ const AddRestrictionModal = ({
             </DialogSection>
           )}
           <DialogFooter>
-            <Button type="default" disabled={isApplying} onClick={() => onClose()}>
+            <Button variant="default" disabled={isApplying} onClick={() => onClose()}>
               Cancel
             </Button>
-            <Button form={formId} htmlType="submit" loading={isApplying} disabled={isApplying}>
+            <Button form={formId} type="submit" loading={isApplying} disabled={isApplying}>
               Save restriction
             </Button>
           </DialogFooter>
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
index 6a35899b9ba..3e5b156d3bc 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
@@ -46,7 +46,7 @@ interface AccessButtonProps {
 const AllowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
   <Tooltip>
     <TooltipTrigger asChild>
-      <Button type="default" disabled={disabled} onClick={() => onClick(true)}>
+      <Button variant="default" disabled={disabled} onClick={() => onClick(true)}>
         Allow all access
       </Button>
     </TooltipTrigger>
@@ -61,7 +61,7 @@ const AllowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
 const DisallowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
   <ButtonTooltip
     disabled={disabled}
-    type="default"
+    variant="default"
     onClick={() => onClick(true)}
     tooltip={{
       content: {
@@ -124,7 +124,7 @@ export const NetworkRestrictions = () => {
             {!canUpdateNetworkRestrictions ? (
               <ButtonTooltip
                 disabled
-                type="primary"
+                variant="primary"
                 tooltip={{
                   content: {
                     side: 'bottom',
@@ -138,7 +138,7 @@ export const NetworkRestrictions = () => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    type="primary"
+                    variant="primary"
                     disabled={!canUpdateNetworkRestrictions}
                     iconRight={<ChevronDown size={14} />}
                   >
@@ -286,7 +286,7 @@ export const NetworkRestrictions = () => {
                               <p className="text-sm font-mono">{ip}</p>
                             </div>
                             <Button
-                              type="default"
+                              variant="default"
                               onClick={() => setSelectedRestrictionToRemove(ip)}
                             >
                               Remove
diff --git a/apps/studio/components/interfaces/Settings/Database/PoolingModesModal.tsx b/apps/studio/components/interfaces/Settings/Database/PoolingModesModal.tsx
index 62b17c21785..d9ef6ce37ac 100644
--- a/apps/studio/components/interfaces/Settings/Database/PoolingModesModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/PoolingModesModal.tsx
@@ -101,7 +101,7 @@ This mode is similar to connecting to your database directly. There is full supp
         )}
         <DialogFooter>
           <DialogClose onClick={() => snap.setShowPoolingModeHelper(false)}>
-            <Button type="default">Close</Button>
+            <Button variant="default">Close</Button>
           </DialogClose>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
index 1a78a50ab25..42ec83780b7 100644
--- a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
@@ -210,7 +210,7 @@ export const SSLConfiguration = () => {
                 {!hasSSLCertificate ? (
                   <ButtonTooltip
                     disabled
-                    type="default"
+                    variant="default"
                     icon={<Download />}
                     tooltip={{
                       content: {
@@ -222,7 +222,7 @@ export const SSLConfiguration = () => {
                     Download certificate
                   </ButtonTooltip>
                 ) : (
-                  <Button type="default" icon={<Download />}>
+                  <Button variant="default" icon={<Download />}>
                     <a href={sslCertificateUrl}>Download certificate</a>
                   </Button>
                 )}
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx
index 18a66b3eb45..78c2e33341e 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx
@@ -96,7 +96,7 @@ export const CustomDomainActivate = ({ projectRef, customDomain }: CustomDomainA
             <DocsButton href={`${DOCS_URL}/guides/platform/custom-domains`} />
             <div className="flex items-center space-x-2">
               <Button
-                type="default"
+                variant="default"
                 className="self-end"
                 onClick={onCancelCustomDomain}
                 loading={isDeleting}
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
index 4baa72b70d9..91a6bb48504 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
@@ -64,7 +64,7 @@ export const CustomDomainDelete = ({ projectRef, customDomain }: CustomDomainDel
         <div className="flex items-center justify-between">
           <DocsButton href={`${DOCS_URL}/guides/platform/custom-domains`} />
           <Button
-            type="danger"
+            variant="danger"
             icon={<Trash />}
             onClick={() => setIsDeleteConfirmModalVisible(true)}
           >
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
index c5ed57c5794..3a6498fa977 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
@@ -176,7 +176,7 @@ export const CustomDomainVerify = () => {
           <DocsButton href={`${DOCS_URL}/guides/platform/custom-domains`} />
           <div className="flex items-center space-x-2">
             <Button
-              type="default"
+              variant="default"
               onClick={onCancelCustomDomain}
               loading={isDeleting}
               className="self-end"
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
index 7b82908cc07..956cacd0f55 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
@@ -119,7 +119,7 @@ export const CustomDomainsConfigureHostname = () => {
                   <code className="text-code-inline">{endpoint}</code>
                   <CopyButton
                     iconOnly
-                    type="text"
+                    variant="text"
                     className="h-5 w-5 min-w-0 p-0 [&_svg]:h-3 [&_svg]:w-3"
                     text={endpoint}
                   />
@@ -146,7 +146,7 @@ export const CustomDomainsConfigureHostname = () => {
           <CardFooter className="justify-end space-x-2">
             {form.formState.isDirty && (
               <Button
-                type="default"
+                variant="default"
                 disabled={isSubmitting}
                 onClick={() => form.reset({ domain: '' })}
               >
@@ -154,8 +154,8 @@ export const CustomDomainsConfigureHostname = () => {
               </Button>
             )}
             <Button
-              type="primary"
-              htmlType="submit"
+              variant="primary"
+              type="submit"
               loading={isSubmitting}
               disabled={!form.formState.isDirty || isSubmitting || !canConfigureCustomDomain}
             >
diff --git a/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx b/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
index 7eb72fa9de3..d98545f1d66 100644
--- a/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
+++ b/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
@@ -148,14 +148,14 @@ export const DashboardPreferences = () => {
                 <CardFooter className="justify-end space-x-2">
                   {form.formState.isDirty && (
                     <Button
-                      type="default"
-                      htmlType="button"
+                      variant="default"
+                      type="button"
                       onClick={() => form.reset(dashboardPreferences)}
                     >
                       Cancel
                     </Button>
                   )}
-                  <Button type="primary" htmlType="submit" disabled={!form.formState.isDirty}>
+                  <Button variant="primary" type="submit" disabled={!form.formState.isDirty}>
                     Save changes
                   </Button>
                 </CardFooter>
@@ -197,7 +197,7 @@ const DashboardQueriesDialog = () => {
 
         <DialogFooter>
           <DialogClose asChild className="opacity-100">
-            <Button type="default">Understood</Button>
+            <Button variant="default">Understood</Button>
           </DialogClose>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
index bda6c0a4ca6..e0a3f990864 100644
--- a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
@@ -7,10 +7,10 @@ import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 
 export interface DeleteProjectButtonProps {
-  type?: 'danger' | 'default'
+  variant?: 'danger' | 'default'
 }
 
-export const DeleteProjectButton = ({ type = 'danger' }: DeleteProjectButtonProps) => {
+export const DeleteProjectButton = ({ variant = 'danger' }: DeleteProjectButtonProps) => {
   const { data: project } = useSelectedProjectQuery()
   const [isOpen, setIsOpen] = useState(false)
 
@@ -21,7 +21,7 @@ export const DeleteProjectButton = ({ type = 'danger' }: DeleteProjectButtonProp
   return (
     <>
       <ButtonTooltip
-        type={type}
+        variant={variant}
         disabled={!canDeleteProject}
         onClick={() => setIsOpen(true)}
         tooltip={{
diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx
index ae99fb651e9..d660aaa9429 100644
--- a/apps/studio/components/interfaces/Settings/General/General.tsx
+++ b/apps/studio/components/interfaces/Settings/General/General.tsx
@@ -215,8 +215,8 @@ export const General = () => {
                   <CardFooter className="justify-end space-x-2">
                     {form.formState.isDirty && (
                       <Button
-                        type="default"
-                        htmlType="button"
+                        variant="default"
+                        type="button"
                         disabled={isUpdating}
                         onClick={() => form.reset({ name: project?.name ?? '' })}
                       >
@@ -224,8 +224,8 @@ export const General = () => {
                       </Button>
                     )}
                     <Button
-                      type="primary"
-                      htmlType="submit"
+                      variant="primary"
+                      type="submit"
                       disabled={
                         !form.formState.isDirty || isUpdating || !canUpdateProject || isBranch
                       }
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
index e48e18314f2..7b079440f76 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
@@ -85,7 +85,7 @@ const PauseProjectButton = () => {
   return (
     <>
       <ButtonTooltip
-        type="default"
+        variant="default"
         icon={<CirclePause />}
         onClick={() => setIsModalOpen(true)}
         loading={isPausing}
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx
index 0148a5ece7c..17a3c53814b 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx
@@ -127,7 +127,7 @@ export const ProjectUpgradeAlert = () => {
           <DialogTrigger asChild>
             <ButtonTooltip
               size="tiny"
-              type="primary"
+              variant="primary"
               className="mt-2"
               disabled={projectUpgradeDisabled}
               tooltip={{
@@ -182,7 +182,7 @@ export const ProjectUpgradeAlert = () => {
                           </p>
 
                           <div>
-                            <Button size="tiny" type="default" asChild>
+                            <Button size="tiny" variant="default" asChild>
                               <Link
                                 href={`${DOCS_URL}/guides/platform/migrating-and-upgrading-projects#caveats`}
                                 target="_blank"
@@ -224,7 +224,7 @@ export const ProjectUpgradeAlert = () => {
                             </div>
                           </div>
                           <div>
-                            <Button size="tiny" type="default" asChild>
+                            <Button size="tiny" variant="default" asChild>
                               <Link
                                 href={`${DOCS_URL}/guides/platform/migrating-and-upgrading-projects#caveats`}
                                 target="_blank"
@@ -277,13 +277,13 @@ export const ProjectUpgradeAlert = () => {
                 </DialogSection>
                 <DialogFooter>
                   <Button
-                    type="default"
+                    variant="default"
                     onClick={() => setShowUpgradeModal(false)}
                     disabled={isUpgrading}
                   >
                     Cancel
                   </Button>
-                  <Button htmlType="submit" disabled={isUpgrading} loading={isUpgrading}>
+                  <Button type="submit" disabled={isUpgrading} loading={isUpgrading}>
                     Confirm upgrade
                   </Button>
                 </DialogFooter>
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
index 57d6a42ae37..6a2bf0ca9d4 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
@@ -103,7 +103,7 @@ const RestartServerButton = () => {
       {projectSettingsRestartProject ? (
         <div className="flex w-full @lg:w-auto">
           <ButtonTooltip
-            type="default"
+            variant="default"
             className={cn(
               'flex-1 px-3 hover:z-10 @lg:flex-none',
               canRestartProject && canRestart ? 'rounded-r-none' : ''
@@ -137,7 +137,7 @@ const RestartServerButton = () => {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="default"
+                  variant="default"
                   className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px"
                   icon={<ChevronDown />}
                   disabled={!canRestartProject}
@@ -165,7 +165,7 @@ const RestartServerButton = () => {
         </div>
       ) : (
         <Button
-          type="default"
+          variant="default"
           icon={<RefreshCw />}
           className="w-full @lg:w-auto"
           disabled={isLoading}
diff --git a/apps/studio/components/interfaces/Settings/General/Project.tsx b/apps/studio/components/interfaces/Settings/General/Project.tsx
index 28ed752273f..3d3df0799c0 100644
--- a/apps/studio/components/interfaces/Settings/General/Project.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Project.tsx
@@ -73,7 +73,7 @@ export const Project = () => {
                 </div>
                 {isPaused ? (
                   shouldShowDashboardLink ? (
-                    <Button asChild type="default">
+                    <Button asChild variant="default">
                       <Link href={`/project/${project?.ref}`}>View project dashboard</Link>
                     </Button>
                   ) : (
diff --git a/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx b/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx
index 5d44cd417e2..18831b0c7a8 100644
--- a/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx
+++ b/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx
@@ -131,7 +131,7 @@ export const ProjectAccessSection = () => {
                       <p className="text-sm text-foreground-light">{projectAccessDescription}</p>
                     </div>
                     {!!organization?.slug && (
-                      <Button asChild type="default">
+                      <Button asChild variant="default">
                         <Link href={`/org/${organization.slug}/team`}>
                           {hasLimitedVisibility ? 'View team' : 'Manage members'}
                         </Link>
diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
index 5c75613b80c..5ab2e71883c 100644
--- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
@@ -98,7 +98,7 @@ export const TransferProjectButton = () => {
     <Dialog onOpenChange={(open) => setIsOpen(open)} open={isOpen}>
       <DialogTrigger asChild>
         <ButtonTooltip
-          type="default"
+          variant="default"
           disabled={!canTransferProject || disableProjectTransfer}
           tooltip={{
             content: {
@@ -283,7 +283,7 @@ export const TransferProjectButton = () => {
           </Loading>
         )}
         <DialogFooter>
-          <Button type="default" onClick={() => setIsOpen(false)}>
+          <Button variant="default" onClick={() => setIsOpen(false)}>
             Cancel
           </Button>
           <Button
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
index e1b64676ca0..fdd9b65f092 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
@@ -438,7 +438,7 @@ export const InfrastructureActivity = () => {
                       title="Looking for actual disk activity?"
                       description="The chart above shows your remaining burst budget, not real disk throughput. For detailed read/write IOPS and throughput charts, head to the Database Observability page."
                     >
-                      <Button asChild type="default" icon={<ChartLine size={14} />}>
+                      <Button asChild variant="default" icon={<ChartLine size={14} />}>
                         <Link href={`/project/${projectRef}/observability/database`}>
                           View detailed IOPS and throughput
                         </Link>
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
index 34316d449f3..cb529b39ad8 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
@@ -274,7 +274,7 @@ const InstanceConfigurationUI = ({ diagramOnly = false }: InstanceConfigurationU
                 <div className="flex items-center justify-center">
                   <ButtonTooltip
                     asChild
-                    type="default"
+                    variant="default"
                     disabled={!canManageReplicas || isOrioleDb}
                     className={cn(replicas.length > 0 ? 'rounded-r-none' : '')}
                     tooltip={{
@@ -294,7 +294,7 @@ const InstanceConfigurationUI = ({ diagramOnly = false }: InstanceConfigurationU
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button
-                          type="default"
+                          variant="default"
                           icon={<ChevronDown size={16} />}
                           className="px-1 rounded-l-none border-l-0"
                         />
@@ -316,7 +316,7 @@ const InstanceConfigurationUI = ({ diagramOnly = false }: InstanceConfigurationU
                 {isAws && (
                   <div className="flex items-center justify-center">
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<Network size={15} />}
                       className={`rounded-r-none transition ${
                         view === 'flow' ? 'opacity-100' : 'opacity-50'
@@ -324,7 +324,7 @@ const InstanceConfigurationUI = ({ diagramOnly = false }: InstanceConfigurationU
                       onClick={() => setView('flow')}
                     />
                     <Button
-                      type="default"
+                      variant="default"
                       icon={<Globe2 size={15} />}
                       className={`rounded-l-none transition ${
                         view === 'map' ? 'opacity-100' : 'opacity-50'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
index f6a3427ba7c..3ac1a9ae727 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
@@ -71,7 +71,7 @@ export const LoadBalancerNode = ({ data }: NodeProps<Node<LoadBalancerData>>) =>
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button type="text" icon={<MoreVertical />} className="px-1" />
+              <Button variant="text" icon={<MoreVertical />} className="px-1" />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-40" side="bottom" align="end">
               <DropdownMenuItem asChild className="gap-x-2">
@@ -403,7 +403,7 @@ export const ReplicaNode = ({ data }: NodeProps<Node<ReplicaNodeData>>) => {
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="text" icon={<MoreVertical />} className="px-1" />
+            <Button variant="text" icon={<MoreVertical />} className="px-1" />
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-40" side="bottom" align="end">
             <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
index ae2bd8ac1d2..c8bc70c01fb 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
@@ -297,7 +297,7 @@ const MapView = ({
                       {database.identifier !== ref && (
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                            <Button type="text" icon={<MoreVertical />} className="px-1" />
+                            <Button variant="text" icon={<MoreVertical />} className="px-1" />
                           </DropdownMenuTrigger>
                           <DropdownMenuContent className="w-40" side="bottom" align="end">
                             <DropdownMenuItem
@@ -360,7 +360,7 @@ const MapView = ({
             }`}
           >
             <ButtonTooltip
-              type="default"
+              variant="default"
               disabled={!canManageReplicas}
               onClick={() => onSelectDeployNewReplica(selectedRegion.key)}
               tooltip={{
@@ -375,7 +375,7 @@ const MapView = ({
               Deploy new replica here
             </ButtonTooltip>
             <Button
-              type="default"
+              variant="default"
               onClick={() => {
                 setCenter([14, 7])
                 setZoom(1.5)
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
index 714a153ea96..70167e2e1c6 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
@@ -100,7 +100,7 @@ export const InfrastructureInfo = () => {
               title="Management of read replicas has moved"
               description="Read replicas is now managed under Replication in the Database section."
               actions={
-                <Button type="default" asChild>
+                <Button variant="default" asChild>
                   <Link href={`/project/${ref}/database/replication`} className="no-underline!">
                     Go to Replication
                   </Link>
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx
index a38bb8efd84..669a0d23d84 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/UpgradeWarnings.tsx
@@ -20,7 +20,7 @@ export const ReadReplicasWarning = ({ latestPgVersion }: { latestPgVersion: stri
       title="A newer version of Postgres is available"
       description={`You will need to remove all read replicas prior to upgrading your Postgres version to the latest available (${latestPgVersion}).`}
       actions={
-        <Button asChild type="default">
+        <Button asChild variant="default">
           <Link href={`/project/${ref}/database/replication`}>Manage read replicas</Link>
         </Button>
       }
@@ -124,7 +124,7 @@ const ValidationErrorItem = ({ error }: { error: ProjectUpgradeEligibilityValida
         <p className="text-foreground-lighter text-xs">{description}</p>
       </div>
       {manageLink && (
-        <Button size="tiny" type="default" asChild>
+        <Button size="tiny" variant="default" asChild>
           <Link href={manageLink}>Manage</Link>
         </Button>
       )}
@@ -191,7 +191,7 @@ export const ValidationWarningsAdmonition = ({
       title={getWarningTitle(warning)}
       description={getWarningDescription(warning)}
     >
-      <Button asChild type="default" className="mt-2">
+      <Button asChild variant="default" className="mt-2">
         <Link href={getWarningLink(warning)} target="_blank" rel="noreferrer">
           Read upgrade notes
         </Link>
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAccountItem.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAccountItem.tsx
index 2259dc01be0..6f333c7c175 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAccountItem.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAccountItem.tsx
@@ -62,7 +62,7 @@ export const AWSPrivateLinkAccountItem = ({
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button type="text" className="px-1" icon={<MoreVertical />} />
+          <Button variant="text" className="px-1" icon={<MoreVertical />} />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-40">
           <DropdownMenuItem onClick={onEdit} className="gap-x-2">
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
index f56ae90fc66..b570d00c3a1 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
@@ -158,7 +158,7 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
                     description={description}
                     actions={
                       account.status === 'READY' && (
-                        <Button type="default" className="w-min mt-2">
+                        <Button variant="default" className="w-min mt-2">
                           <Link
                             target="_blank"
                             rel="noopener noreferrer"
@@ -220,11 +220,11 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
             </SheetSection>
 
             <SheetFooter>
-              <Button type="default" disabled={isPending} onClick={() => onOpenChange(false)}>
+              <Button variant="default" disabled={isPending} onClick={() => onOpenChange(false)}>
                 Cancel
               </Button>
               {isNew && (
-                <Button htmlType="submit" loading={isPending}>
+                <Button type="submit" loading={isPending}>
                   Add Account
                 </Button>
               )}
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx
index 540879a0d1a..7c5be765ce6 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx
@@ -93,7 +93,7 @@ export const AWSPrivateLinkSection = () => {
             <div className={cn(promptPlanUpgrade && 'opacity-25 pointer-events-none')}>
               <div className="flex items-center justify-between mb-3">
                 <h3 className="text-sm font-medium text-foreground">AWS Accounts</h3>
-                <Button type="default" onClick={onAddAccount}>
+                <Button variant="default" onClick={onAddAccount}>
                   Add account
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
index 43a0686d75a..f261fa21e9c 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
@@ -622,7 +622,7 @@ export const GitHubIntegrationConnectionForm = ({
                     <div>
                       {connection && (
                         <Button
-                          type="outline"
+                          variant="outline"
                           onClick={handleRemoveIntegration}
                           disabled={isDeletingConnection || isCheckingBranch}
                           loading={isDeletingConnection}
@@ -634,7 +634,7 @@ export const GitHubIntegrationConnectionForm = ({
                     <div className="flex space-x-2">
                       {githubSettingsForm.formState.isDirty && (
                         <Button
-                          type="default"
+                          variant="default"
                           onClick={() => githubSettingsForm.reset()}
                           disabled={!canUpdateGitHubConnection || isCheckingBranch}
                         >
@@ -642,8 +642,8 @@ export const GitHubIntegrationConnectionForm = ({
                         </Button>
                       )}
                       <Button
-                        type="primary"
-                        htmlType="submit"
+                        variant="primary"
+                        type="submit"
                         disabled={
                           !hasAccessToGitHubIntegration ||
                           (!connection && !canCreateGitHubConnection) ||
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
index 0fda2c6dfee..4bc48dd12e9 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
@@ -137,9 +137,9 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
           {gitHubAuthorization === null ? (
             <FormControl>
               <Button
-                type="default"
+                variant="default"
                 size="small"
-                htmlType="button"
+                type="button"
                 disabled={disabled}
                 onClick={() => {
                   onConnectClick?.()
@@ -155,8 +155,8 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
               <PopoverTrigger asChild>
                 <FormControl>
                   <Button
-                    type="default"
-                    htmlType="button"
+                    variant="default"
+                    type="button"
                     className="justify-start h-[34px] w-full"
                     disabled={disabled || isLoading}
                     loading={isLoading}
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
index 3309a748d35..7ed0d0dff68 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
@@ -221,7 +221,7 @@ export const VercelSection = ({ isProjectScoped }: { isProjectScoped: boolean })
                   <Button
                     icon={<ExternalLink />}
                     asChild={!isBranch}
-                    type="default"
+                    variant="default"
                     disabled={isBranch}
                   >
                     {isBranch ? (
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index d53c652d3f7..e7ee13084a4 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -111,7 +111,7 @@ const LogSelection = ({ log, onClose, queryType, isLoading, error }: LogSelectio
             <div className="*:px-1.5 *:text-foreground-lighter ml-auto flex gap-1 absolute right-2 top-2">
               <ButtonTooltip
                 disabled={!log || isLoading}
-                type="text"
+                variant="text"
                 tooltip={{
                   content: {
                     side: 'left',
@@ -125,7 +125,7 @@ const LogSelection = ({ log, onClose, queryType, isLoading, error }: LogSelectio
                 }}
               />
 
-              <Button type="text" onClick={onClose}>
+              <Button variant="text" onClick={onClose}>
                 <X size={14} strokeWidth={2} />
               </Button>
             </div>
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
index a89183886ac..a004c1a827f 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
@@ -116,7 +116,7 @@ const PropertyRow = ({
               <Button
                 className="mt-1 w-full"
                 size="tiny"
-                type="outline"
+                variant="outline"
                 onClick={() => setIsExpanded(!isExpanded)}
               >
                 {isExpanded ? 'Collapse' : 'Expand'}
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
index f487262d6c9..6d10869354f 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -471,7 +471,7 @@ export const LogTable = ({
     >
       <div className="flex items-center gap-2">
         <DownloadResultsButton
-          type="text"
+          variant="text"
           text={`Results ${data && data.length ? `(${data.length})` : ''}`}
           results={data}
           fileName={`supabase-logs-${ref}.csv`}
@@ -482,7 +482,7 @@ export const LogTable = ({
       {showHistogramToggle && (
         <div className="flex items-center gap-2">
           <Button
-            type="default"
+            variant="default"
             icon={isHistogramShowing ? <Eye /> : <EyeOff />}
             onClick={onHistogramToggle}
           >
@@ -494,7 +494,7 @@ export const LogTable = ({
       <div className="gap-x-2 flex items-center">
         {IS_PLATFORM && (
           <ButtonTooltip
-            type="default"
+            variant="default"
             onClick={onSave}
             loading={isSaving}
             disabled={!canCreateLogQuery || !hasEditorValue}
@@ -512,7 +512,7 @@ export const LogTable = ({
         )}
         <Button
           title="run-logs-query"
-          type={hasEditorValue ? 'primary' : 'alternative'}
+          variant={hasEditorValue ? 'primary' : 'alternative'}
           disabled={!hasEditorValue}
           onClick={onRun}
           iconRight={<Play size={12} />}
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
index a2c8ddf55de..afee4c3e51b 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
@@ -337,7 +337,7 @@ export const LogsDatePicker = ({
 
   const triggerButton = (
     <PopoverTrigger asChild>
-      <Button type="default" icon={<Clock size={12} />} {...buttonTriggerProps}>
+      <Button variant="default" icon={<Clock size={12} />} {...buttonTriggerProps}>
         {value.isHelper
           ? value.text
           : `${dayjs(value.from).format('DD MMM, HH:mm')} - ${dayjs(value.to || new Date()).format('DD MMM, HH:mm')}`}
@@ -433,7 +433,7 @@ export const LogsDatePicker = ({
                   },
                 }}
                 icon={<HistoryIcon size={14} />}
-                type="text"
+                variant="text"
                 size="tiny"
                 className="px-1.5"
                 onClick={() => {
@@ -462,7 +462,7 @@ export const LogsDatePicker = ({
           <div className="flex items-center justify-end gap-2 p-2 border-t">
             {startDate && endDate ? (
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 onClick={handleCopy}
                 className={cn({
@@ -474,7 +474,7 @@ export const LogsDatePicker = ({
             ) : null}
 
             <Button
-              type="default"
+              variant="default"
               onClick={() => {
                 const today = new Date()
                 setCurrentMonth(today)
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
index 42f067006a7..469e0645d7b 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
@@ -94,15 +94,10 @@ export const UpdateSavedQueryModal = ({
               />
             </DialogSection>
             <DialogFooter>
-              <Button
-                htmlType="reset"
-                type="default"
-                onClick={handleCancel}
-                disabled={isSubmitting}
-              >
+              <Button type="reset" variant="default" onClick={handleCancel} disabled={isSubmitting}>
                 Cancel
               </Button>
-              <Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting || !isDirty}>
+              <Button type="submit" loading={isSubmitting} disabled={isSubmitting || !isDirty}>
                 Save query
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx
index 4f2b12abdf1..72f88821bf4 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx
@@ -36,7 +36,7 @@ const ResourcesExceededErrorRenderer: React.FC<ErrorRendererProps> = ({ error, i
               <InputGroupAddon align="block-end">
                 <InputGroupButton
                   size="tiny"
-                  type="default"
+                  variant="default"
                   className="ml-auto"
                   onClick={() => {
                     copyToClipboard(errorAsJson)
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
index c9844e7037d..bd606e42e9a 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
@@ -56,7 +56,7 @@ const LogsFilterPopover = ({
     <Popover open={open} onOpenChange={handleToggle}>
       <PopoverTrigger asChild>
         <Button
-          type={isActive ? 'default' : 'outline'}
+          variant={isActive ? 'default' : 'outline'}
           onClick={handleToggle}
           className={cn(
             'min-w-20 border-dashed',
@@ -110,10 +110,10 @@ const LogsFilterPopover = ({
           ))}
 
           <div className="flex items-center justify-end gap-2 border-t border-default p-2">
-            <Button size="tiny" type="default" onClick={handleReset} htmlType="button">
+            <Button size="tiny" variant="default" onClick={handleReset} type="button">
               Clear
             </Button>
-            <Button loading={isLoading} type="primary" htmlType="submit">
+            <Button loading={isLoading} variant="primary" type="submit">
               Apply
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
index cda950344e3..354eb829005 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
@@ -46,7 +46,7 @@ export const SelectionDetailedRow = ({
         iconOnly
         text={value}
         className="group-hover:opacity-100 opacity-0 p-0 h-6 w-6"
-        type="text"
+        variant="text"
         title="Copy to clipboard"
       />
     </div>
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
index b48a54923d2..7f7450ac950 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
@@ -375,7 +375,7 @@ export const LogsPreviewer = ({
             <Button
               onClick={loadOlder}
               icon={<Rewind />}
-              type="default"
+              variant="default"
               loading={isLoadingOlder}
               disabled={isLoadingOlder}
             >
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
index 335fa7d4916..7afed9f5cc4 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
@@ -114,7 +114,7 @@ const LogsQueryPanel = ({
           <div className="flex items-center gap-2">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button type="default" iconRight={<ChevronDown />}>
+                <Button variant="default" iconRight={<ChevronDown />}>
                   Insert source
                 </Button>
               </DropdownMenuTrigger>
@@ -139,7 +139,7 @@ const LogsQueryPanel = ({
             {logsTemplates && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="default" iconRight={<ChevronDown />}>
+                  <Button variant="default" iconRight={<ChevronDown />}>
                     Templates
                   </Button>
                 </DropdownMenuTrigger>
@@ -226,7 +226,7 @@ const LogsQueryPanel = ({
               <div className="flex flex-row justify-between items-center">
                 <h3>Field Reference</h3>
                 <Button
-                  type="text"
+                  variant="text"
                   className="px-1"
                   onClick={() => setShowReference(false)}
                   icon={<X />}
@@ -239,7 +239,7 @@ const LogsQueryPanel = ({
             hideFooter
             triggerElement={
               <Button
-                type="text"
+                variant="text"
                 onClick={() => setShowReference(true)}
                 icon={<BookOpen />}
                 className="px-2"
@@ -276,7 +276,7 @@ const LogsQueryPanel = ({
               <Popover open={open} onOpenChange={setOpen}>
                 <PopoverTrigger asChild>
                   <Button
-                    type="default"
+                    variant="default"
                     role="combobox"
                     size={'small'}
                     aria-expanded={open}
diff --git a/apps/studio/components/interfaces/Settings/Logs/MultiSelectActionBar.tsx b/apps/studio/components/interfaces/Settings/Logs/MultiSelectActionBar.tsx
index cd0522c3df2..9878a47a1df 100644
--- a/apps/studio/components/interfaces/Settings/Logs/MultiSelectActionBar.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/MultiSelectActionBar.tsx
@@ -61,7 +61,7 @@ export function MultiSelectActionBar({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              type="default"
+              variant="default"
               size="tiny"
               icon={copiedFormat ? <Check size={12} className="text-brand" /> : <Copy size={12} />}
               iconRight={<ChevronDown size={11} />}
@@ -96,7 +96,7 @@ export function MultiSelectActionBar({
         />
 
         <Button
-          type="text"
+          variant="text"
           size="tiny"
           icon={<XIcon size={12} />}
           onClick={onClear}
diff --git a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
index 408af59777c..001201b837d 100644
--- a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
@@ -158,7 +158,7 @@ const PreviewFilterPanel = ({
                 {hasEdits && (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <InputGroupButton type="text" onClick={() => handleInputSearch(search)}>
+                      <InputGroupButton variant="text" onClick={() => handleInputSearch(search)}>
                         <span>↲</span>
                       </InputGroupButton>
                     </TooltipTrigger>
@@ -170,7 +170,7 @@ const PreviewFilterPanel = ({
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <InputGroupButton
-                        type="text"
+                        variant="text"
                         onClick={() => {
                           setSearch('')
                           handleInputSearch('')
@@ -190,7 +190,7 @@ const PreviewFilterPanel = ({
         <ShortcutTooltip shortcutId={SHORTCUT_IDS.LOGS_PREVIEW_REFRESH} side="bottom">
           <Button
             title="refresh"
-            type="default"
+            variant="default"
             className="px-1.5"
             icon={
               <div className="relative">
@@ -257,7 +257,7 @@ const PreviewFilterPanel = ({
         <div className="flex items-center space-x-2">
           <ShortcutTooltip shortcutId={SHORTCUT_IDS.LOGS_PREVIEW_TOGGLE_CHART} side="bottom">
             <Button
-              type="default"
+              variant="default"
               onClick={() => onToggleEventChart()}
               icon={isShowingEventChart ? <Eye /> : <EyeOff />}
             >
@@ -268,7 +268,7 @@ const PreviewFilterPanel = ({
         {Boolean(csvData) && (
           <DownloadResultsButton
             iconOnly
-            type="default"
+            variant="default"
             align="center"
             results={csvData ?? []}
             fileName={`supabase-${logName}-${ref}.csv`}
@@ -280,7 +280,7 @@ const PreviewFilterPanel = ({
         <div className="flex items-center justify-center gap-x-2">
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button asChild className="px-1.5" type="default" icon={<Terminal />}>
+              <Button asChild className="px-1.5" variant="default" icon={<Terminal />}>
                 <Link href={queryUrl} />
               </Button>
             </TooltipTrigger>
@@ -300,7 +300,7 @@ const PreviewFilterPanel = ({
           />
         </div>
       ) : (
-        <Button asChild type="default" onClick={onExploreClick}>
+        <Button asChild variant="default" onClick={onExploreClick}>
           <Link href={queryUrl}>Explore via query</Link>
         </Button>
       )}
diff --git a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx
index 84b4b6ebd49..7fdc180da73 100644
--- a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx
@@ -38,11 +38,11 @@ function CustomDateRangePicker({ onChange, onCancel }: CustomOptionProps) {
         numberOfMonths={2}
       />
       <div className="flex justify-end gap-2 py-3 px-4 border-t">
-        <Button type="default" onClick={onCancel}>
+        <Button variant="default" onClick={onCancel}>
           Cancel
         </Button>
         <Button
-          type="primary"
+          variant="primary"
           onClick={() => {
             if (dateRange?.from) {
               const from = dayjs(dateRange.from).toISOString()
@@ -287,7 +287,7 @@ export const PreviewFilterPanelWithUniversal = ({
         <div className="flex items-center gap-x-2">
           <Button
             title="refresh"
-            type="default"
+            variant="default"
             className="px-1.5"
             icon={
               <div className="relative">
@@ -308,7 +308,7 @@ export const PreviewFilterPanelWithUniversal = ({
           />
 
           <Button
-            type="default"
+            variant="default"
             onClick={() => onToggleEventChart()}
             icon={isShowingEventChart ? <Eye /> : <EyeOff />}
           >
@@ -321,7 +321,7 @@ export const PreviewFilterPanelWithUniversal = ({
             <>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button asChild className="px-1.5" type="default" icon={<Terminal />}>
+                  <Button asChild className="px-1.5" variant="default" icon={<Terminal />}>
                     <Link href={queryUrl} />
                   </Button>
                 </TooltipTrigger>
@@ -341,7 +341,7 @@ export const PreviewFilterPanelWithUniversal = ({
               />
             </>
           ) : (
-            <Button asChild type="default" onClick={onExploreClick}>
+            <Button asChild variant="default" onClick={onExploreClick}>
               <Link href={queryUrl}>Explore via query</Link>
             </Button>
           )}
diff --git a/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx b/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
index 5f7e7734253..02518afc7f4 100644
--- a/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
@@ -23,7 +23,7 @@ const RecentQueriesItem: React.FC<Props> = ({ item }) => {
       </Table.td>
       <Table.td className="text-right">
         <Button
-          type="alternative"
+          variant="alternative"
           iconRight={<Play size={10} />}
           onClick={() =>
             router.push(`/project/${ref}/logs/explorer?q=${encodeURIComponent(item.sql)}`)
diff --git a/apps/studio/components/interfaces/Settings/Logs/SidebarV2/SidebarItem.tsx b/apps/studio/components/interfaces/Settings/Logs/SidebarV2/SidebarItem.tsx
index 89be7fb0e20..e03093adf65 100644
--- a/apps/studio/components/interfaces/Settings/Logs/SidebarV2/SidebarItem.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/SidebarV2/SidebarItem.tsx
@@ -39,7 +39,7 @@ export function LogsSidebarItem({ label, icon, dropdownItems, href, isActive, on
             }}
           >
             <Button
-              type="text"
+              variant="text"
               title="Actions"
               className="space-x-0 h-7 px-1.5 opacity-0 group-hover:opacity-100 bg-transparent! data-open:opacity-100"
               icon={<MoreHorizontal size={14} />}
diff --git a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
index b0e94e24f57..fededa3cd64 100644
--- a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
@@ -74,7 +74,7 @@ const UpgradePrompt: React.FC<Props> = ({
           </div>
         </DialogSection>
         <DialogFooter className="flex justify-end gap-3">
-          <Button type="default" onClick={() => setShowUpgradePrompt(false)}>
+          <Button variant="default" onClick={() => setShowUpgradePrompt(false)}>
             Close
           </Button>
           <Button asChild size="tiny">
diff --git a/apps/studio/components/interfaces/Sidebar.tsx b/apps/studio/components/interfaces/Sidebar.tsx
index e2695958b08..7219188268e 100644
--- a/apps/studio/components/interfaces/Sidebar.tsx
+++ b/apps/studio/components/interfaces/Sidebar.tsx
@@ -95,7 +95,7 @@ export const Sidebar = ({ className, ...props }: SidebarProps) => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    type="text"
+                    variant="text"
                     className={`w-min px-1.5 mx-0.5 ${sidebarBehaviour === 'open' ? 'px-2!' : ''}`}
                     icon={<PanelLeftDashed size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />}
                     aria-label="Sidebar control"
diff --git a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
index 6abda7a93d5..3793449b1bf 100644
--- a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
+++ b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
@@ -98,7 +98,7 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
 
         <div className="border-t border-overlay-border" />
 
-        <Button block form="code-input-form" htmlType="submit" size="medium" loading={isLoading}>
+        <Button block form="code-input-form" type="submit" size="medium" loading={isLoading}>
           Confirm reset code
         </Button>
       </form>
@@ -188,7 +188,7 @@ const ForgotPasswordForm = ({ onSuccess }: { onSuccess: (email: string) => void
         <Button
           block
           form="forgot-password-form"
-          htmlType="submit"
+          type="submit"
           size="medium"
           disabled={isPending}
           loading={isPending}
diff --git a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index 1e3de4a083e..e928bcbc81c 100644
--- a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -92,7 +92,7 @@ export const ResetPasswordForm = () => {
                     actions={
                       <Button
                         icon={currentPasswordHidden ? <Eye /> : <EyeOff />}
-                        type="default"
+                        variant="default"
                         className="w-7"
                         onClick={() => setCurrentPasswordHidden((prev) => !prev)}
                       />
@@ -124,7 +124,7 @@ export const ResetPasswordForm = () => {
                   actions={
                     <Button
                       icon={passwordHidden ? <Eye /> : <EyeOff />}
-                      type="default"
+                      variant="default"
                       className="w-7"
                       onClick={() => setPasswordHidden((prev) => !prev)}
                     />
@@ -153,7 +153,7 @@ export const ResetPasswordForm = () => {
 
         <Button
           block
-          htmlType="submit"
+          type="submit"
           size="medium"
           disabled={form.formState.isSubmitting}
           loading={form.formState.isSubmitting}
diff --git a/apps/studio/components/interfaces/SignIn/SessionTimeoutModal.tsx b/apps/studio/components/interfaces/SignIn/SessionTimeoutModal.tsx
index 24782d2854e..922e1ab3091 100644
--- a/apps/studio/components/interfaces/SignIn/SessionTimeoutModal.tsx
+++ b/apps/studio/components/interfaces/SignIn/SessionTimeoutModal.tsx
@@ -63,7 +63,7 @@ export const SessionTimeoutModal = ({
                     Try a different browser or disable extensions that block network requests. If
                     the problem persists:
                   </p>
-                  <Button type="default" size="tiny" onClick={handleClearStorage}>
+                  <Button variant="default" size="tiny" onClick={handleClearStorage}>
                     Clear site data and reload
                   </Button>
                   <p>
diff --git a/apps/studio/components/interfaces/SignIn/SignInForm.tsx b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
index e6cf1f63cfe..56a81cdf646 100644
--- a/apps/studio/components/interfaces/SignIn/SignInForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
@@ -162,7 +162,7 @@ export const SignInForm = () => {
                       className="pr-10"
                     />
                     <Button
-                      type="default"
+                      variant="default"
                       title={passwordHidden ? `Show password` : `Hide password`}
                       aria-label={passwordHidden ? `Show password` : `Hide password`}
                       className="absolute right-1 top-1 px-1.5"
@@ -200,7 +200,7 @@ export const SignInForm = () => {
         </div>
 
         <LastSignInWrapper type="email">
-          <Button block form={formId} htmlType="submit" size="large" loading={isSubmitting}>
+          <Button block form={formId} type="submit" size="large" loading={isSubmitting}>
             Sign in
           </Button>
         </LastSignInWrapper>
diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
index 8cdc77f0024..3ac88449fcc 100644
--- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
@@ -106,10 +106,10 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
         hideContactSupport
         additionalActions={
           <>
-            <Button asChild type="default">
+            <Button asChild variant="default">
               <Link href="/sign-in">Back to sign in</Link>
             </Button>
-            <Button asChild type="default">
+            <Button asChild variant="default">
               <Link href="https://supabase.com/support" target="_blank" rel="noreferrer">
                 Contact support
               </Link>
@@ -168,7 +168,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
             <div className="flex items-center justify-between gap-x-2">
               <Button
                 block
-                type="outline"
+                variant="outline"
                 size="large"
                 disabled={isVerifying || isSuccess}
                 onClick={onClickLogout}
@@ -179,7 +179,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
               <Button
                 block
                 form={formId}
-                htmlType="submit"
+                type="submit"
                 size="large"
                 disabled={isVerifying || isSuccess}
                 loading={isVerifying || isSuccess}
diff --git a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
index 9d5ca57fdf7..5912d08543a 100644
--- a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
@@ -107,7 +107,7 @@ export const SignInSSOForm = () => {
           />
         </div>
 
-        <Button block form={formId} htmlType="submit" size="large" loading={isSubmitting}>
+        <Button block form={formId} type="submit" size="large" loading={isSubmitting}>
           Sign in
         </Button>
       </form>
diff --git a/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx b/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx
index 7e5a3c58ed8..05ea9935e2d 100644
--- a/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx
@@ -41,7 +41,7 @@ export const SignInWithCustom = ({ providerName }: SignInWithCustomProps) => {
   }
 
   return (
-    <Button block onClick={handleCustomSignIn} size="large" type="default" loading={loading}>
+    <Button block onClick={handleCustomSignIn} size="large" variant="default" loading={loading}>
       Continue with {providerName}
     </Button>
   )
diff --git a/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx b/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
index 5827d154339..944d88ece38 100644
--- a/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
@@ -48,7 +48,7 @@ export const SignInWithGitHub = () => {
         // set the width to 20 so that it matches the loading spinner and don't push the text when loading
         icon={<Github width={20} height={18} />}
         size="large"
-        type="default"
+        variant="default"
         loading={loading}
       >
         Continue with GitHub
diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
index 53de4879692..f1bcacd97aa 100644
--- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -182,7 +182,7 @@ export const SignUpForm = () => {
                         disabled={isSubmitting}
                       />
                       <Button
-                        type="default"
+                        variant="default"
                         title={passwordHidden ? `Show password` : `Hide password`}
                         aria-label={passwordHidden ? `Show password` : `Hide password`}
                         className="absolute right-1 top-1 px-1.5"
@@ -217,7 +217,7 @@ export const SignUpForm = () => {
             <Button
               block
               form={formId}
-              htmlType="submit"
+              type="submit"
               size="large"
               disabled={password.length === 0 || isSubmitting}
               loading={isSubmitting}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CopyEnvButton.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CopyEnvButton.tsx
index 9d9301bdcca..d2744e30b40 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CopyEnvButton.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CopyEnvButton.tsx
@@ -39,7 +39,7 @@ export const CopyEnvButton = ({
   }, [serverOptions, values])
 
   return (
-    <Button type="default" loading={isLoading} icon={<Copy />} onClick={onCopy}>
+    <Button variant="default" loading={isLoading} icon={<Copy />} onClick={onCopy}>
       Copy all
     </Button>
   )
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx
index ca6e9dc232d..274b606bd97 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx
@@ -172,7 +172,7 @@ export const CreateTableInstructions = ({
               />
               <div className="flex items-center gap-x-1.5 absolute top-2 right-2">
                 <CopyButton
-                  type="default"
+                  variant="default"
                   loading={isFetchingSecretsOnCopy}
                   asyncText={async () => {
                     if (!!decryptedS3AccessKey && !!decryptedS3SecretKey && !!decryptedToken) {
@@ -208,7 +208,7 @@ export const CreateTableInstructions = ({
                   }}
                 />
                 <ButtonTooltip
-                  type="default"
+                  variant="default"
                   className="w-7"
                   loading={isFetchingSecretValues}
                   onClick={() => setShowKeys(!showKeys)}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx
index 875ca6dc730..482887de332 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx
@@ -28,7 +28,7 @@ export const CreateTableInstructionsDialog = () => {
     <>
       <div className="flex items-center">
         <Button
-          type="primary"
+          variant="primary"
           icon={<Plus />}
           className={cn(enableCreationOfTablesFromDashboard && 'rounded-r-none hover:z-10')}
           onClick={() => {
@@ -41,7 +41,11 @@ export const CreateTableInstructionsDialog = () => {
         {enableCreationOfTablesFromDashboard && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button type="primary" className="w-7 rounded-l-none -ml-px" icon={<ChevronDown />} />
+              <Button
+                variant="primary"
+                className="w-7 rounded-l-none -ml-px"
+                icon={<ChevronDown />}
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-48" align="end">
               <DropdownMenuItem onClick={() => setShowModal(true)}>Via Pyiceberg</DropdownMenuItem>
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
index 9ac38b11473..c93911b7aa6 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
@@ -221,7 +221,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                     <div className="flex items-center justify-between">
                       <p className="text-sm">Columns</p>
                       <Button
-                        type="default"
+                        variant="default"
                         icon={<Plus />}
                         onClick={() => appendColumn({ name: '', type: 'string' })}
                       >
@@ -284,7 +284,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                                 />
                                 <div className="flex items-center justify-center">
                                   <Button
-                                    type="text"
+                                    variant="text"
                                     size="tiny"
                                     icon={<X strokeWidth={1.5} size={14} />}
                                     className="w-6 h-6"
@@ -344,7 +344,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
             <SheetFooter>
               <Button
                 disabled={isCreating}
-                type="default"
+                variant="default"
                 onClick={() => {
                   onOpenChange(false)
                   form.reset(defaultValues)
@@ -352,7 +352,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
               >
                 Cancel
               </Button>
-              <Button form={formId} htmlType="submit" loading={isCreating}>
+              <Button form={formId} type="submit" loading={isCreating}>
                 Create table
               </Button>
             </SheetFooter>
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx
index d14a9015b47..e55e8839d11 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx
@@ -84,7 +84,7 @@ export const DecryptedReadOnlyInput = ({
                 <div className="flex items-center justify-center">
                   <Button
                     disabled
-                    type="default"
+                    variant="default"
                     className="w-7"
                     icon={<Loader className="animate-spin" />}
                   />
@@ -92,7 +92,7 @@ export const DecryptedReadOnlyInput = ({
               ) : (
                 <div className="flex items-center justify-center">
                   <Button
-                    type="default"
+                    variant="default"
                     className="w-7"
                     loading={showHidden && isDecryptedValueLoading}
                     icon={showHidden ? <Eye /> : <EyeOff />}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx
index 8664bb61a44..a1940c6b7c8 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx
@@ -90,7 +90,7 @@ export const InitializeForeignSchemaDialog = ({ namespace }: { namespace: string
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button type="default">Query from Postgres</Button>
+        <Button variant="default">Query from Postgres</Button>
       </DialogTrigger>
       <DialogContent size="medium" aria-describedby={undefined}>
         <Form {...form}>
@@ -118,10 +118,10 @@ export const InitializeForeignSchemaDialog = ({ namespace }: { namespace: string
             <DialogFooter className="justify-between!">
               <DocsButton href={`${DOCS_URL}/guides/storage/analytics/query-with-postgres`} />
               <div className="flex items-center gap-x-2">
-                <Button type="default" disabled={isCreating} onClick={() => setIsOpen(false)}>
+                <Button variant="default" disabled={isCreating} onClick={() => setIsOpen(false)}>
                   Cancel
                 </Button>
-                <Button htmlType="submit" type="primary" loading={isCreating}>
+                <Button type="submit" variant="primary" loading={isCreating}>
                   Create schema
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx
index a5ab4dc97df..f35b67cd5db 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/InsertDataDialog.tsx
@@ -30,7 +30,7 @@ export const InsertDataDialog = ({ table, fdwTable }: InsertDataDialogProps) =>
   const sql = /* SQL */ `
 insert into ${fdwTable.schema}.${fdwTable.name} (
   -- specify columns
-) 
+)
 values (
   -- specify values for each column
 );
@@ -39,7 +39,7 @@ values (
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="default">Insert data</Button>
+        <Button variant="default">Insert data</Button>
       </DialogTrigger>
       <DialogContent aria-describedby={undefined}>
         <DialogHeader>
@@ -76,7 +76,7 @@ values (
           <DocsButton
             href={`${DOCS_URL}/guides/database/extensions/wrappers/iceberg#data-insertion`}
           />
-          <Button asChild type="default" icon={<SqlEditor />}>
+          <Button asChild variant="default" icon={<SqlEditor />}>
             <Link href={`/project/${ref}/sql/new?content=${encodeURIComponent(sql)}`}>
               Open in SQL Editor
             </Link>
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx
index 47d7be8adfd..e96f0ae1688 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx
@@ -333,7 +333,7 @@ export const TableRowComponent = ({ table, schema, namespace }: TableRowComponen
             <>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="default" className="w-7" icon={<MoreVertical />} />
+                  <Button variant="default" className="w-7" icon={<MoreVertical />} />
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent side="bottom" align="end" className="w-fit min-w-[180px]">
@@ -395,7 +395,7 @@ export const TableRowComponent = ({ table, schema, namespace }: TableRowComponen
               <DropdownMenuTrigger asChild>
                 <Button
                   loading={isDeletingNamespaceTable}
-                  type="default"
+                  variant="default"
                   className="w-7"
                   icon={<MoreVertical />}
                 />
@@ -437,7 +437,7 @@ export const TableRowComponent = ({ table, schema, namespace }: TableRowComponen
             <InsertDataDialog table={table.name} fdwTable={x} />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button type="default" className="w-7" icon={<MoreVertical />} />
+                <Button variant="default" className="w-7" icon={<MoreVertical />} />
               </DropdownMenuTrigger>
               <DropdownMenuContent className="w-fit min-w-[180px]" align="end">
                 <DropdownMenuItem asChild className="flex items-center gap-x-2">
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx
index 87f8f944120..729322897b0 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx
@@ -301,7 +301,7 @@ export const NamespaceWithTables = ({
                 ) : null}
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                    <Button type="default" className="w-7" icon={<MoreVertical />} />
+                    <Button variant="default" className="w-7" icon={<MoreVertical />} />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="w-fit min-w-[180px]">
                     <DropdownMenuItem
@@ -316,7 +316,7 @@ export const NamespaceWithTables = ({
               </>
             ) : missingTables.length > 0 ? (
               <Button
-                type={schema ? 'default' : 'warning'}
+                variant={schema ? 'default' : 'warning'}
                 size="tiny"
                 icon={schema ? <RefreshCw /> : <Plus size={14} />}
                 onClick={() => (schema ? rescanNamespace() : setImportForeignSchemaShown(true))}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx
index f5bb0b7a495..d2f603c40a7 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx
@@ -91,7 +91,7 @@ export const UpdateForeignSchemaDialog = ({
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button type="default">Update schema tables</Button>
+        <Button variant="default">Update schema tables</Button>
       </DialogTrigger>
       <DialogContent size="medium" aria-describedby={undefined}>
         <Form {...form}>
@@ -155,10 +155,10 @@ export const UpdateForeignSchemaDialog = ({
             <DialogFooter className="justify-between!">
               <DocsButton href={`${DOCS_URL}/guides/storage/analytics/query-with-postgres`} />
               <div className="flex items-center gap-x-2">
-                <Button type="default" disabled={isUpdating} onClick={() => setIsOpen(false)}>
+                <Button variant="default" disabled={isUpdating} onClick={() => setIsOpen(false)}>
                   Cancel
                 </Button>
-                <Button htmlType="submit" type="primary" loading={isUpdating}>
+                <Button type="submit" variant="primary" loading={isUpdating}>
                   Update schema
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
index c32b6590eb5..4a19e1a2d7a 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
@@ -244,7 +244,7 @@ export const AnalyticBucketDetails = () => {
                         }
                         actions={
                           <div className="flex items-center gap-x-2">
-                            <Button asChild type="default">
+                            <Button asChild variant="default">
                               <Link
                                 href={`/project/${projectRef}/database/replication/${pipeline.replicator_id}`}
                               >
@@ -253,7 +253,7 @@ export const AnalyticBucketDetails = () => {
                             </Button>
                             {isPipelineStopped && (
                               <Button
-                                type="default"
+                                variant="default"
                                 loading={isStartingPipeline}
                                 onClick={async () => {
                                   if (projectRef) {
@@ -308,7 +308,7 @@ export const AnalyticBucketDetails = () => {
                   </p>
                 </div>
                 <Button
-                  type="danger"
+                  variant="danger"
                   disabled={!bucket?.name || !isSuccessBucket}
                   onClick={() => setShowDeleteModal(true)}
                 >
@@ -361,7 +361,7 @@ const ExtensionNotInstalled = ({
               Learn more
             </InlineLink>
           </p>
-          <Button type="default" asChild className="mt-2" onClick={() => {}}>
+          <Button variant="default" asChild className="mt-2" onClick={() => {}}>
             <Link
               href={
                 databaseNeedsUpgrading
@@ -410,7 +410,7 @@ const ExtensionNeedsUpgrade = ({
             Before reinstalling the wrapper extension, you must first remove all existing wrappers.
             Afterward, you can recreate the wrappers.
           </p>
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link
               href={
                 databaseNeedsUpgrading
@@ -442,7 +442,7 @@ const WrapperMissing = ({ bucketName }: { bucketName?: string }) => {
       <ScaffoldSection isFullWidth>
         <Admonition type="warning" title="Missing integration">
           <p>The Iceberg Wrapper integration is required in order to query analytics tables.</p>
-          <Button type="default" loading={isCreatingIcebergWrapper} onClick={onSetupWrapper}>
+          <Button variant="default" loading={isCreatingIcebergWrapper} onClick={onSetupWrapper}>
             Install wrapper
           </Button>
         </Admonition>
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
index c426ba7743d..4a6df2b1c3b 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
@@ -257,12 +257,12 @@ export const CreateAnalyticsBucketForm = ({
       </Section>
 
       <Footer>
-        <Button type="default" disabled={isCreating} onClick={() => onOpenChange(false)}>
+        <Button variant="default" disabled={isCreating} onClick={() => onOpenChange(false)}>
           Cancel
         </Button>
         <Button
           form={formId}
-          htmlType="submit"
+          type="submit"
           loading={isCreating}
           disabled={wrappersExtensionNeedsUpgrading || isCreating}
         >
diff --git a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeader.tsx b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeader.tsx
index b5c158af756..a172e4309cc 100644
--- a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeader.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeader.tsx
@@ -218,7 +218,7 @@ export const BucketFilePickerHeader = () => {
                 <Button
                   icon={<ArrowLeft size={16} strokeWidth={2} />}
                   size="tiny"
-                  type="text"
+                  variant="text"
                   className="shrink-0 px-1"
                   disabled={backDisabled}
                   onClick={() => {
@@ -239,7 +239,7 @@ export const BucketFilePickerHeader = () => {
               <Button
                 size="tiny"
                 icon={<RefreshCw />}
-                type="text"
+                variant="text"
                 loading={isRefreshing}
                 onClick={refreshData}
               >
@@ -249,7 +249,7 @@ export const BucketFilePickerHeader = () => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    type="text"
+                    variant="text"
                     icon={
                       view === 'LIST' ? (
                         <List size={16} strokeWidth={2} />
@@ -317,7 +317,7 @@ export const BucketFilePickerHeader = () => {
               </div>
               <ButtonTooltip
                 icon={<Upload size={16} strokeWidth={2} />}
-                type="text"
+                variant="text"
                 disabled={!canUpdateStorage}
                 loading={isUploading}
                 onClick={onSelectUpload}
@@ -346,7 +346,7 @@ export const BucketFilePickerHeader = () => {
                     <Button
                       key="cancel"
                       size="tiny"
-                      type="text"
+                      variant="text"
                       icon={<X />}
                       onClick={onCancelSearch}
                       className="p-0 h-5 w-5"
@@ -361,7 +361,7 @@ export const BucketFilePickerHeader = () => {
                 <Button
                   icon={<Search />}
                   size="tiny"
-                  type="text"
+                  variant="text"
                   className="px-1"
                   onClick={toggleSearch}
                 />
diff --git a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeaderSelection.tsx b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeaderSelection.tsx
index db44a8a8722..02a3969b96d 100644
--- a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeaderSelection.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeaderSelection.tsx
@@ -10,7 +10,7 @@ export const BucketFilePickerHeaderSelection = () => {
     <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-400 px-2 py-1 shadow in-data-[theme*=dark]:bg-brand-500">
       <Button
         icon={<X size={16} strokeWidth={2} />}
-        type="text"
+        variant="text"
         onClick={() => clearSelectedItems()}
         aria-label="Clear selected items"
       />
diff --git a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx
index 15a6f353a90..86390fc6ad9 100644
--- a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx
@@ -118,7 +118,7 @@ export const BucketsPicker = ({
                   />
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button type="default" icon={<ArrowDownNarrowWide />}>
+                      <Button variant="default" icon={<ArrowDownNarrowWide />}>
                         Sorted by {sortBucket === 'alphabetical' ? 'name' : 'created at'}
                       </Button>
                     </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/index.tsx b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/index.tsx
index a4675196516..5c5fcab384e 100644
--- a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/index.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/index.tsx
@@ -38,7 +38,7 @@ export function BucketsPickerDialog({
         <Sheet open={open} onOpenChange={onOpenChange}>
           <SheetContent side="bottom" className="flex h-[85vh] flex-col gap-0 p-0">
             <SheetHeader className="flex flex-row items-center gap-2 border-b border-overlay px-4 py-3 text-left">
-              <Button type="text" size="tiny" className="shrink-0">
+              <Button variant="text" size="tiny" className="shrink-0">
                 Buckets
               </Button>
               <SheetTitle className="min-w-0 flex-1 text-left">Select a bucket</SheetTitle>
@@ -55,7 +55,7 @@ export function BucketsPickerDialog({
             className="flex h-[85vh] max-h-[500px] max-w-5xl flex-col gap-0 overflow-hidden p-0"
           >
             <DialogHeader className="flex flex-row items-center gap-2 border-b border-overlay px-6 py-4">
-              <Button type="text" size="tiny" className="shrink-0">
+              <Button variant="text" size="tiny" className="shrink-0">
                 Buckets
               </Button>
               <DialogTitle className="min-w-0 flex-1">Select a bucket</DialogTitle>
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index ad4a40a72f3..411204e7e6d 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -399,12 +399,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
         </Form>
 
         <DialogFooter>
-          <Button type="default" disabled={isCreatingBucket} onClick={() => onOpenChange(false)}>
+          <Button variant="default" disabled={isCreatingBucket} onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button
             form={formId}
-            htmlType="submit"
+            type="submit"
             loading={isCreatingBucket}
             disabled={isCreatingBucket}
           >
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index a51cf1e49d7..bb827d0e4dc 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -428,10 +428,10 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
         </Form>
 
         <DialogFooter>
-          <Button type="default" disabled={isUpdating} onClick={closeModal}>
+          <Button variant="default" disabled={isUpdating} onClick={closeModal}>
             Cancel
           </Button>
-          <Button form={formId} htmlType="submit" loading={isUpdating}>
+          <Button form={formId} type="submit" loading={isUpdating}>
             Save
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx b/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx
index 83641e7222d..22eef639108 100644
--- a/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx
@@ -70,10 +70,10 @@ export const EmptyBucketModal = ({ visible, bucket, onClose }: EmptyBucketModalP
           </p>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" disabled={isPending} onClick={onClose}>
+          <Button variant="default" disabled={isPending} onClick={onClose}>
             Cancel
           </Button>
-          <Button type="danger" loading={isPending} onClick={onEmptyBucket}>
+          <Button variant="danger" loading={isPending} onClick={onEmptyBucket}>
             Empty bucket
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx
index 31f3c40adae..94fb01eb6c3 100644
--- a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx
+++ b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx
@@ -144,7 +144,7 @@ export const FilesBuckets = () => {
                         </ShortcutTooltip>
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                            <Button type="default" icon={<ArrowDownNarrowWide />}>
+                            <Button variant="default" icon={<ArrowDownNarrowWide />}>
                               Sorted by {sortBucket === 'alphabetical' ? 'name' : 'created at'}
                             </Button>
                           </DropdownMenuTrigger>
@@ -167,7 +167,7 @@ export const FilesBuckets = () => {
                           side="bottom"
                         >
                           <Button
-                            type="default"
+                            variant="default"
                             icon={<RefreshCw />}
                             loading={isFetchingBuckets}
                             onClick={handleRefresh}
diff --git a/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx
index dcda0a31314..bce965cd7ed 100644
--- a/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx
@@ -202,10 +202,10 @@ export const ImportForeignSchemaDialog = ({
               />
             </DialogSection>
             <DialogFooter className="flex items-center space-x-2 justify-end">
-              <Button type="default" htmlType="button" disabled={loading} onClick={onClose}>
+              <Button variant="default" type="button" disabled={loading} onClick={onClose}>
                 Cancel
               </Button>
-              <Button type="primary" htmlType="submit" loading={loading}>
+              <Button variant="primary" type="submit" loading={loading}>
                 Create
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/interfaces/Storage/NewBucketButton.tsx b/apps/studio/components/interfaces/Storage/NewBucketButton.tsx
index 06f56b37317..4a9b39b2183 100644
--- a/apps/studio/components/interfaces/Storage/NewBucketButton.tsx
+++ b/apps/studio/components/interfaces/Storage/NewBucketButton.tsx
@@ -16,7 +16,7 @@ export const CreateBucketButton = ({
     <ButtonTooltip
       block
       size="tiny"
-      type="primary"
+      variant="primary"
       className="w-fit"
       icon={<Plus size={14} />}
       disabled={!canCreateBuckets}
diff --git a/apps/studio/components/interfaces/Storage/PublicBucketWarning.tsx b/apps/studio/components/interfaces/Storage/PublicBucketWarning.tsx
index b4577740c69..ad3374cac2d 100644
--- a/apps/studio/components/interfaces/Storage/PublicBucketWarning.tsx
+++ b/apps/studio/components/interfaces/Storage/PublicBucketWarning.tsx
@@ -174,10 +174,10 @@ function PublicBucketWarningView(props: PublicBucketWarningViewProps): ReactNode
         }
         actions={
           <div className="flex gap-2">
-            <Button type="default" size="tiny" onClick={onDismiss}>
+            <Button variant="default" size="tiny" onClick={onDismiss}>
               Dismiss
             </Button>
-            <Button type="warning" size="tiny" onClick={onShowModal}>
+            <Button variant="warning" size="tiny" onClick={onShowModal}>
               Remove policy
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx b/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx
index 7b27228196c..1ae65ef4d8d 100644
--- a/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx
@@ -29,7 +29,7 @@ const StorageBucketsError = ({ error }: StorageBucketsErrorProps) => {
             </>
           }
           actions={
-            <Button key="contact-support" asChild type="default" className="ml-4">
+            <Button key="contact-support" asChild variant="default" className="ml-4">
               <SupportLink
                 queryParams={{
                   projectRef: ref,
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx
index 959ccd1f167..523eb7c4830 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx
@@ -147,15 +147,15 @@ export const CustomExpiryModal = () => {
             )}
           </DialogSection>
           <DialogFooter>
-            <Button type="default" onClick={handleClose}>
+            <Button variant="default" onClick={handleClose}>
               Cancel
             </Button>
             <Button
               form={formId}
               disabled={!isDirty || isSubmitting}
               loading={isSubmitting}
-              htmlType="submit"
-              type="primary"
+              type="submit"
+              variant="primary"
             >
               Get signed URL
             </Button>
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
index 559a7fa86dc..f7d1780024d 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
@@ -118,10 +118,10 @@ const NavigateDialog = ({
           </FieldDescription>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" onClick={onCancel}>
+          <Button variant="default" onClick={onCancel}>
             Cancel
           </Button>
-          <Button type="primary" onClick={onSubmit}>
+          <Button variant="primary" onClick={onSubmit}>
             Navigate
           </Button>
         </DialogFooter>
@@ -303,7 +303,7 @@ export const FileExplorerHeader = ({
             {isListView && !isBucketRoot && (
               <Button
                 size="tiny"
-                type="outline"
+                variant="outline"
                 aria-label="Go up one level"
                 className="w-7 shrink-0 px-1"
                 icon={<ArrowLeft size={14} />}
@@ -324,7 +324,7 @@ export const FileExplorerHeader = ({
                       <Button
                         key="cancel"
                         size="tiny"
-                        type="text"
+                        variant="text"
                         icon={<X />}
                         onClick={onCancelSearch}
                         className="p-0 h-5 w-5"
@@ -346,7 +346,7 @@ export const FileExplorerHeader = ({
                 <Button
                   size="tiny"
                   icon={<Edit2 />}
-                  type="outline"
+                  variant="outline"
                   aria-label="Navigate"
                   className="w-7 px-1"
                   disabled={isPathDialogOpen || loading.isLoading}
@@ -357,7 +357,7 @@ export const FileExplorerHeader = ({
                 <Button
                   size="tiny"
                   icon={<RefreshCw />}
-                  type="outline"
+                  variant="outline"
                   aria-label="Reload"
                   className="w-7 px-1"
                   loading={isRefreshing}
@@ -368,7 +368,7 @@ export const FileExplorerHeader = ({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    type="outline"
+                    variant="outline"
                     size="tiny"
                     aria-label="View options"
                     className="w-7 px-1"
@@ -431,7 +431,7 @@ export const FileExplorerHeader = ({
               >
                 <ButtonTooltip
                   icon={<FolderPlus size={16} />}
-                  type="outline"
+                  variant="outline"
                   disabled={!canUpdateStorage || breadcrumbs.length === 0}
                   onClick={() => addNewFolderPlaceholder(-1)}
                   tooltip={{
@@ -453,7 +453,7 @@ export const FileExplorerHeader = ({
               >
                 <ButtonTooltip
                   icon={<Upload size={16} />}
-                  type="primary"
+                  variant="primary"
                   disabled={!canUpdateStorage || breadcrumbs.length === 0}
                   onClick={onSelectUpload}
                   tooltip={{
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
index 155d1be59d1..d715fcaa178 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
@@ -32,7 +32,7 @@ export const FileExplorerHeaderSelection = () => {
       <div className="ml-auto flex items-center gap-1">
         <ShortcutTooltip shortcutId={SHORTCUT_IDS.STORAGE_EXPLORER_DOWNLOAD_SELECTED} side="bottom">
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             icon={<Download size={12} />}
             onClick={async () => {
@@ -53,7 +53,7 @@ export const FileExplorerHeaderSelection = () => {
           open={!canUpdateFiles ? false : undefined}
         >
           <ButtonTooltip
-            type="default"
+            variant="default"
             size="tiny"
             icon={<Trash2 size={12} />}
             disabled={!canUpdateFiles}
@@ -77,7 +77,7 @@ export const FileExplorerHeaderSelection = () => {
           open={!canUpdateFiles ? false : undefined}
         >
           <ButtonTooltip
-            type="default"
+            variant="default"
             size="tiny"
             icon={<Move size={12} />}
             disabled={!canUpdateFiles}
@@ -94,7 +94,7 @@ export const FileExplorerHeaderSelection = () => {
         </ShortcutTooltip>
 
         <Button
-          type="text"
+          variant="text"
           size="tiny"
           icon={<X size={12} />}
           title="Clear selection"
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/MoveItemsModal.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/MoveItemsModal.tsx
index dfd7e18fa14..b75ecf32940 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/MoveItemsModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/MoveItemsModal.tsx
@@ -89,10 +89,10 @@ export const MoveItemsModal = ({
           </form>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" onClick={onSelectCancel}>
+          <Button variant="default" onClick={onSelectCancel}>
             Cancel
           </Button>
-          <Button type="primary" loading={moving} onClick={onConfirmMove}>
+          <Button variant="primary" loading={moving} onClick={onConfirmMove}>
             {moving ? 'Moving files' : 'Move files'}
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx
index 49ceb6c3289..169ac370453 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx
@@ -187,7 +187,7 @@ export const PreviewPane = () => {
         {/* Actions */}
         <div className="flex space-x-2 border-b border-overlay pb-4">
           <Button
-            type="default"
+            variant="default"
             icon={<Download />}
             disabled={file.isCorrupted}
             onClick={() => downloadFile(file)}
@@ -196,7 +196,7 @@ export const PreviewPane = () => {
           </Button>
           {selectedBucket.public ? (
             <Button
-              type="outline"
+              variant="outline"
               icon={<Copy />}
               onClick={() => onCopyUrl(file.path!)}
               disabled={file.isCorrupted}
@@ -207,7 +207,7 @@ export const PreviewPane = () => {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="outline"
+                  variant="outline"
                   icon={<Copy />}
                   iconRight={<ChevronDown />}
                   disabled={file.isCorrupted}
@@ -245,7 +245,7 @@ export const PreviewPane = () => {
           )}
         </div>
         <ButtonTooltip
-          type="outline"
+          variant="outline"
           disabled={!canUpdateFiles}
           size="tiny"
           icon={<Trash2 />}
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
index c108305c716..71a38c40a86 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
@@ -67,7 +67,7 @@ export const StoragePoliciesBucketRow = forwardRef<HTMLDivElement, StoragePolici
               )}
             </div>
           </div>
-          <Button type="outline" onClick={() => onSelectPolicyAdd(bucket?.name, table)}>
+          <Button variant="outline" onClick={() => onSelectPolicyAdd(bucket?.name, table)}>
             New policy
           </Button>
         </CardHeader>
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
index fd54cd1a8b9..c0dc1be5a37 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
@@ -103,7 +103,7 @@ export const BucketsPolicies = ({
                     search ? (
                       <Button
                         size="tiny"
-                        type="text"
+                        variant="text"
                         className="p-0 h-5 w-5"
                         icon={<X />}
                         onClick={() => setSearch('')}
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
index 57bd1b4e1e2..93e400ed95b 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
@@ -134,10 +134,10 @@ const PolicyAllowedOperations = ({ allowedOperations = [], onToggleOperation = (
 
 const PolicyEditorFooter = ({ onViewTemplates = () => {}, onReviewPolicy = () => {} }) => (
   <div className="flex w-full items-center justify-end gap-x-2 border-t px-6 py-3 border-default">
-    <Button type="default" onClick={onViewTemplates}>
+    <Button variant="default" onClick={onViewTemplates}>
       View templates
     </Button>
-    <Button type="primary" onClick={onReviewPolicy}>
+    <Button variant="primary" onClick={onReviewPolicy}>
       Review
     </Button>
   </div>
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx
index 1bb8fb426dc..92f3c5d192a 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx
@@ -57,11 +57,11 @@ const StoragePoliciesReview = ({
       </DialogSection>
       <DialogSectionSeparator />
       <DialogFooter>
-        <Button type="default" onClick={onSelectBack}>
+        <Button variant="default" onClick={onSelectBack}>
           Back to edit
         </Button>
         {policyStatements.length > 0 && (
-          <Button type="primary" onClick={onSavePolicy} loading={isSaving}>
+          <Button variant="primary" onClick={onSavePolicy} loading={isSaving}>
             Save policy
           </Button>
         )}
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
index 86b92480112..4353218abc6 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
@@ -88,7 +88,7 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
         <TooltipTrigger asChild>
           <DialogTrigger asChild>
             <Button
-              type="default"
+              variant="default"
               icon={<Plus size={14} />}
               disabled={disableCreation}
               className="pointer-events-auto"
@@ -172,7 +172,7 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
                   />
                 </DialogSection>
                 <DialogFooter>
-                  <Button htmlType="submit" loading={isCreating}>
+                  <Button type="submit" loading={isCreating}>
                     Create access key
                   </Button>
                 </DialogFooter>
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/RevokeCredentialModal.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/RevokeCredentialModal.tsx
index 6fd18b74444..cdf8d92635e 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/RevokeCredentialModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/RevokeCredentialModal.tsx
@@ -48,11 +48,11 @@ export const RevokeCredentialModal = ({
           </DialogDescription>
         </DialogSection>
         <DialogFooter className="flex justify-end gap-x-1">
-          <Button type="outline" onClick={() => onClose()}>
+          <Button variant="outline" onClick={() => onClose()}>
             Cancel
           </Button>
           <Button
-            type="danger"
+            variant="danger"
             loading={isDeleting}
             onClick={async () => {
               if (!selectedCredential) return
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
index c484289147d..97ff713cd8f 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
@@ -220,8 +220,8 @@ export const S3Connection = () => {
                     <CardFooter className="justify-end space-x-2">
                       {form.formState.isDirty && (
                         <Button
-                          type="default"
-                          htmlType="reset"
+                          variant="default"
+                          type="reset"
                           onClick={() => form.reset()}
                           disabled={
                             !form.formState.isDirty || !canUpdateStorageSettings || isUpdating
@@ -231,8 +231,8 @@ export const S3Connection = () => {
                         </Button>
                       )}
                       <Button
-                        type="primary"
-                        htmlType="submit"
+                        variant="primary"
+                        type="submit"
                         loading={isUpdating}
                         disabled={
                           !form.formState.isDirty || !canUpdateStorageSettings || isUpdating
@@ -250,7 +250,7 @@ export const S3Connection = () => {
                       To connect to your S3 bucket, you need to restore your project.
                     </AlertDescription>
                     <div className="mt-3 flex items-center space-x-2">
-                      <Button asChild type="default">
+                      <Button asChild variant="default">
                         <Link href={`/project/${projectRef}`}>Restore project</Link>
                       </Button>
                     </div>
@@ -287,7 +287,7 @@ export const S3Connection = () => {
                   To fetch your S3 access keys, you need to restore your project.
                 </AlertDescription>
                 <AlertDescription>
-                  <Button asChild type="default" className="mt-3">
+                  <Button asChild variant="default" className="mt-3">
                     <Link href={`/project/${projectRef}`}>Restore project</Link>
                   </Button>
                 </AlertDescription>
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageCredItem.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageCredItem.tsx
index 59dd670cada..31e324d0b6d 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageCredItem.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageCredItem.tsx
@@ -63,7 +63,7 @@ export const StorageCredItem = ({
             <DropdownMenuTrigger asChild>
               <Button
                 icon={<MoreVertical size={14} strokeWidth={1} />}
-                type="text"
+                variant="text"
                 className="px-1.5 text-foreground-lighter hover:text-foreground"
               />
             </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx
index 4980f6e0891..33ae91b104e 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx
@@ -95,7 +95,7 @@ const StorageListV2MigrationDialog = () => {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <ButtonTooltip
-          type="primary"
+          variant="primary"
           disabled={!canUpdateStorageSettings}
           tooltip={{
             content: {
@@ -151,10 +151,10 @@ const StorageListV2MigrationDialog = () => {
         </DialogSection>
 
         <DialogFooter>
-          <Button type="default" disabled={isUpdating} onClick={() => setOpen(false)}>
+          <Button variant="default" disabled={isUpdating} onClick={() => setOpen(false)}>
             Cancel
           </Button>
-          <Button type="primary" loading={isUpdating} onClick={() => onConfirmUpgrade()}>
+          <Button variant="primary" loading={isUpdating} onClick={() => onConfirmUpgrade()}>
             Upgrade now
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
index 036484755bb..10b43f424a8 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
@@ -462,8 +462,8 @@ export const StorageSettings = () => {
                         <CardFooter className="justify-end space-x-2">
                           {form.formState.isDirty && (
                             <Button
-                              type="default"
-                              htmlType="reset"
+                              variant="default"
+                              type="reset"
                               onClick={() => form.reset()}
                               disabled={
                                 !form.formState.isDirty || !canUpdateStorageSettings || isUpdating
@@ -473,8 +473,8 @@ export const StorageSettings = () => {
                             </Button>
                           )}
                           <Button
-                            type={hasLimitedStorageAccess ? 'default' : 'primary'}
-                            htmlType="submit"
+                            variant={hasLimitedStorageAccess ? 'default' : 'primary'}
+                            type="submit"
                             loading={isUpdating}
                             disabled={
                               !canUpdateStorageSettings || isUpdating || !form.formState.isDirty
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx
index f62723970cc..f35171dd771 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx
@@ -220,10 +220,10 @@ export const CreateVectorBucketDialog = ({
         </Form>
 
         <DialogFooter>
-          <Button type="default" disabled={isLoading} onClick={() => setVisible(false)}>
+          <Button variant="default" disabled={isLoading} onClick={() => setVisible(false)}>
             Cancel
           </Button>
-          <Button form={formId} htmlType="submit" loading={isLoading}>
+          <Button form={formId} type="submit" loading={isLoading}>
             Create
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
index a8ff4e49bd9..d642e0a5689 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
@@ -200,7 +200,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
         <ButtonTooltip
           block
           size="tiny"
-          type="primary"
+          variant="primary"
           className="w-fit"
           icon={<Plus size={14} />}
           disabled={!canCreateBuckets}
@@ -373,7 +373,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                       />
                     </div>
                     <Button
-                      type="text"
+                      variant="text"
                       className="w-[34px] h-[34px]" // Match the height of the input
                       size="tiny"
                       icon={<Trash2 size={12} />}
@@ -383,7 +383,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                 ))}
               </div>
               <div className="flex items-center justify-center rounded-sm border border-strong border-dashed py-3">
-                <Button type="default" size="tiny" onClick={() => append({ value: '' })}>
+                <Button variant="default" size="tiny" onClick={() => append({ value: '' })}>
                   Add metadata key
                 </Button>
               </div>
@@ -392,12 +392,12 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
         </Form>
 
         <SheetFooter>
-          <Button type="default" disabled={isCreating} onClick={() => setVisible(false)}>
+          <Button variant="default" disabled={isCreating} onClick={() => setVisible(false)}>
             Cancel
           </Button>
           <Button
             form={formId}
-            htmlType="submit"
+            type="submit"
             loading={isCreating}
             disabled={isCreating || !bucketName}
           >
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx
index 6c963607987..a4531aee9cb 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx
@@ -140,7 +140,7 @@ export const InitializeForeignSchemaDialog = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button type="default">Query from Postgres</Button>
+        <Button variant="default">Query from Postgres</Button>
       </DialogTrigger>
       <DialogContent size="medium" aria-describedby={undefined}>
         <Form {...form}>
@@ -168,10 +168,10 @@ export const InitializeForeignSchemaDialog = () => {
             <DialogFooter className="justify-between!">
               <DocsButton href={`${DOCS_URL}/guides/storage/vector/querying-vectors`} />
               <div className="flex items-center gap-x-2">
-                <Button type="default" disabled={isCreating} onClick={() => setIsOpen(false)}>
+                <Button variant="default" disabled={isCreating} onClick={() => setIsOpen(false)}>
                   Cancel
                 </Button>
-                <Button htmlType="submit" type="primary" loading={isCreating}>
+                <Button type="submit" variant="primary" loading={isCreating}>
                   Create schema
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketCallouts.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketCallouts.tsx
index 06afe8742b9..05b68cda245 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketCallouts.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketCallouts.tsx
@@ -36,7 +36,7 @@ export const ExtensionNotInstalled = ({
             Learn more
           </InlineLink>
         </p>
-        <Button type="default" asChild className="mt-2">
+        <Button variant="default" asChild className="mt-2">
           <Link
             href={
               databaseNeedsUpgrading
@@ -80,7 +80,7 @@ export const ExtensionNeedsUpgrade = ({
           Before reinstalling the wrapper extension, you must first remove all existing wrappers.
           Afterward, you can recreate the wrappers.
         </p>
-        <Button asChild type="default">
+        <Button asChild variant="default">
           <Link
             href={
               databaseNeedsUpgrading
@@ -115,7 +115,7 @@ export const WrapperMissing = ({ bucketName }: { bucketName?: string }) => {
     <ScaffoldSection isFullWidth>
       <Admonition type="warning" title="Missing integration">
         <p>The S3 Vectors Wrapper integration is required in order to query vector tables.</p>
-        <Button type="default" loading={isCreatingS3VectorsWrapper} onClick={onSetupWrapper}>
+        <Button variant="default" loading={isCreatingS3VectorsWrapper} onClick={onSetupWrapper}>
           Install wrapper
         </Button>
       </Admonition>
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
index 50189738df3..9f19a022317 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
@@ -58,7 +58,7 @@ export const VectorBucketTableExamplesSheet = ({ index }: VectorBucketTableExamp
     <Sheet open={open} onOpenChange={setOpen}>
       {/* Move into overflow menu after vectors added */}
       <SheetTrigger asChild>
-        <Button type="default" icon={<ListPlus size={12} className="text-foreground-lighter" />}>
+        <Button variant="default" icon={<ListPlus size={12} className="text-foreground-lighter" />}>
           Insert vectors
         </Button>
       </SheetTrigger>
@@ -219,7 +219,7 @@ const result = await index.putVectors({
                   Language
                 </span>
                 <Button
-                  type="default"
+                  variant="default"
                   iconRight={<ChevronDown size={14} strokeWidth={2} />}
                   className="rounded-l-none"
                 >
@@ -269,7 +269,7 @@ const result = await index.putVectors({
             title="Insert data via SQL with a Foreign Data Wrapper"
             description="Data from vector tables can be queried and inserted from Postgres with the S3 Vectors Wrapper as foreign tables."
             actions={
-              <Button type="default" onClick={onSelectQueryFromPostgres}>
+              <Button variant="default" onClick={onSelectQueryFromPostgres}>
                 Query from Postgres
               </Button>
             }
@@ -285,7 +285,7 @@ const result = await index.putVectors({
             />
             <div className="flex justify-end">
               <Button
-                type="default"
+                variant="default"
                 asChild
                 icon={<SqlEditor size={12} className="text-foreground-lighter" />}
               >
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx
index 1c888edf7eb..e125a56697c 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx
@@ -225,7 +225,7 @@ export const VectorBucketDetails = () => {
                                 <DropdownMenu>
                                   <DropdownMenuTrigger asChild>
                                     <Button
-                                      type="default"
+                                      variant="default"
                                       className="w-7"
                                       icon={<MoreVertical />}
                                       onClick={(e) => e.stopPropagation()}
@@ -305,7 +305,7 @@ export const VectorBucketDetails = () => {
                   </p>
                 </div>
                 <Button
-                  type="danger"
+                  variant="danger"
                   disabled={!isSuccessBucket}
                   onClick={() => setShowDeleteModal(true)}
                 >
diff --git a/apps/studio/components/interfaces/Support/AIAssistantOption.tsx b/apps/studio/components/interfaces/Support/AIAssistantOption.tsx
index 0557e1b0790..573a8a0e3ba 100644
--- a/apps/studio/components/interfaces/Support/AIAssistantOption.tsx
+++ b/apps/studio/components/interfaces/Support/AIAssistantOption.tsx
@@ -64,7 +64,7 @@ export const AIAssistantOption = ({
                 {onClick ? (
                   <Button
                     size="tiny"
-                    type="default"
+                    variant="default"
                     icon={<AiIconAnimation size={14} />}
                     onClick={onAiAssistantClicked}
                   >
@@ -72,7 +72,7 @@ export const AIAssistantOption = ({
                   </Button>
                 ) : (
                   <Link href={aiLink} onClick={onAiAssistantClicked}>
-                    <Button size="tiny" type="default" icon={<AiIconAnimation size={14} />}>
+                    <Button size="tiny" variant="default" icon={<AiIconAnimation size={14} />}>
                       Ask the Assistant
                     </Button>
                   </Link>
diff --git a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx b/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
index 4c59fe8fc2a..43a644c0fc0 100644
--- a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
@@ -96,7 +96,11 @@ const LibrarySuggestions = ({ library }: LibrarySuggestionsProps) => {
                 </p>
               </div>
               <div>
-                <Button asChild type="default" icon={<ExternalLink size={14} strokeWidth={1.5} />}>
+                <Button
+                  asChild
+                  variant="default"
+                  icon={<ExternalLink size={14} strokeWidth={1.5} />}
+                >
                   <Link href={lib.url} target="_blank" rel="noreferrer">
                     View GitHub issues
                   </Link>
@@ -116,7 +120,7 @@ const LibrarySuggestions = ({ library }: LibrarySuggestionsProps) => {
             <p className="text-sm text-foreground-light">For any issues about our API</p>
           </div>
           <div>
-            <Button asChild type="default" icon={<ExternalLink size={14} strokeWidth={1.5} />}>
+            <Button asChild variant="default" icon={<ExternalLink size={14} strokeWidth={1.5} />}>
               <Link href="https://github.com/supabase/supabase" target="_blank" rel="noreferrer">
                 View GitHub issues
               </Link>
diff --git a/apps/studio/components/interfaces/Support/DiscordCTACard.tsx b/apps/studio/components/interfaces/Support/DiscordCTACard.tsx
index 08987e7f1b9..bc9d1a6167f 100644
--- a/apps/studio/components/interfaces/Support/DiscordCTACard.tsx
+++ b/apps/studio/components/interfaces/Support/DiscordCTACard.tsx
@@ -63,7 +63,7 @@ export const DiscordCTACard = ({ organizationSlug }: DiscordCTACardProps) => {
                 <Link href="https://discord.supabase.com" target="_blank" rel="noreferrer">
                   <Button
                     size="tiny"
-                    type="secondary"
+                    variant="secondary"
                     icon={
                       <SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />
                     }
diff --git a/apps/studio/components/interfaces/Support/IPV4SuggestionAlert.tsx b/apps/studio/components/interfaces/Support/IPV4SuggestionAlert.tsx
index 8e6dea6eaa0..3926d620596 100644
--- a/apps/studio/components/interfaces/Support/IPV4SuggestionAlert.tsx
+++ b/apps/studio/components/interfaces/Support/IPV4SuggestionAlert.tsx
@@ -17,7 +17,7 @@ export const IPV4SuggestionAlert = () => {
           questions.
         </p>
         <p>
-          <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+          <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
             <Link
               target="_blank"
               rel="noreferrer"
diff --git a/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx b/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx
index a5e88c04735..a0e59404a07 100644
--- a/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx
+++ b/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx
@@ -88,7 +88,7 @@ export function IncidentAdmonition({ isActive, className }: IncidentAdmonitionPr
             title={statusTitle}
             description={getStatusDescription(overallStatus, hasMultipleIncidents, allSameStatus)}
             actions={
-              <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+              <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
                 <Link href="https://status.supabase.com/" target="_blank" rel="noreferrer">
                   Status page
                 </Link>
diff --git a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
index 4df96058116..66fc1037f3d 100644
--- a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
+++ b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
@@ -158,8 +158,8 @@ export const LinkSupportTicketForm = ({
         <div className="px-6 py-8">
           <Button
             block
-            type="primary"
-            htmlType="submit"
+            variant="primary"
+            type="submit"
             size="large"
             icon={<Link2 />}
             loading={isPending}
diff --git a/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx b/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx
index 9ad1a14a827..b0478b0eda0 100644
--- a/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx
+++ b/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx
@@ -72,7 +72,7 @@ function LinkSupportTicketSuccess() {
       </div>
       <DialogSectionSeparator />
       <div className="w-full py-4 px-4 flex items-center justify-end">
-        <Button asChild type="default">
+        <Button asChild variant="default">
           <Link href="/">Finish</Link>
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
index 0bf5b9c1014..b9edd290bff 100644
--- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
@@ -84,7 +84,7 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
                 return (
                   <Button
                     block
-                    type="default"
+                    variant="default"
                     role="combobox"
                     aria-label="Select a project"
                     aria-expanded={open}
@@ -150,7 +150,7 @@ function ProjectRefHighlighted({ projectRef }: ProjectRefHighlightedProps) {
           </p>
           <CopyButton
             iconOnly
-            type="text"
+            variant="text"
             text={projectRef}
             onClick={() => toast.success('Copied project ID to clipboard')}
           />
@@ -207,7 +207,7 @@ export const PlanExpectationInfoContent = ({
               Upgrade plan
             </Link>
           </Button>
-          <Button asChild type="default" size="tiny" icon={<ExternalLink />}>
+          <Button asChild variant="default" size="tiny" icon={<ExternalLink />}>
             <Link href="https://supabase.com/contact/enterprise" target="_blank" rel="noreferrer">
               Enquire about Enterprise
             </Link>
diff --git a/apps/studio/components/interfaces/Support/SubmitButton.tsx b/apps/studio/components/interfaces/Support/SubmitButton.tsx
index 5dfb36923dd..3a1a020c997 100644
--- a/apps/studio/components/interfaces/Support/SubmitButton.tsx
+++ b/apps/studio/components/interfaces/Support/SubmitButton.tsx
@@ -21,7 +21,7 @@ export function SubmitButton({
   return (
     <div className={cn('flex flex-col gap-3', className)}>
       <Button
-        htmlType="submit"
+        type="submit"
         size="small"
         block
         disabled={isSubmitting}
diff --git a/apps/studio/components/interfaces/Support/Success.tsx b/apps/studio/components/interfaces/Support/Success.tsx
index ff4b84737dd..0a258a7acc1 100644
--- a/apps/studio/components/interfaces/Support/Success.tsx
+++ b/apps/studio/components/interfaces/Support/Success.tsx
@@ -32,11 +32,11 @@ export const Success = ({
 
   const finishAction = showFinishAction ? (
     onFinish ? (
-      <Button type="default" onClick={onFinish}>
+      <Button variant="default" onClick={onFinish}>
         {finishLabel}
       </Button>
     ) : (
-      <Button asChild type="default">
+      <Button asChild variant="default">
         <Link href="/">{finishLabel}</Link>
       </Button>
     )
@@ -64,7 +64,7 @@ export const Success = ({
         {finishAction}
         <Button
           asChild
-          type="default"
+          variant="default"
           icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
         >
           <Link href="https://discord.supabase.com/" target="_blank">
diff --git a/apps/studio/components/interfaces/Support/SupportFormDirectEmailInfo.tsx b/apps/studio/components/interfaces/Support/SupportFormDirectEmailInfo.tsx
index e6f9d8d4eee..d137aca59a1 100644
--- a/apps/studio/components/interfaces/Support/SupportFormDirectEmailInfo.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormDirectEmailInfo.tsx
@@ -24,7 +24,7 @@ export function SupportFormDirectEmailContent({ projectRef }: SupportFormDirectE
             </code>
           </a>
           <CopyButton
-            type="text"
+            variant="text"
             text="support@supabase.com"
             iconOnly
             onClick={() => toast.success('Copied email address to clipboard')}
@@ -38,7 +38,7 @@ export function SupportFormDirectEmailContent({ projectRef }: SupportFormDirectE
               <code className="text-code-inline !text-foreground-light">{projectRef}</code>
               <CopyButton
                 iconOnly
-                type="text"
+                variant="text"
                 text={projectRef}
                 onClick={() => toast.success('Copied project ID to clipboard')}
               />
diff --git a/apps/studio/components/interfaces/Support/SupportFormPage.tsx b/apps/studio/components/interfaces/Support/SupportFormPage.tsx
index 8181283f5b7..b7ed6b91e26 100644
--- a/apps/studio/components/interfaces/Support/SupportFormPage.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormPage.tsx
@@ -139,7 +139,7 @@ function SupportFormHeader() {
       </div>
 
       <div className="flex items-center gap-x-3">
-        <Button asChild type="default" icon={<Wrench />}>
+        <Button asChild variant="default" icon={<Wrench />}>
           <Link
             href={`${DOCS_URL}/guides/troubleshooting?products=platform`}
             target="_blank"
@@ -152,7 +152,7 @@ function SupportFormHeader() {
           <TooltipTrigger asChild>
             <Button
               asChild
-              type="default"
+              variant="default"
               icon={
                 isLoading ? (
                   <Loader2 className="animate-spin" />
@@ -213,7 +213,7 @@ function SupportFormDirectEmailInfo({ projectRef }: SupportFormDirectEmailInfoPr
                 </code>
               </a>
               <CopyButton
-                type="text"
+                variant="text"
                 text="support@supabase.com"
                 iconOnly
                 onClick={() => toast.success('Copied email address to clipboard')}
@@ -227,7 +227,7 @@ function SupportFormDirectEmailInfo({ projectRef }: SupportFormDirectEmailInfoPr
                 <code className="text-code-inline text-foreground-light!">{projectRef}</code>
                 <CopyButton
                   iconOnly
-                  type="text"
+                  variant="text"
                   text={projectRef}
                   onClick={() => toast.success('Copied project ID to clipboard')}
                 />
diff --git a/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx b/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx
index fa910e1db52..d37ec388a51 100644
--- a/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx
+++ b/apps/studio/components/interfaces/Support/SupportSidebarForm.tsx
@@ -132,7 +132,7 @@ export function SupportFormStatusButton() {
       <TooltipTrigger asChild>
         <Button
           asChild
-          type="default"
+          variant="default"
           size="tiny"
           icon={
             isLoading ? (
diff --git a/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx b/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx
index 54dd57f3450..8f437a013d4 100644
--- a/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx
@@ -303,7 +303,7 @@ const DeleteConfirmationDialogs = ({
                 recursively.
               </AlertTitle>
               <AlertDescription>
-                <Button asChild size="tiny" type="default" icon={<ExternalLink />}>
+                <Button asChild size="tiny" variant="default" icon={<ExternalLink />}>
                   <Link
                     href="https://www.postgresql.org/docs/current/ddl-depend.html"
                     target="_blank"
@@ -364,7 +364,7 @@ const DeleteConfirmationDialogs = ({
                 recursively.
               </AlertDescription>
               <AlertDescription className="mt-4">
-                <Button asChild size="tiny" type="default" icon={<ExternalLink />}>
+                <Button asChild size="tiny" variant="default" icon={<ExternalLink />}>
                   <Link
                     href="https://www.postgresql.org/docs/current/ddl-depend.html"
                     target="_blank"
@@ -497,7 +497,7 @@ const DropEntityConfirmationModal = ({
               recursively.
             </AlertDescription>
             <AlertDescription className="mt-4">
-              <Button asChild size="tiny" type="default" icon={<ExternalLink />}>
+              <Button asChild size="tiny" variant="default" icon={<ExternalLink />}>
                 <Link
                   href="https://www.postgresql.org/docs/current/ddl-depend.html"
                   target="_blank"
diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index c3cb1f011eb..f54d2f3fa50 100644
--- a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -204,7 +204,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
                 {policies.length < 1 && !isSchemaLocked ? (
                   <ButtonTooltip
                     asChild
-                    type="default"
+                    variant="default"
                     className="group"
                     icon={<PlusCircle strokeWidth={1.5} className="text-foreground-muted" />}
                     tooltip={{
@@ -222,7 +222,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
                 ) : (
                   <Button
                     asChild
-                    type={policies.length < 1 && !isSchemaLocked ? 'warning' : 'default'}
+                    variant={policies.length < 1 && !isSchemaLocked ? 'warning' : 'default'}
                     className="group"
                     icon={
                       isSchemaLocked || policies.length > 0 ? (
@@ -251,7 +251,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
             ) : tableHasLints ? (
               <Popover modal={false} open={showWarning} onOpenChange={setShowWarning}>
                 <PopoverTrigger asChild>
-                  <Button type="danger" icon={<Lock strokeWidth={1.5} />}>
+                  <Button variant="danger" icon={<Lock strokeWidth={1.5} />}>
                     RLS disabled
                   </Button>
                 </PopoverTrigger>
@@ -270,7 +270,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
                     </p>
                     {!isSchemaLocked && (
                       <Button
-                        type="default"
+                        variant="default"
                         className="mt-2 w-min"
                         onClick={() => setRlsConfirmModalOpen(!rlsConfirmModalOpen)}
                       >
@@ -299,7 +299,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
           {isForeignTable && table.schema === 'public' && (
             <Popover modal={false} open={showWarning} onOpenChange={setShowWarning}>
               <PopoverTrigger asChild>
-                <Button type="warning" icon={<Unlock strokeWidth={1.5} />}>
+                <Button variant="warning" icon={<Unlock strokeWidth={1.5} />}>
                   Unprotected Data API access
                 </Button>
               </PopoverTrigger>
@@ -315,7 +315,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
                   </p>
 
                   <div className="mt-2">
-                    <Button type="default" asChild>
+                    <Button variant="default" asChild>
                       <Link
                         target="_blank"
                         href={`${DOCS_URL}/guides/database/extensions/wrappers/overview#security`}
@@ -334,7 +334,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 icon={<MoreVertical />}
                 className="h-7 w-7"
                 aria-label="More actions"
diff --git a/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx b/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx
index e96a5cb6d11..4c00de4812c 100644
--- a/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx
@@ -7,7 +7,7 @@ export const IndexAdvisorPopover = () => {
   return (
     <Popover modal={false}>
       <PopoverTrigger asChild>
-        <Button type="default" icon={<Lightbulb strokeWidth={1.5} />}>
+        <Button variant="default" icon={<Lightbulb strokeWidth={1.5} />}>
           Index Advisor
         </Button>
       </PopoverTrigger>
diff --git a/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx b/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx
index 5f1b8545c9a..17e069e6683 100644
--- a/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/InsertButton.tsx
@@ -54,7 +54,7 @@ export const InsertButton = () => {
       <DropdownMenuTrigger asChild>
         <Button
           data-testid="table-editor-insert-new-row"
-          type="primary"
+          variant="primary"
           size="tiny"
           icon={<ChevronDown strokeWidth={1.5} />}
         >
diff --git a/apps/studio/components/interfaces/TableGridEditor/RealtimeToggleDialog.tsx b/apps/studio/components/interfaces/TableGridEditor/RealtimeToggleDialog.tsx
index 8d52df417d1..38498990336 100644
--- a/apps/studio/components/interfaces/TableGridEditor/RealtimeToggleDialog.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/RealtimeToggleDialog.tsx
@@ -108,10 +108,10 @@ export const RealtimeToggleDialog = ({
           </div>
         </DialogSection>
         <DialogFooter>
-          <Button type="default" disabled={isTogglingRealtime} onClick={() => setOpen(false)}>
+          <Button variant="default" disabled={isTogglingRealtime} onClick={() => setOpen(false)}>
             Cancel
           </Button>
-          <Button type="primary" loading={isTogglingRealtime} onClick={toggleRealtime}>
+          <Button variant="primary" loading={isTogglingRealtime} onClick={toggleRealtime}>
             {isRealtimeEnabled ? 'Disable' : 'Enable'} realtime
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SecurityDefinerViewPopover.tsx b/apps/studio/components/interfaces/TableGridEditor/SecurityDefinerViewPopover.tsx
index a5f911f8bb5..d995779512b 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SecurityDefinerViewPopover.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SecurityDefinerViewPopover.tsx
@@ -17,7 +17,7 @@ export const SecurityDefinerViewPopover = ({
   return (
     <Popover modal={false}>
       <PopoverTrigger asChild>
-        <Button type="warning" icon={<Unlock strokeWidth={1.5} />}>
+        <Button variant="warning" icon={<Unlock strokeWidth={1.5} />}>
           Security Definer view
         </Button>
       </PopoverTrigger>
@@ -35,11 +35,11 @@ export const SecurityDefinerViewPopover = ({
 
           <div className="mt-2 flex items-center gap-2">
             {!!onAutofix && (
-              <Button type="secondary" onClick={onAutofix}>
+              <Button variant="secondary" onClick={onAutofix}>
                 Autofix
               </Button>
             )}
-            <Button type="default" asChild>
+            <Button variant="default" asChild>
               <Link
                 target="_blank"
                 rel="noopener noreferrer"
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx
index 43b26fd838b..0e3911a56e4 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx
@@ -59,8 +59,8 @@ export const ActionBar = ({
 
       <div className="flex items-center gap-3 ml-auto">
         <Button
-          type="default"
-          htmlType="button"
+          variant="default"
+          type="button"
           onClick={closePanel}
           disabled={isRunning || loading}
         >
@@ -88,7 +88,7 @@ export const ActionBar = ({
             disabled={loading || disableApply}
             loading={loading}
             data-testid="action-bar-save-row"
-            htmlType="submit"
+            type="submit"
             form={formId}
             iconRight={
               loading ? undefined : <KeyboardShortcut keys={['Meta', 'Enter']} variant="inline" />
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index f7f276487f6..0a223498ba6 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -300,7 +300,7 @@ export const ColumnEditor = ({
                 className="lg:col-span-4!"
                 description={
                   <div className="space-y-2">
-                    <Button asChild type="default" icon={<Plus />}>
+                    <Button asChild variant="default" icon={<Plus />}>
                       <Link
                         target="_blank"
                         rel="noreferrer"
@@ -309,7 +309,7 @@ export const ColumnEditor = ({
                         Create enum types
                       </Link>
                     </Button>
-                    <Button asChild type="default" icon={<ExternalLink />}>
+                    <Button asChild variant="default" icon={<ExternalLink />}>
                       <Link
                         target="_blank"
                         rel="noreferrer"
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
index f59235fde17..c0f21899ff2 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
@@ -119,7 +119,7 @@ const ColumnForeignKey = ({
           </div>
         )}
 
-        <Button type="default" className="w-min" onClick={() => setOpen(true)}>
+        <Button variant="default" className="w-min" onClick={() => setOpen(true)}>
           Add foreign key
         </Button>
       </div>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
index b01df7bc81b..6047f1f7224 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
@@ -189,7 +189,7 @@ const ColumnType = ({
       <Popover modal open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
-            type={error ? 'danger' : 'default'}
+            variant={error ? 'danger' : 'default'}
             role="combobox"
             size={'small'}
             aria-expanded={open}
@@ -314,13 +314,13 @@ const ColumnType = ({
               specific use case.
             </p>
             <div className="flex items-center space-x-2 mt-3">
-              <Button asChild type="default" icon={<ExternalLink />}>
+              <Button asChild variant="default" icon={<ExternalLink />}>
                 <Link href={recommendation.reference} target="_blank" rel="noreferrer">
                   Read more
                 </Link>
               </Button>
               <Button
-                type="primary"
+                variant="primary"
                 onClick={() => onOptionSelect({ format: recommendation.alternative })}
               >
                 Use {recommendation.alternative}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
index 29f730702c7..61617e3e0f5 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
@@ -104,7 +104,7 @@ const InputWithSuggestions = ({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <ButtonTooltip
-                    type="text"
+                    variant="text"
                     size="tiny"
                     tooltip={{
                       content: { text: suggestionsTooltip || 'Suggestions', side: 'bottom' },
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index d70c34c316b..596a20b1937 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -468,7 +468,7 @@ export const ForeignKeySelector = ({
                           </div>
                           <div className="col-span-1 flex justify-end items-center">
                             <Button
-                              type="default"
+                              variant="default"
                               className="px-1"
                               icon={<X />}
                               disabled={fk.columns.length === 1}
@@ -479,7 +479,7 @@ export const ForeignKeySelector = ({
                       ))}
                     </div>
                     <div className="space-y-2">
-                      <Button type="default" onClick={addColumn}>
+                      <Button variant="default" onClick={addColumn}>
                         Add another column
                       </Button>
                       {errors.columns && <p className="text-red-900 text-sm">{errors.columns}</p>}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx
index 3ff0e01c1a3..300ccae2177 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx
@@ -61,7 +61,7 @@ export const AddRowOperationItem = ({
           </div>
         </div>
         <ButtonTooltip
-          type="text"
+          variant="text"
           aria-label="Discard change"
           className="w-7"
           icon={<Undo2 />}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/DeleteRowOperationItem.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/DeleteRowOperationItem.tsx
index 4425a4b5b30..7b9098b64f0 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/DeleteRowOperationItem.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/DeleteRowOperationItem.tsx
@@ -61,7 +61,7 @@ export const DeleteRowOperationItem = ({
           </div>
         </div>
         <ButtonTooltip
-          type="text"
+          variant="text"
           aria-label="Discard change"
           className="w-7"
           icon={<Undo2 />}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx
index 09ea84ec470..1e50aee0f58 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx
@@ -58,7 +58,7 @@ export const OperationItem = ({ operationId, tableId, content }: OperationItemPr
           </div>
         </div>
         <ButtonTooltip
-          type="text"
+          variant="text"
           aria-label="Discard change"
           className="px-1.5"
           icon={<Undo2 />}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationQueueSidePanel.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationQueueSidePanel.tsx
index ae6f95e4510..c9ea968a0c6 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationQueueSidePanel.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationQueueSidePanel.tsx
@@ -53,7 +53,7 @@ export const OperationQueueSidePanel = () => {
 
           <SheetFooter className="justify-between!">
             <Button
-              type="default"
+              variant="default"
               onClick={snap.closeSidePanel}
               iconRight={<KeyboardShortcut keys={['Meta', '.']} variant="inline" />}
             >
@@ -61,7 +61,7 @@ export const OperationQueueSidePanel = () => {
             </Button>
             <div className="flex space-x-3">
               <Button
-                type="default"
+                variant="default"
                 onClick={confirmOnClose}
                 disabled={isSaving || operations.length === 0}
               >
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/index.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/index.tsx
index 82fd0734fbf..ce79d2a17ef 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/index.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/index.tsx
@@ -69,7 +69,7 @@ export const DateTimeInput = ({
           {!disabled && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <InputGroupButton type="default" icon={<Edit />} className="px-1.5" />
+                <InputGroupButton variant="default" icon={<Edit />} className="px-1.5" />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-28 pointer-events-auto">
                 {isNullable && (
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
index 5a009f0a748..25d3c723184 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
@@ -175,7 +175,7 @@ export const ForeignRowSelector = ({
                 <p className="text-xs text-foreground-light">Saving</p>
               </div>
             )}
-            <Button type="text" icon={<X />} className="w-7" onClick={closePanel} />
+            <Button variant="text" icon={<X />} className="w-7" onClick={closePanel} />
           </div>
         </div>
       }
@@ -227,7 +227,7 @@ export const ForeignRowSelector = ({
                     {isNullable && (
                       <div className="pl-3">
                         <Button
-                          type="default"
+                          variant="default"
                           onClick={() => {
                             if (columns?.length === 1) onSelect({ [columns[0].source]: null })
                           }}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/Pagination.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/Pagination.tsx
index 8499412bcc9..5fc1abd4724 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/Pagination.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/Pagination.tsx
@@ -32,7 +32,7 @@ const Pagination = ({
 
       <Button
         icon={<ArrowLeft />}
-        type="outline"
+        variant="outline"
         disabled={page <= 1 || isLoading}
         onClick={onPreviousPage}
         title="Previous Page"
@@ -41,7 +41,7 @@ const Pagination = ({
 
       <Button
         icon={<ArrowRight />}
-        type="outline"
+        variant="outline"
         disabled={hasRunOutOfRows || isLoading}
         onClick={onNextPage}
         title="Next Page"
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
index 39467a3ea3c..636138b553a 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
@@ -154,7 +154,7 @@ export const InputField = ({
             {isEditable && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <InputGroupButton type="default" icon={<Edit />} className="px-1.5" />
+                  <InputGroupButton variant="default" icon={<Edit />} className="px-1.5" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-28">
                   {field.isNullable && (
@@ -216,7 +216,7 @@ export const InputField = ({
               <DropdownMenuTrigger asChild>
                 <InputGroupButton
                   data-testid={`${field.name}-field-actions`}
-                  type="default"
+                  variant="default"
                   icon={<Edit />}
                   className="ml-auto px-1.5"
                 />
@@ -276,8 +276,8 @@ export const InputField = ({
           />
           <InputGroupAddon align="inline-end">
             <InputGroupButton
-              type="default"
-              htmlType="button"
+              variant="default"
+              type="button"
               onClick={() => onEditJson({ column: field.name, value: field.value })}
               icon={isEditable ? <Edit /> : <Eye />}
             >
@@ -406,8 +406,8 @@ export const InputField = ({
         <InputGroupAddon align="inline-end">
           {isTruncated ? (
             <InputGroupButton
-              type="default"
-              htmlType="button"
+              variant="default"
+              type="button"
               onClick={() => onEditJson({ column: field.name, value: field.value })}
               icon={isEditable ? <Edit /> : <Eye />}
             >
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx
index cc52411c09f..1fbc235d376 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx
@@ -141,7 +141,7 @@ export const JsonEditor = ({
             <div className="flex items-center gap-x-2">
               {view === 'edit' && (
                 <ButtonTooltip
-                  type="default"
+                  variant="default"
                   icon={<AlignLeft />}
                   className="px-1"
                   onClick={() => prettify()}
@@ -198,7 +198,7 @@ export const JsonEditor = ({
                 performance issues
               </p>
             </div>
-            <Button type="default" loading={isPending} onClick={loadFullValue}>
+            <Button variant="default" loading={isPending} onClick={loadFullValue}>
               Load full JSON data
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
index 7ec00878a57..a64bdd1bf68 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
@@ -184,7 +184,7 @@ export const TextEditor = ({
                 performance issues
               </p>
             </div>
-            <Button type="default" loading={isPending} onClick={loadFullValue}>
+            <Button variant="default" loading={isPending} onClick={loadFullValue}>
               Load full text data
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx
index f9cb5829531..6f01b870940 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx
@@ -97,7 +97,7 @@ export const SchemaEditor = ({ visible, onSuccess, closePanel }: SchemaEditorPro
         </DialogSection>
         <DialogFooter>
           <Button
-            type="default"
+            variant="default"
             onClick={() => {
               form.reset()
               closePanel()
@@ -107,9 +107,9 @@ export const SchemaEditor = ({ visible, onSuccess, closePanel }: SchemaEditorPro
             Cancel
           </Button>
           <Button
-            type="primary"
+            variant="primary"
             form={formId}
-            htmlType="submit"
+            type="submit"
             loading={isPending}
             disabled={isPending}
           >
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
index 52e25ef9972..2b5e465c415 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
@@ -122,7 +122,7 @@ function FileDetails({ file, parseProgress, removeFile }: FileDetailsProps) {
         <p className="text-sm text-foreground">{file.name}</p>
       </div>
       {parseProgress === 100 ? (
-        <Button type="outline" onClick={removeFile}>
+        <Button variant="outline" onClick={removeFile}>
           Remove File
         </Button>
       ) : (
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetImportConfiguration.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetImportConfiguration.tsx
index 332754996f6..32be6e32f3e 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetImportConfiguration.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetImportConfiguration.tsx
@@ -32,7 +32,7 @@ const SpreadsheetImportConfiguration = ({
           <div className="py-1 flex items-center justify-between">
             <p className="text-sm">Configure import data</p>
             <Button
-              type="text"
+              variant="text"
               aria-label="Toggle import configuration"
               icon={
                 <ChevronDown
@@ -62,7 +62,7 @@ const SpreadsheetImportConfiguration = ({
                 return (
                   <Button
                     key={header}
-                    type={isSelected ? 'primary' : 'default'}
+                    variant={isSelected ? 'primary' : 'default'}
                     aria-label={`Toggle column ${header}`}
                     aria-pressed={isSelected}
                     className={cn('transition', isSelected ? 'opacity-100' : 'opacity-75')}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.utils.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.utils.tsx
index 73302415894..a083f339de4 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.utils.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.utils.tsx
@@ -272,7 +272,7 @@ export function flagInvalidFileImport(file: File): boolean {
       <div className="space-y-1">
         <p>The dashboard currently only supports importing of CSVs below 100MB.</p>
         <p>For bulk data loading, we recommend doing so directly through the database.</p>
-        <Button asChild type="default" icon={<ExternalLink />} className="mt-2!">
+        <Button asChild variant="default" icon={<ExternalLink />} className="mt-2!">
           <Link
             href={`${DOCS_URL}/guides/database/tables#bulk-data-loading`}
             target="_blank"
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx
index f7a6b6e9fcc..45ea0d5d847 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx
@@ -84,7 +84,7 @@ export const SpreadsheetImportPreview = ({
               )}
             </div>
             <Button
-              type="text"
+              variant="text"
               icon={
                 <ChevronDown
                   size={18}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
index eb0ad4ae99e..c1d276ac102 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
@@ -332,7 +332,7 @@ export const ApiAccessToggle = ({
               disabled={isDisabled}
             />
           ) : (
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <Link
                 target="_blank"
                 rel="noopener noreferrer"
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index d203b1232ea..bbc84257119 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -146,7 +146,7 @@ export const Column = ({
           />
           {relations.filter((r) => !r.toRemove).length === 0 ? (
             <Button
-              type="dashed"
+              variant="dashed"
               className="rounded-l-none h-[30px] py-0 px-2"
               onClick={() => onEditForeignKey()}
             >
@@ -155,7 +155,7 @@ export const Column = ({
           ) : (
             <Popover open={open} onOpenChange={setOpen} modal={false}>
               <PopoverTrigger asChild>
-                <Button type="default" className="rounded-l-none h-[30px] py-0 px-2">
+                <Button variant="default" className="rounded-l-none h-[30px] py-0 px-2">
                   <Link size={12} />
                 </Button>
               </PopoverTrigger>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index 14e793ef171..737e78921f3 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -155,7 +155,7 @@ export const ColumnManagement = ({
         <div className="flex items-center justify-between w-full">
           <h5>Columns</h5>
           <div className="flex items-center gap-x-2">
-            <Button asChild type="default" icon={<ExternalLink size={12} strokeWidth={2} />}>
+            <Button asChild variant="default" icon={<ExternalLink size={12} strokeWidth={2} />}>
               <a
                 href={`${DOCS_URL}/guides/database/tables#data-types`}
                 target="_blank"
@@ -169,16 +169,16 @@ export const ColumnManagement = ({
                 <div className="py-3 border-r" />
                 {hasImportContent ? (
                   <div className="flex items-center gap-x-2">
-                    <Button type="default" icon={<Edit />} onClick={onSelectImportData}>
+                    <Button variant="default" icon={<Edit />} onClick={onSelectImportData}>
                       Edit content
                     </Button>
-                    <Button type="danger" icon={<Trash />} onClick={onClearImportContent}>
+                    <Button variant="danger" icon={<Trash />} onClick={onClearImportContent}>
                       Remove content
                     </Button>
                   </div>
                 ) : (
                   <Button
-                    type="default"
+                    variant="default"
                     onClick={() => {
                       onSelectImportData()
                       track('import_data_button_clicked', { tableType: 'New Table' })
@@ -332,7 +332,7 @@ export const ColumnManagement = ({
 
         {!hasImportContent && (
           <div className="flex items-center justify-center rounded-sm border border-strong border-dashed py-3">
-            <Button type="default" onClick={() => onAddColumn()}>
+            <Button variant="default" onClick={() => onAddColumn()}>
               Add column
             </Button>
           </div>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx
index ac21c95669f..613dd94643b 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeyRow.tsx
@@ -60,7 +60,7 @@ export const ForeignKeyRow = ({
             </p>
             <Button
               asChild
-              type="default"
+              variant="default"
               title={`${foreignKey.schema}.${foreignKey.table}`}
               className="py-0.5 px-1.5 font-mono"
               icon={
@@ -105,15 +105,15 @@ export const ForeignKeyRow = ({
       </div>
       {!disabled && (
         <div className="flex items-center gap-x-2">
-          <Button type="default" onClick={onSelectEdit}>
+          <Button variant="default" onClick={onSelectEdit}>
             Edit
           </Button>
           {foreignKey.toRemove ? (
-            <Button type="default" onClick={onSelectUndoRemove}>
+            <Button variant="default" onClick={onSelectUndoRemove}>
               Cancel remove
             </Button>
           ) : (
-            <Button type="default" onClick={onSelectRemove}>
+            <Button variant="default" onClick={onSelectRemove}>
               Remove
             </Button>
           )}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx
index 5907d9d540f..63fc7626aa3 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx
@@ -114,7 +114,7 @@ export const ForeignKeysManagement = ({
               })}
             </div>
             <div className="flex items-center justify-center rounded-sm border border-strong border-dashed py-3">
-              <Button type="default" onClick={() => setOpen(true)}>
+              <Button variant="default" onClick={() => setOpen(true)}>
                 Add foreign key relation
               </Button>
             </div>
diff --git a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx
index cfc55f9a10a..ec1b2ad97e1 100644
--- a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx
@@ -89,7 +89,7 @@ export const TableDefinition = ({ entity }: TableDefinitionProps) => {
   return (
     <>
       <div className="grow overflow-y-auto border-t border-muted relative">
-        <Button asChild type="default" className="absolute top-2 right-5 z-10">
+        <Button asChild variant="default" className="absolute top-2 right-5 z-10">
           <Link
             href={`/project/${ref}/sql/new?content=${encodeURIComponent(
               formattedDefinition ?? ''
diff --git a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
index 52851b70db1..c25fe9e79ec 100644
--- a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
@@ -129,7 +129,7 @@ export const TableGridEditor = ({
             >
               {!!tabId ? (
                 <Button
-                  type="default"
+                  variant="default"
                   className="mt-2"
                   onClick={() => {
                     tabs.handleTabClose({
@@ -145,7 +145,7 @@ export const TableGridEditor = ({
               ) : openTabs.length > 0 ? (
                 <Button
                   asChild
-                  type="default"
+                  variant="default"
                   className="mt-2"
                   onClick={() => setLastVisitedTable(undefined)}
                 >
@@ -156,7 +156,7 @@ export const TableGridEditor = ({
               ) : (
                 <Button
                   asChild
-                  type="default"
+                  variant="default"
                   className="mt-2"
                   onClick={() => setLastVisitedTable(undefined)}
                 >
diff --git a/apps/studio/components/interfaces/UnifiedLogs/RowSelectionHeader.tsx b/apps/studio/components/interfaces/UnifiedLogs/RowSelectionHeader.tsx
index 0430bbaa275..eecc53dd4ee 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/RowSelectionHeader.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/RowSelectionHeader.tsx
@@ -85,7 +85,7 @@ export const RowSelectionHeader = () => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <ButtonTooltip
-                    type="default"
+                    variant="default"
                     size="tiny"
                     icon={<Copy size={12} />}
                     className="w-7"
@@ -120,7 +120,7 @@ export const RowSelectionHeader = () => {
               />
 
               <ButtonTooltip
-                type="text"
+                variant="text"
                 icon={<X />}
                 className="px-1"
                 onClick={() => table.resetRowSelection()}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowPanelControls.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowPanelControls.tsx
index 33b9ce18ed2..07e8122ef09 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowPanelControls.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/ServiceFlowPanelControls.tsx
@@ -66,7 +66,7 @@ export const ServiceFlowPanelControls = ({
       >
         <Button
           size="tiny"
-          type="text"
+          variant="text"
           disabled={!prevId}
           onClick={onPrev}
           className="px-1"
@@ -82,7 +82,7 @@ export const ServiceFlowPanelControls = ({
       >
         <Button
           size="tiny"
-          type="text"
+          variant="text"
           disabled={!nextId}
           onClick={onNext}
           className="px-1"
@@ -95,7 +95,7 @@ export const ServiceFlowPanelControls = ({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <ButtonTooltip
-            type="text"
+            variant="text"
             className="px-1"
             icon={dock === 'bottom' ? <PanelBottom /> : <PanelRight />}
             tooltip={{ content: { side: 'top', text: 'Dock side' } }}
@@ -125,7 +125,7 @@ export const ServiceFlowPanelControls = ({
         options={{ conflictBehavior: 'allow' }}
         side="top"
       >
-        <Button size="tiny" type="text" onClick={onClose} className="px-1" icon={<X />} />
+        <Button size="tiny" variant="text" onClick={onClose} className="px-1" icon={<X />} />
       </Shortcut>
     </div>
   )
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx
index 9c00ba1f84e..1d463bc161c 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/DetailRow.tsx
@@ -78,7 +78,7 @@ export const DetailRow = ({
             table={table!}
             label={label}
           >
-            <Button type="text" className="px-1" icon={<MoreVertical />} />
+            <Button variant="text" className="px-1" icon={<MoreVertical />} />
           </DataTableSheetRowAction>
         )}
       </div>
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
index ff6058b87c7..150af15064b 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
@@ -238,7 +238,7 @@ export function ServiceFlowPanel({
               <div className="sticky top-2 z-10 flex justify-end px-2 -mb-9 pointer-events-none">
                 <Button
                   size="tiny"
-                  type="default"
+                  variant="default"
                   className="pointer-events-auto px-1.5"
                   icon={jsonCopied ? <Check size={12} /> : <Copy size={12} />}
                   onClick={() => {
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
index a04be8fa290..0333dd7bc26 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
@@ -382,7 +382,7 @@ export const UnifiedLogs = () => {
                 <ShortcutTooltip shortcutId={SHORTCUT_IDS.DATA_TABLE_TOGGLE_FILTERS} side="bottom">
                   <Button
                     size="tiny"
-                    type="text"
+                    variant="text"
                     icon={isFilterBarOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
                     onClick={() => setIsFilterBarOpen((prev) => !prev)}
                     className="hidden w-[26px] sm:flex"
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx
index 15cc4bcba18..f88e4d73efc 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx
@@ -31,7 +31,7 @@ export function UnifiedLogsBanner({
           <p className="truncate text-xs text-foreground-light">Use the traditional interface</p>
         </div>
         <ButtonTooltip
-          type="default"
+          variant="default"
           className="shrink-0 px-1.5"
           icon={<Undo2 />}
           onClick={onSwitchBack}
@@ -47,11 +47,11 @@ export function UnifiedLogsBanner({
         Try Unified Logs
       </p>
       <div className="flex shrink-0 items-center gap-x-2">
-        <Button size="tiny" type="default" onClick={onEnable}>
+        <Button size="tiny" variant="default" onClick={onEnable}>
           Enable
         </Button>
         <ButtonTooltip
-          type="default"
+          variant="default"
           className="px-1.5"
           icon={<CircleHelpIcon />}
           onClick={onMoreInfo}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/DownloadLogsButton.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/DownloadLogsButton.tsx
index 3bff223ee14..54a8e4f0997 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/DownloadLogsButton.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/DownloadLogsButton.tsx
@@ -104,7 +104,7 @@ export const DownloadLogsButton = ({ searchParameters }: DownloadLogsButtonProps
         <ShortcutTooltip shortcutId={SHORTCUT_IDS.UNIFIED_LOGS_DOWNLOAD} side="bottom">
           <DropdownMenuTrigger asChild>
             <Button
-              type="default"
+              variant="default"
               className="w-[26px]"
               icon={<Download className="text-foreground" />}
               aria-label="Download logs"
@@ -175,13 +175,13 @@ export const DownloadLogsButton = ({ searchParameters }: DownloadLogsButtonProps
           </DialogSection>
           <DialogFooter>
             <Button
-              type="default"
+              variant="default"
               disabled={isPending}
               onClick={() => setSelectedFormat(undefined)}
             >
               Cancel
             </Button>
-            <Button type="primary" loading={isPending} onClick={onExportData}>
+            <Button variant="primary" loading={isPending} onClick={onExportData}>
               Export
             </Button>
           </DialogFooter>
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/LogsList.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/LogsList.tsx
index 6a41cb91ad6..4dfe987b792 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/LogsList.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/LogsList.tsx
@@ -49,7 +49,7 @@ export const LogsList = ({ logs = [] }: LogsListProps) => {
                   ))}
                   <CopyButton
                     iconOnly
-                    type="default"
+                    variant="default"
                     text={log.event_message}
                     className="absolute top-[5px] right-2 z-10 opacity-0 group-hover:opacity-100 transition"
                   />
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/LogsListPanel.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/LogsListPanel.tsx
index 3088220c66e..50d0dbece48 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/LogsListPanel.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/LogsListPanel.tsx
@@ -30,7 +30,7 @@ export const LogsListPanel = ({ selectedRow }: { selectedRow?: Row<ColumnSchema>
               </span>
             </div>
             <Button
-              type="default"
+              variant="default"
               onClick={() => setOpenState(!open)}
               icon={<ChevronDown className={cn('w-4 h-4', !open ? 'rotate-180' : 'rotate-0')} />}
             >
diff --git a/apps/studio/components/interfaces/UserDropdown.tsx b/apps/studio/components/interfaces/UserDropdown.tsx
index b4f64927828..6f8d579b48e 100644
--- a/apps/studio/components/interfaces/UserDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown.tsx
@@ -67,7 +67,7 @@ export function UserDropdown({
     >
       <DropdownMenuTrigger asChild className={cn('border shrink-0 px-3', triggerClassName)}>
         <ButtonTooltip
-          type="default"
+          variant="default"
           className="[&>span]:flex px-0 py-0 rounded-full overflow-hidden h-8 w-8"
           tooltip={{ content: { text: 'Account settings' } }}
         >
diff --git a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx
index e5334a9f415..506e4477586 100644
--- a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx
+++ b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx
@@ -26,7 +26,7 @@ export function AdvisorsSidebarMenu({ page }: AdvisorsSidebarMenuProps) {
         description="Advisors are now available in the top toolbar for quicker access across the dashboard."
         illustration={<Badge variant="success">New</Badge>}
         actions={
-          <Button size="tiny" type="default" onClick={handleOpenAdvisor}>
+          <Button size="tiny" variant="default" onClick={handleOpenAdvisor}>
             Try it now
           </Button>
         }
diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
index 65cf75c02c0..efc5c3ae2a7 100644
--- a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
@@ -46,7 +46,7 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
   return (
     <div className="relative">
       <ButtonTooltip
-        type="outline"
+        variant="outline"
         size="tiny"
         id="advisor-center-trigger"
         className={cn(
diff --git a/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx b/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx
index a82f21b72d6..a13ba98f846 100644
--- a/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx
@@ -30,7 +30,7 @@ export const AppLayoutDropdownTriggerButton = forwardRef<
     className={cn('px-1.5 py-4 [&_svg]:w-5 [&_svg]:h-5 ml-1', className)}
     iconRight={<ChevronsUpDown strokeWidth={1.5} />}
     {...props}
-    type="text"
+    variant="text"
   />
 ))
 AppLayoutDropdownTriggerButton.displayName = 'AppLayoutDropdownTriggerButton'
diff --git a/apps/studio/components/layouts/AppLayout/AssistantButton.tsx b/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
index 5424a11fa15..de7b29cf472 100644
--- a/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
@@ -16,7 +16,7 @@ export const AssistantButton = () => {
 
   return (
     <ButtonTooltip
-      type="outline"
+      variant="outline"
       size="tiny"
       id="assistant-trigger"
       className={cn(
diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
index 54a044c8e8b..450be351cda 100644
--- a/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
+++ b/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
@@ -49,7 +49,7 @@ export function BranchDropdownCommandContent({
       <Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
         <div className="grid grid-cols-2 gap-2 shrink-0 p-2 border-b">
           <Button
-            type="text"
+            variant="text"
             size="small"
             asChild
             block
@@ -64,7 +64,7 @@ export function BranchDropdownCommandContent({
             </Link>
           </Button>
           <Button
-            type="text"
+            variant="text"
             size="small"
             asChild
             block
@@ -81,7 +81,7 @@ export function BranchDropdownCommandContent({
             </a>
           </Button>
           <Button
-            type="default"
+            variant="default"
             size="small"
             block
             className="col-span-full text-xs text-foreground-light hover:text-foreground"
diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx
index ed8c33eccbd..419d9285392 100644
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx
@@ -36,7 +36,7 @@ export const BranchingPITRNotice = () => {
           <ButtonTooltip
             disabled
             size="tiny"
-            type="default"
+            variant="default"
             tooltip={{
               content: {
                 side: 'bottom',
@@ -47,7 +47,7 @@ export const BranchingPITRNotice = () => {
             Enable PITR add-on
           </ButtonTooltip>
         ) : (
-          <Button size="tiny" type="default" asChild>
+          <Button size="tiny" variant="default" asChild>
             <Link
               href={`/project/${ref}/settings/addons?panel=pitr`}
               onClick={() => snap.setShowCreateBranchModal(false)}
diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx
index bdf5d7ed817..430a08c131d 100644
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx
@@ -18,7 +18,7 @@ export const BranchingPlanNotice = () => {
         this project
       </AlertDescription>
       <AlertDescription>
-        <Button size="tiny" type="default" className="mt-4">
+        <Button size="tiny" variant="default" className="mt-4">
           <Link
             href={`/org/${selectedOrg?.slug}/billing?panel=subscriptionPlan&source=enableBranchingButton`}
             onClick={() => snap.setShowCreateBranchModal(false)}
diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx
index 0038a5b7e71..79b96ac88a1 100644
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx
@@ -20,7 +20,7 @@ export const BranchingPostgresVersionNotice = () => {
         Postgres before enabling branching.
       </AlertDescription>
       <AlertDescription>
-        <Button size="tiny" type="default" className="mt-4">
+        <Button size="tiny" variant="default" className="mt-4">
           <Link
             href={`/project/${ref}/settings/infrastructure`}
             onClick={() => snap.setShowCreateBranchModal(false)}
diff --git a/apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx b/apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx
index f1cd45a5661..d831e56036a 100644
--- a/apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx
@@ -26,7 +26,7 @@ export const InlineEditorButton = () => {
 
   return (
     <ButtonTooltip
-      type="outline"
+      variant="outline"
       size="tiny"
       id="editor-trigger"
       className={cn(
diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
index 3eb12d3705c..3afda1fe77c 100644
--- a/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
@@ -57,7 +57,7 @@ export function OrganizationDropdownCommandContent({
     return (
       <Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
         <div className="flex items-center gap-2 shrink-0 border-b p-2">
-          <Button type="text" block size="small" asChild>
+          <Button variant="text" block size="small" asChild>
             <Link
               href="/organizations"
               className="text-xs text-foreground-light hover:text-foreground"
@@ -68,7 +68,7 @@ export function OrganizationDropdownCommandContent({
           </Button>
           {organizationCreationEnabled && (
             <Button
-              type="default"
+              variant="default"
               block
               size="small"
               asChild
diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
index 671c6947e46..ce8f6ff14ca 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -42,7 +42,13 @@ function ProjectDropdownNewProjectActions({
 
   if (embedded) {
     return (
-      <Button type="default" block size="small" asChild icon={<Plus size={14} strokeWidth={1.5} />}>
+      <Button
+        variant="default"
+        block
+        size="small"
+        asChild
+        icon={<Plus size={14} strokeWidth={1.5} />}
+      >
         <Link
           href={href}
           onClick={onClose}
diff --git a/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx b/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx
index cc75877a54e..c72a5408135 100644
--- a/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx
+++ b/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx
@@ -302,7 +302,7 @@ const EdgeFunctionDetailsLayout = ({
                 <div className="flex items-center gap-x-2">
                   <span className="flex items-center gap-2">{functionUrl}</span>
                   <ShortcutTooltip shortcutId={SHORTCUT_IDS.FUNCTION_DETAIL_COPY_URL} side="bottom">
-                    <CopyButton iconOnly type="text" text={functionUrl} />
+                    <CopyButton iconOnly variant="text" text={functionUrl} />
                   </ShortcutTooltip>
                 </div>
 
@@ -366,7 +366,7 @@ const EdgeFunctionDetailsLayout = ({
                     open={isDownloadOpen ? false : undefined}
                   >
                     <PopoverTrigger asChild>
-                      <Button type="default" icon={<Download />}>
+                      <Button variant="default" icon={<Download />}>
                         Download
                       </Button>
                     </PopoverTrigger>
@@ -390,7 +390,7 @@ const EdgeFunctionDetailsLayout = ({
                     )}
                     <div className="py-2 px-1">
                       <Button
-                        type="text"
+                        variant="text"
                         className="w-min hover:bg-transparent"
                         icon={<FileArchive />}
                         onClick={downloadFunction}
@@ -405,7 +405,7 @@ const EdgeFunctionDetailsLayout = ({
                     shortcutId={SHORTCUT_IDS.FUNCTION_DETAIL_OPEN_TEST}
                     side="bottom"
                   >
-                    <Button type="default" icon={<Send />} onClick={openTestSheet}>
+                    <Button variant="default" icon={<Send />} onClick={openTestSheet}>
                       Test
                     </Button>
                   </ShortcutTooltip>
diff --git a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
index d2d135e867d..3d6c6c979b3 100644
--- a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
+++ b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
@@ -233,7 +233,7 @@ export function LogsSidebarMenuV2() {
           description="Get early access"
           actions={
             <Link href="https://forms.supabase.com/unified-logs-signup" target="_blank">
-              <Button type="default" size="tiny">
+              <Button variant="default" size="tiny">
                 Early access
               </Button>
             </Link>
@@ -268,7 +268,7 @@ export function LogsSidebarMenuV2() {
         </InnerSideBarFilters>
 
         <Button
-          type="default"
+          variant="default"
           icon={<Plus className="text-foreground" />}
           className="w-[26px]"
           onClick={() => router.push(`/project/${ref}/logs/explorer`)}
@@ -334,7 +334,7 @@ export function LogsSidebarMenuV2() {
               IS_PLATFORM ? 'Create and save your queries to use them in the explorer' : undefined
             }
             actions={
-              <Button asChild type="default">
+              <Button asChild variant="default">
                 <Link href={`/project/${ref}/logs/explorer`}>Create query</Link>
               </Button>
             }
@@ -361,7 +361,7 @@ export function LogsSidebarMenuV2() {
           </div>
         }
         actions={
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href={`/project/${ref}/settings/log-drains`}>Go to Log Drains</Link>
           </Button>
         }
diff --git a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
index f0e90e2fc64..b789822c872 100644
--- a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
+++ b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
@@ -59,7 +59,7 @@ export const FloatingMobileToolbar = ({ hideMobileMenu }: { hideMobileMenu?: boo
         <AnimatePresence initial={false}>
           <ButtonTooltip
             key="search"
-            type={isSearchOpen ? 'secondary' : 'outline'}
+            variant={isSearchOpen ? 'secondary' : 'outline'}
             size="tiny"
             id="search-trigger"
             className={cn(
@@ -101,7 +101,7 @@ export const FloatingMobileToolbar = ({ hideMobileMenu }: { hideMobileMenu?: boo
             <Button
               key="menu"
               title="Menu dropdown button"
-              type={sheet.isMenuOpen ? 'secondary' : 'default'}
+              variant={sheet.isMenuOpen ? 'secondary' : 'default'}
               className={cn(
                 'flex lg:hidden mr-1 rounded-md min-w-[30px] w-[30px] h-[30px] data-open:bg-overlay-hover/30',
                 !sheet.isMenuOpen && 'bg-surface-300!'
@@ -115,7 +115,7 @@ export const FloatingMobileToolbar = ({ hideMobileMenu }: { hideMobileMenu?: boo
       <AnimatePresence initial={false}>
         <Button
           title="close"
-          type="text"
+          variant="text"
           className={cn(
             'flex flex-row items-center justify-center rounded-full',
             'bg-overlay/50 backdrop-blur-md my-auto p-1! gap-2',
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
index 7ab9411ca3f..a6276407bf2 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
@@ -49,7 +49,7 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
             setIsOpen((isOpen) => !isOpen)
             setStage('select')
           }}
-          type="text"
+          variant="text"
           className="rounded-full h-[32px] text-foreground-light hover:text-foreground"
         >
           <span className={className}>Feedback</span>
@@ -65,7 +65,7 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
           <div className="flex flex-col gap-4 p-4">
             <div className="font-medium text-sm">What would you like to share?</div>
             <div className="grid grid-cols-2 gap-3">
-              <Button type="default" className="h-32" onClick={() => setStage('issue-options')}>
+              <Button variant="default" className="h-32" onClick={() => setStage('issue-options')}>
                 <div className="grid gap-1.5 text-center">
                   <TriangleAlert size="28" className="mx-auto text-destructive-600" />
                   <div className="flex flex-col items-center">
@@ -74,7 +74,7 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
                   </div>
                 </div>
               </Button>
-              <Button type="default" className="h-32" onClick={() => setStage('widget')}>
+              <Button variant="default" className="h-32" onClick={() => setStage('widget')}>
                 <div className="grid gap-1.5 text-center">
                   <Lightbulb size="28" className="mx-auto text-warning" />
                   <div className="flex flex-col items-center">
@@ -104,7 +104,7 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
             </div>
             <PopoverSeparator />
             <div className="px-4 pt-4 pb-4">
-              <Button type="default" size="tiny" onClick={() => setStage('widget')}>
+              <Button variant="default" size="tiny" onClick={() => setStage('widget')}>
                 Leave feedback instead
               </Button>
             </div>
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 9b13cc47657..4d22659cd19 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -180,10 +180,10 @@ export const FeedbackWidget = ({ onClose, onSwitchToIssueOptions }: FeedbackWidg
       </div>
       <PopoverSeparator />
       <div className="px-4 pt-4 pb-4 flex flex-row items-center justify-between">
-        <Button type="default" size="tiny" onClick={onSwitchToIssueOptions}>
+        <Button variant="default" size="tiny" onClick={onSwitchToIssueOptions}>
           Get help
         </Button>
-        <Button type="default" size="tiny" onClick={onClose}>
+        <Button variant="default" size="tiny" onClick={onClose}>
           Close
         </Button>
       </div>
@@ -237,7 +237,7 @@ export const FeedbackWidget = ({ onClose, onSwitchToIssueOptions }: FeedbackWidg
       <PopoverSeparator />
 
       <div className="px-4 pt-4 pb-4 flex flex-row items-center justify-between">
-        <Button type="default" size="tiny" onClick={onSwitchToIssueOptions}>
+        <Button variant="default" size="tiny" onClick={onSwitchToIssueOptions}>
           Get help instead
         </Button>
         <div className="flex items-center gap-2 flex-row">
@@ -268,7 +268,7 @@ export const FeedbackWidget = ({ onClose, onSwitchToIssueOptions }: FeedbackWidg
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isSavingScreenshot}
                   loading={isSavingScreenshot}
                   className="w-7"
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
index 516c8f72e64..9cf129270c9 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
@@ -93,7 +93,7 @@ export const LayoutHeader = ({
     selectedProject?.inserted_at !== undefined &&
     dayjs(selectedProject.inserted_at).isAfter(dayjs().subtract(5, 'day'))
 
-  const connectButtonType = isNewProject ? 'primary' : 'default'
+  const connectButtonVariant = isNewProject ? 'primary' : 'default'
 
   // show org selection if we are on a project page or on a explicit org route
   const showOrgSelection = slug || (selectedOrganization && projectRef)
@@ -216,7 +216,7 @@ export const LayoutHeader = ({
                   }}
                 >
                   {IS_PLATFORM && <MergeRequestButton />}
-                  <ConnectButton buttonType={connectButtonType} />
+                  <ConnectButton buttonVariant={connectButtonVariant} />
                 </motion.div>
               )}
             </AnimatePresence>
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx
index 90221aedaed..7e350395491 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/LocalVersionPopover.tsx
@@ -128,7 +128,7 @@ export const LocalVersionPopover = () => {
         <div className="flex items-center gap-x-2 mt-3 px-4">
           <Dialog>
             <DialogTrigger asChild>
-              <Button type="default">Release schedule</Button>
+              <Button variant="default">Release schedule</Button>
             </DialogTrigger>
             <DialogContent>
               <DialogHeader className="border-b">
@@ -174,7 +174,7 @@ export const LocalVersionPopover = () => {
               </DialogSection>
             </DialogContent>
           </Dialog>
-          <Button type="default" asChild>
+          <Button variant="default" asChild>
             <a
               target="_blank"
               rel="noreferrer noopener"
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx
index c527117c625..b9c0a2f4478 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/MergeRequestButton.tsx
@@ -60,7 +60,7 @@ export const MergeRequestButton = () => {
 
   return (
     <ButtonTooltip
-      type="default"
+      variant="default"
       className="rounded-full w-[26px] h-[26px]"
       onClick={handleClick}
       loading={isUpdating}
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
index a3b25512ba4..b9b7e606cb0 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
@@ -74,7 +74,7 @@ const MobileNavigationBar = ({
           {!hideMobileMenu && (
             <Button
               title="Menu dropdown button"
-              type="default"
+              variant="default"
               className="flex lg:hidden border-default bg-surface-100/75 text-foreground-light rounded-md min-w-[30px] w-[30px] h-[30px] data-open:bg-overlay-hover/30"
               icon={<Menu />}
               onClick={() => openMenu()}
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/NavigationIconButton.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/NavigationIconButton.tsx
index cbfa07acc8c..516af307ec2 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/NavigationIconButton.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/NavigationIconButton.tsx
@@ -15,7 +15,7 @@ export const NavigationIconButton = forwardRef<
   return (
     <Button
       ref={ref}
-      type="text"
+      variant="text"
       size="tiny"
       {...props}
       className={cn(
diff --git a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx
index bea6aa28bf5..e99fad30b63 100644
--- a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx
+++ b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx
@@ -188,7 +188,7 @@ const ObservabilityMenu = () => {
                         <span className="uppercase font-mono">Custom Reports</span>
                         {reportMenuItems.length > 0 && (
                           <ButtonTooltip
-                            type="default"
+                            variant="default"
                             size="tiny"
                             icon={<Plus />}
                             disabled={!canCreateCustomReport}
@@ -232,7 +232,7 @@ const ObservabilityMenu = () => {
                       description="Create and save custom reports to track your project metrics"
                       actions={
                         <ButtonTooltip
-                          type="default"
+                          variant="default"
                           icon={<Plus />}
                           disabled={!canCreateCustomReport}
                           onClick={() => {
diff --git a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenuItem.tsx b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenuItem.tsx
index 93140ecf238..24b5db8e9dd 100644
--- a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenuItem.tsx
+++ b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenuItem.tsx
@@ -63,7 +63,7 @@ export const ObservabilityMenuItem = ({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="text"
+                variant="text"
                 className="px-1 opacity-50 hover:opacity-100"
                 icon={<MoreVertical size={12} strokeWidth={2} />}
                 onClick={(e) => {
diff --git a/apps/studio/components/layouts/OrganizationLayout.tsx b/apps/studio/components/layouts/OrganizationLayout.tsx
index 7e5923a6e2b..24878997f58 100644
--- a/apps/studio/components/layouts/OrganizationLayout.tsx
+++ b/apps/studio/components/layouts/OrganizationLayout.tsx
@@ -151,14 +151,14 @@ const OrganizationLayoutContent = ({
           </div>
           <div className="flex items-center gap-2">
             {selectedRedirectQuery?.data?.url && (
-              <Button asChild type="default" iconRight={<ExternalLink />}>
+              <Button asChild variant="default" iconRight={<ExternalLink />}>
                 <a href={selectedRedirectQuery.data.url} target="_blank" rel="noopener noreferrer">
                   Manage
                 </a>
               </Button>
             )}
             <ButtonTooltip
-              type="text"
+              variant="text"
               icon={<XIcon size={14} />}
               className="h-7 w-7 p-0"
               onClick={() => setIsBannerDismissed(true)}
diff --git a/apps/studio/components/layouts/PageLayout/PageLayout.tsx b/apps/studio/components/layouts/PageLayout/PageLayout.tsx
index 90b247f8241..039c73f5455 100644
--- a/apps/studio/components/layouts/PageLayout/PageLayout.tsx
+++ b/apps/studio/components/layouts/PageLayout/PageLayout.tsx
@@ -126,7 +126,7 @@ export const PageLayout = ({
                     </Link>
                   ) : (
                     <Button
-                      type="link"
+                      variant="link"
                       onClick={item.onClick}
                       className={cn(isActive && 'text-foreground font-medium')}
                     >
diff --git a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
index dfcef4694f1..61bb07aabd3 100644
--- a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -124,7 +124,7 @@ const BuildingState = () => {
                           If your dashboard hasn't connected within 2 minutes, you can open a
                           support ticket.
                         </p>
-                        <Button asChild type="default">
+                        <Button asChild variant="default">
                           <SupportLink>Contact support team</SupportLink>
                         </Button>
                       </>
diff --git a/apps/studio/components/layouts/ProjectLayout/ConnectingState.tsx b/apps/studio/components/layouts/ProjectLayout/ConnectingState.tsx
index 142cb262a4d..2e67ae92f60 100644
--- a/apps/studio/components/layouts/ProjectLayout/ConnectingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ConnectingState.tsx
@@ -88,12 +88,12 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               </div>
 
               <div className="flex items-center justify-center space-x-2">
-                <Button asChild type="default">
+                <Button asChild variant="default">
                   <Link href={`/project/${ref}/settings/infrastructure`}>
                     Check database health
                   </Link>
                 </Button>
-                <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+                <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
                   <Link
                     href={`${DOCS_URL}/guides/troubleshooting?products=platform#unable-to-connect-to-your-supabase-project`}
                     className="translate-y-px"
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx
index 721afa525ec..84f627e8ac8 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx
@@ -142,7 +142,7 @@ export function MobileMenuContent({
           )}
         >
           <Button
-            type="text"
+            variant="text"
             className="p-1! justify-start"
             icon={<ChevronLeft size={20} />}
             onClick={handleBackToTop}
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx
index 68790048b39..c9856d25270 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx
@@ -121,7 +121,7 @@ export function OrgMenuContent({ onCloseSheet }: OrgMenuContentProps) {
           )}
         >
           <Button
-            type="text"
+            variant="text"
             className="p-1! justify-start"
             icon={<ChevronLeft size={20} />}
             onClick={handleBackToTop}
diff --git a/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx b/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx
index 5ea4f163c61..72fd70f7365 100644
--- a/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx
@@ -84,7 +84,7 @@ export const LogicalBackupCliInstructions = ({
 
       {showResetPassword && (
         <ButtonTooltip
-          type="default"
+          variant="default"
           disabled={resetDisabled}
           onClick={() => {
             if (!resetDisabled && ref) {
diff --git a/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx b/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx
index 2a6c4c42aec..51f3be119b2 100644
--- a/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx
@@ -90,7 +90,7 @@ export const PauseFailedState = () => {
             </div>
 
             <div className="border-t border-overlay flex items-center justify-end gap-x-2 py-4 px-8">
-              <Button asChild type="default">
+              <Button asChild variant="default">
                 <SupportLink
                   queryParams={{
                     category: SupportCategories.DATABASE_UNRESPONSIVE,
@@ -102,7 +102,7 @@ export const PauseFailedState = () => {
                 </SupportLink>
               </Button>
               <ButtonTooltip
-                type="default"
+                variant="default"
                 icon={<Download />}
                 disabled={isLoadingBackups}
                 loading={isDownloading || isLoadingBackups}
@@ -118,7 +118,7 @@ export const PauseFailedState = () => {
               </ButtonTooltip>
               <DropdownMenu>
                 <DropdownMenuTrigger>
-                  <Button type="default" className="px-1.5" icon={<MoreVertical />} />
+                  <Button variant="default" className="px-1.5" icon={<MoreVertical />} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-72" align="end">
                   <DropdownMenuItemTooltip
diff --git a/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx b/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx
index 195f1034283..f4a5ebbdf90 100644
--- a/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx
@@ -173,7 +173,7 @@ export const PauseDisabledState = () => {
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="default" icon={<Download />} iconRight={<ChevronDown />}>
+            <Button variant="default" icon={<Download />} iconRight={<ChevronDown />}>
               Download backups
             </Button>
           </DropdownMenuTrigger>
diff --git a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
index ee0682cb8cf..d97a5a22165 100644
--- a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
@@ -135,12 +135,12 @@ export const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
 
       {isPauseStatusSuccess && !isRestoreDisabled && (
         <CardFooter className="flex flex-wrap justify-end items-center gap-2">
-          <ResumeProjectButton size="tiny" type="default" />
+          <ResumeProjectButton size="tiny" variant="default" />
 
           {isFreePlan ? (
             <UpgradePlanButton source="projectPausedStateRestore" />
           ) : (
-            <Button asChild type="default">
+            <Button asChild variant="default">
               <Link href={`/project/${ref}/settings/general`}>View project settings</Link>
             </Button>
           )}
diff --git a/apps/studio/components/layouts/ProjectLayout/PausingState.tsx b/apps/studio/components/layouts/ProjectLayout/PausingState.tsx
index feab06f3038..d349a7dce7f 100644
--- a/apps/studio/components/layouts/ProjectLayout/PausingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PausingState.tsx
@@ -106,7 +106,7 @@ export const PausingState = ({ project }: PausingStateProps) => {
               </p>
               {isTakingLongerThanExpected && (
                 <div className="flex justify-center">
-                  <Button asChild type="default">
+                  <Button asChild variant="default">
                     <SupportLink
                       queryParams={{
                         category: SupportCategories.DATABASE_UNRESPONSIVE,
diff --git a/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx b/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx
index 9de26db616a..e6383fb4a14 100644
--- a/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx
@@ -90,7 +90,7 @@ export const RestoreFailedState = () => {
             </div>
 
             <div className="border-t border-overlay flex items-center justify-end py-4 px-8 gap-x-2">
-              <Button asChild type="default">
+              <Button asChild variant="default">
                 <SupportLink
                   queryParams={{
                     category: SupportCategories.DATABASE_UNRESPONSIVE,
@@ -103,7 +103,7 @@ export const RestoreFailedState = () => {
               </Button>
 
               <ButtonTooltip
-                type="default"
+                variant="default"
                 icon={<Download />}
                 disabled={isLoadingBackups}
                 loading={isDownloading || isLoadingBackups}
@@ -120,7 +120,7 @@ export const RestoreFailedState = () => {
 
               <DropdownMenu>
                 <DropdownMenuTrigger>
-                  <Button type="default" className="w-7" icon={<MoreVertical />} />
+                  <Button variant="default" className="w-7" icon={<MoreVertical />} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-72" align="end">
                   <DropdownMenuItemTooltip
diff --git a/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx b/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx
index 0288983b353..129d171a004 100644
--- a/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx
@@ -13,7 +13,7 @@ export const RestorePaidPlanProjectNotice = () => {
         project.
       </AlertDescription>
       <AlertDescription className="mt-3">
-        <Button asChild type="default" icon={<ExternalLink />}>
+        <Button asChild variant="default" icon={<ExternalLink />}>
           <a
             href={`${DOCS_URL}/guides/platform/manage-your-usage/compute`}
             target="_blank"
diff --git a/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx b/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx
index 776f3b63f72..b9de7da6826 100644
--- a/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx
@@ -147,7 +147,7 @@ export const RestoringState = () => {
                       layout="responsive"
                       description="Contact support if this project remains in a restoring state."
                       actions={
-                        <Button asChild type="default">
+                        <Button asChild variant="default">
                           <SupportLink
                             queryParams={{
                               category: SupportCategories.DATABASE_UNRESPONSIVE,
@@ -168,7 +168,7 @@ export const RestoringState = () => {
             </div>
             <div className="border-t border-overlay flex items-center justify-end py-4 px-8 gap-x-2">
               <ButtonTooltip
-                type="default"
+                variant="default"
                 icon={<Download />}
                 loading={isDownloading}
                 disabled={logicalBackups.length === 0}
diff --git a/apps/studio/components/layouts/ProjectLayout/UnhealthyState.tsx b/apps/studio/components/layouts/ProjectLayout/UnhealthyState.tsx
index 7d9d8c6f7cc..8d4c453309a 100644
--- a/apps/studio/components/layouts/ProjectLayout/UnhealthyState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/UnhealthyState.tsx
@@ -66,7 +66,7 @@ export const UnhealthyState = () => {
                 </div>
                 <div>
                   <Button
-                    type="default"
+                    variant="default"
                     size="tiny"
                     disabled={!canRestartProject}
                     loading={isRestarting}
diff --git a/apps/studio/components/layouts/ProjectLayout/UpgradingState/index.tsx b/apps/studio/components/layouts/ProjectLayout/UpgradingState/index.tsx
index 1278f54cdbc..d77b9dda74a 100644
--- a/apps/studio/components/layouts/ProjectLayout/UpgradingState/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/UpgradingState/index.tsx
@@ -108,7 +108,7 @@ export const UpgradingState = () => {
                   </p>
                 </div>
                 <div className="flex items-center mx-auto space-x-2">
-                  <Button asChild type="default">
+                  <Button asChild variant="default">
                     <SupportLink
                       queryParams={{
                         category: SupportCategories.DATABASE_UNRESPONSIVE,
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index f7de0dd72ad..6d811bdb278 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -347,7 +347,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
                       </AlertDescription>
                     </div>
                     <ButtonTooltip
-                      type="text"
+                      variant="text"
                       icon={<XIcon size={14} />}
                       className="h-7 w-7 p-0"
                       onClick={() => setIsProjectIntegrationBannerDismissed(true)}
diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
index d2788495044..0c61b94ed1b 100644
--- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
+++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
@@ -111,7 +111,7 @@ export const ProjectNeedsSecuringView = ({
             <PageHeaderDescription>{formatRlsDescription(issueCount)}</PageHeaderDescription>
           </PageHeaderSummary>
           <PageHeaderAside>
-            <Button asChild type="text" iconRight={<ArrowRight />}>
+            <Button asChild variant="text" iconRight={<ArrowRight />}>
               <Link
                 href={`/project/${projectRef}`}
                 onClick={() => {
diff --git a/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx b/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
index accb3727f3f..c07c63d9345 100644
--- a/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
+++ b/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
@@ -60,7 +60,7 @@ export const RealtimeLayout = ({ title, children }: PropsWithChildren<RealtimeLa
                 Availability project.
               </p>
             </div>
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <a href="https://supabase.com/support" target="_blank" rel="noopener noreferrer">
                 Contact support
               </a>
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index 3c50945dc06..f3ab98967a3 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -138,7 +138,7 @@ export const SQLEditorMenu = () => {
             <DropdownMenuTrigger asChild>
               <Button
                 data-testid="sql-editor-new-query-button"
-                type="default"
+                variant="default"
                 icon={<Plus className="text-foreground" />}
                 className="w-[26px]"
               />
@@ -160,7 +160,7 @@ export const SQLEditorMenu = () => {
       </div>
 
       <div className="p-4 border-t sticky bottom-0 bg-studio">
-        <Button block type="default" onClick={() => appState.setOnGoingQueriesPanelOpen(true)}>
+        <Button block variant="default" onClick={() => appState.setOnGoingQueriesPanelOpen(true)}>
           View running queries
         </Button>
       </div>
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
index 7635f8045d4..8977c1cbf41 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
@@ -437,7 +437,7 @@ export const SQLEditorTreeViewItem = ({
           }}
         >
           <Button
-            type="outline"
+            variant="outline"
             size="tiny"
             block
             loading={isInFolder ? isFetchingNextPageInFolder : _isFetchingNextPage}
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index 0cff02de124..c6a13814147 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -238,7 +238,7 @@ export const EntityListItem = ({
               className="text-foreground-lighter transition-all text-transparent group-hover:text-foreground data-open:text-foreground"
             >
               <Button
-                type="text"
+                variant="text"
                 className="w-6 h-6"
                 icon={<MoreVertical size={14} strokeWidth={2} />}
                 onClick={(e) => e.preventDefault()}
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index bec5bb3c501..75543eb2207 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -191,7 +191,7 @@ export const TableEditorMenu = () => {
                 disabled={!canCreateTables}
                 size="tiny"
                 icon={<Plus size={14} strokeWidth={1.5} className="text-foreground-muted" />}
-                type="default"
+                variant="default"
                 className="justify-start"
                 onClick={() => snap.onAddTable()}
                 tooltip={{
@@ -241,7 +241,7 @@ export const TableEditorMenu = () => {
             <Popover>
               <PopoverTrigger asChild>
                 <Button
-                  type={visibleTypes.length !== 5 ? 'default' : 'dashed'}
+                  variant={visibleTypes.length !== 5 ? 'default' : 'dashed'}
                   className="h-[32px] md:h-[28px] px-1.5"
                   icon={<Filter />}
                 />
@@ -271,7 +271,7 @@ export const TableEditorMenu = () => {
                         </div>
                         <Button
                           size="tiny"
-                          type="default"
+                          variant="default"
                           onClick={() => setVisibleTypes([value])}
                           className="transition opacity-0 group-hover:opacity-100 h-auto px-1 py-0.5"
                         >
diff --git a/apps/studio/components/layouts/Tabs/MigrateToPostgres.tsx b/apps/studio/components/layouts/Tabs/MigrateToPostgres.tsx
index 2497ffdcf6a..8bd139d1f17 100644
--- a/apps/studio/components/layouts/Tabs/MigrateToPostgres.tsx
+++ b/apps/studio/components/layouts/Tabs/MigrateToPostgres.tsx
@@ -38,7 +38,7 @@ export const MigrateToPostgres = () => (
           </div>
         </div>
       </div>
-      <Button type="default" className="rounded-full" iconRight={<BookOpen />}>
+      <Button variant="default" className="rounded-full" iconRight={<BookOpen />}>
         Migrate to Postgres
       </Button>
     </div>
diff --git a/apps/studio/components/layouts/Tabs/NewTab.tsx b/apps/studio/components/layouts/Tabs/NewTab.tsx
index 72ebd840ae5..834c40f0e2b 100644
--- a/apps/studio/components/layouts/Tabs/NewTab.tsx
+++ b/apps/studio/components/layouts/Tabs/NewTab.tsx
@@ -50,7 +50,7 @@ export function NewTab() {
             <CardHeader className="py-2 px-3 flex-row items-center justify-between w-full space-y-0">
               <CardTitle className="text-foreground-light">Currently impersonating as</CardTitle>
               <Button
-                type="default"
+                variant="default"
                 className="font-sans"
                 onClick={() => roleState.setRole(undefined)}
               >
diff --git a/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx b/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx
index 95a54961a3e..bbf66438bc5 100644
--- a/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx
+++ b/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx
@@ -44,12 +44,12 @@ const ProductEmptyState = ({
             {hasAction && (
               <div className="flex items-center space-x-2">
                 {ctaButtonLabel && !!ctaUrl ? (
-                  <Button asChild type="primary">
+                  <Button asChild variant="primary">
                     <Link href={ctaUrl}>{ctaButtonLabel}</Link>
                   </Button>
                 ) : ctaButtonLabel && !!onClickCta ? (
                   <ButtonTooltip
-                    type="primary"
+                    variant="primary"
                     onClick={onClickCta}
                     loading={loading}
                     disabled={loading || disabled}
@@ -64,7 +64,7 @@ const ProductEmptyState = ({
                   </ButtonTooltip>
                 ) : null}
                 {infoButtonUrl && infoButtonLabel ? (
-                  <Button type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+                  <Button variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
                     <a target="_blank" rel="noreferrer" href={infoButtonUrl}>
                       {infoButtonLabel}
                     </a>
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
index 6b8848e44d7..6db42ca1442 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
@@ -445,7 +445,7 @@ export const AIAssistant = ({ className }: AIAssistantProps) => {
                       <div className="flex items-center gap-x-2 mr-auto">
                         {isContextExceededError ? (
                           <Button
-                            type="default"
+                            variant="default"
                             size="tiny"
                             onClick={() => snap.newChat()}
                             className="text-xs"
@@ -455,7 +455,7 @@ export const AIAssistant = ({ className }: AIAssistantProps) => {
                         ) : (
                           <>
                             <Button
-                              type="default"
+                              variant="default"
                               size="tiny"
                               onClick={() => regenerate()}
                               className="text-xs"
@@ -463,7 +463,7 @@ export const AIAssistant = ({ className }: AIAssistantProps) => {
                               Retry
                             </Button>
                             <ButtonTooltip
-                              type="default"
+                              variant="default"
                               size="tiny"
                               onClick={handleClearMessages}
                               className="w-7 h-7"
@@ -529,7 +529,7 @@ export const AIAssistant = ({ className }: AIAssistantProps) => {
                       <span>Editing message</span>
                     </div>
                     <ButtonTooltip
-                      type="outline"
+                      variant="outline"
                       size="tiny"
                       icon={<X size={14} />}
                       onClick={cancelEdit}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
index 5415702eaf6..5b5671410d3 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
@@ -88,7 +88,7 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
     <Popover open={chatSelectorOpen} onOpenChange={setChatSelectorOpen}>
       <PopoverTrigger asChild>
         <Button
-          type="text"
+          variant="text"
           size="tiny"
           iconRight={<ChevronDown size={14} />}
           className="max-w-64 truncate"
@@ -138,14 +138,14 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
                           />
                           <div className="flex items-center gap-0">
                             <Button
-                              type="text"
+                              variant="text"
                               size="tiny"
                               icon={<Check size={14} />}
                               onClick={(e) => handleSaveEditChat(e)}
                               className="h-7 w-7"
                             />
                             <Button
-                              type="text"
+                              variant="text"
                               size="tiny"
                               icon={<X size={14} />}
                               onClick={(e) => handleCancelEditChat(e)}
@@ -168,7 +168,7 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
                     {editingChatId !== id && (
                       <div className="flex items-center gap-x-0 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                         <Button
-                          type="text"
+                          variant="text"
                           size="tiny"
                           icon={<Edit size={14} />}
                           onClick={(e) => handleStartEditChat(id, chat.name, e)}
@@ -176,7 +176,7 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
                         />
                         {chats.length > 1 && (
                           <Button
-                            type="text"
+                            variant="text"
                             size="tiny"
                             icon={<Trash size={14} />}
                             onClick={(e) => handleDeleteChat(id, e)}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
index 396db15e33b..41a3a40d447 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
@@ -62,7 +62,7 @@ export const AIAssistantHeader = ({
         <div className="flex items-center gap-x-4">
           <div className="flex items-center">
             <ButtonTooltip
-              type="text"
+              variant="text"
               size="tiny"
               icon={<Plus strokeWidth={1.5} />}
               onClick={onNewChat}
@@ -70,7 +70,7 @@ export const AIAssistantHeader = ({
               tooltip={{ content: { side: 'bottom', text: 'New chat' } }}
             />
             <ButtonTooltip
-              type="text"
+              variant="text"
               size="tiny"
               icon={<Settings strokeWidth={1.5} />}
               onClick={() => setIsOptInModalOpen(true)}
@@ -83,7 +83,7 @@ export const AIAssistantHeader = ({
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <ButtonTooltip
-                  type="text"
+                  variant="text"
                   size="tiny"
                   icon={<Ellipsis strokeWidth={1.5} />}
                   className="h-7 w-7 p-0"
@@ -101,7 +101,7 @@ export const AIAssistantHeader = ({
               </DropdownMenuContent>
             </DropdownMenu>
             <ButtonTooltip
-              type="text"
+              variant="text"
               className="w-7 h-7"
               onClick={onCloseAssistant}
               icon={<X strokeWidth={1.5} />}
@@ -136,7 +136,11 @@ export const AIAssistantHeader = ({
           className="border-0 border-b rounded-none bg-background"
         >
           {!isHipaaProjectDisallowed && (
-            <Button type="default" className="w-fit mt-4" onClick={() => setIsOptInModalOpen(true)}>
+            <Button
+              variant="default"
+              className="w-fit mt-4"
+              onClick={() => setIsOptInModalOpen(true)}
+            >
               Permission settings
             </Button>
           )}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
index b601887c069..ec347b6fc6d 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
@@ -65,7 +65,7 @@ export const AIOnboarding = ({
                 >
                   <Button
                     size="small"
-                    type="text"
+                    variant="text"
                     className="w-full justify-start border-b hover:border-b-0 hover:rounded-md rounded-none"
                     icon={
                       <FileText strokeWidth={1.5} size={14} className="text-foreground-light" />
@@ -100,7 +100,7 @@ export const AIOnboarding = ({
                           <Button
                             key={`${lint.name}-${index}`}
                             size="small"
-                            type="text"
+                            variant="text"
                             className="w-full justify-start"
                             icon={
                               <BarChart
@@ -131,7 +131,7 @@ export const AIOnboarding = ({
                           <Button
                             key={`${lint.name}-${index}`}
                             size="small"
-                            type="text"
+                            variant="text"
                             className="w-full justify-start"
                             icon={<Shield strokeWidth={1.5} size={14} className="text-warning" />}
                             onClick={() => {
@@ -152,7 +152,7 @@ export const AIOnboarding = ({
                       <Button
                         key={`${item.title}-${index}`}
                         size="small"
-                        type="text"
+                        variant="text"
                         className="w-full justify-start"
                         icon={
                           <FileText strokeWidth={1.5} size={14} className="text-foreground-light" />
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx
index b87a647d691..489870732e8 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx
@@ -69,12 +69,12 @@ export const AIOptInModal = ({ visible, onCancel }: AIOptInModalProps) => {
                 </p>
               )}
               <div className="flex items-center gap-x-2">
-                <Button type="default" disabled={isUpdating} onClick={onCancel}>
+                <Button variant="default" disabled={isUpdating} onClick={onCancel}>
                   Cancel
                 </Button>
                 <Button
-                  type="primary"
-                  htmlType="submit"
+                  variant="primary"
+                  type="submit"
                   form="ai-opt-in-form"
                   loading={isUpdating}
                   disabled={isUpdating || !canUpdateOrganization || !form.formState.isDirty}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx
index 2437f7474d0..c9ddbe78f7b 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx
@@ -141,7 +141,7 @@ const AssistantChatFormComponent = forwardRef<HTMLFormElement, FormProps>(
               {loading ? (
                 onStop ? (
                   <ButtonTooltip
-                    type="outline"
+                    variant="outline"
                     aria-label="Stop response"
                     icon={<Square fill="currentColor" className="scale-75" />}
                     onClick={onStop}
@@ -153,7 +153,7 @@ const AssistantChatFormComponent = forwardRef<HTMLFormElement, FormProps>(
                 )
               ) : (
                 <ButtonTooltip
-                  htmlType="submit"
+                  type="submit"
                   aria-label="Send message"
                   icon={<ArrowUp />}
                   disabled={!canSubmit}
diff --git a/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx b/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx
index 06b25b874a3..505f3fa799d 100644
--- a/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/CollapsibleCodeBlock.tsx
@@ -37,7 +37,7 @@ export const CollapsibleCodeBlock = ({ onRemove, ...props }: CollapsibleCodeBloc
 
         {onRemove && (
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             className="shrink-0 w-6 h-6"
             onClick={onRemove}
diff --git a/apps/studio/components/ui/AIAssistantPanel/ConfirmFooter.tsx b/apps/studio/components/ui/AIAssistantPanel/ConfirmFooter.tsx
index 13ca837dbe4..cd0c61966ee 100644
--- a/apps/studio/components/ui/AIAssistantPanel/ConfirmFooter.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/ConfirmFooter.tsx
@@ -30,10 +30,10 @@ export const ConfirmFooter = ({
     >
       <div className="flex-1 relative z-10">{message}</div>
       <div className="flex items-center gap-2 relative z-10">
-        <Button size="tiny" type="outline" onClick={onCancel} disabled={isLoading}>
+        <Button size="tiny" variant="outline" onClick={onCancel} disabled={isLoading}>
           {cancelLabel}
         </Button>
-        <Button size="tiny" type="primary" onClick={onConfirm} disabled={isLoading}>
+        <Button size="tiny" variant="primary" onClick={onConfirm} disabled={isLoading}>
           {isLoading ? confirmLabelLoading : confirmLabel}
         </Button>
       </div>
diff --git a/apps/studio/components/ui/AIAssistantPanel/DeleteMessageConfirmModal.tsx b/apps/studio/components/ui/AIAssistantPanel/DeleteMessageConfirmModal.tsx
index 8e3796b4b70..ba036bb5820 100644
--- a/apps/studio/components/ui/AIAssistantPanel/DeleteMessageConfirmModal.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/DeleteMessageConfirmModal.tsx
@@ -41,10 +41,10 @@ export const DeleteMessageConfirmModal = ({
         </DialogSection>
 
         <DialogFooter padding="small">
-          <Button type="default" onClick={onCancel}>
+          <Button variant="default" onClick={onCancel}>
             Cancel
           </Button>
-          <Button type="danger" onClick={onConfirm}>
+          <Button variant="danger" onClick={onConfirm}>
             Delete
           </Button>
         </DialogFooter>
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx
index e65e5f58381..d7695343d70 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx
@@ -34,7 +34,7 @@ export function MessageActions({
 function MessageActionsEdit({ onClick, tooltip }: { onClick: () => void; tooltip: string }) {
   return (
     <ButtonTooltip
-      type="text"
+      variant="text"
       icon={<Pencil size={14} strokeWidth={1.5} />}
       onClick={onClick}
       className="text-foreground-light hover:text-foreground p-1 rounded-sm"
@@ -53,7 +53,7 @@ MessageActions.Edit = MessageActionsEdit
 function MessageActionsDelete({ onClick }: { onClick: () => void }) {
   return (
     <ButtonTooltip
-      type="text"
+      variant="text"
       icon={<Trash2 size={14} strokeWidth={1.5} />}
       tooltip={{ content: { side: 'bottom', text: 'Delete message' } }}
       onClick={onClick}
@@ -76,7 +76,7 @@ function MessageActionsThumbsUp({
 }) {
   return (
     <Button
-      type="text"
+      variant="text"
       disabled={disabled}
       icon={
         <ThumbsUp
@@ -154,7 +154,7 @@ function MessageActionsThumbsDown({
     <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button
-          type="text"
+          variant="text"
           disabled={disabled}
           onClick={() => !disabled && setOpen(true)}
           className={cn(
@@ -199,7 +199,7 @@ function MessageActionsThumbsDown({
                 )}
               />
               <div className="flex justify-end">
-                <Button type="primary" htmlType="submit" size="tiny">
+                <Button variant="primary" type="submit" size="tiny">
                   Submit feedback
                 </Button>
               </div>
diff --git a/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx b/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx
index 676c7b53bb7..7a6ff7ff488 100644
--- a/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/MessageMarkdown.tsx
@@ -107,12 +107,12 @@ export const Hyperlink = memo(({ href, children }: { href?: string; children?: R
 
         <DialogFooter>
           <DialogClose asChild>
-            <Button type="default" className="opacity-100">
+            <Button variant="default" className="opacity-100">
               Cancel
             </Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button asChild type="primary" className="opacity-100">
+            <Button asChild variant="primary" className="opacity-100">
               {isExternalURL ? (
                 <a href={safeUrl} target="_blank" rel="noreferrer noopener">
                   Head to link
diff --git a/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx b/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx
index 8e7817dad49..9c599cacb0d 100644
--- a/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx
@@ -56,7 +56,7 @@ export const ModelSelector = ({ selectedModel, onSelectModel }: ModelSelectorPro
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           className="text-foreground-light"
           iconRight={<ChevronsUpDown strokeWidth={1} size={12} />}
         >
diff --git a/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx b/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx
index 0029dc72a4d..581b7fa92b6 100644
--- a/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/SnippetRow.tsx
@@ -45,7 +45,7 @@ export const SnippetRow: React.FC<SnippetRowProps> = ({
               {onRemoveSnippet && (
                 <Button
                   size="tiny"
-                  type="text"
+                  variant="text"
                   className="h-4! w-4! rounded-full p-0"
                   onClick={(e) => {
                     e.stopPropagation()
diff --git a/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx b/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
index 85f6a73869c..47144332cc3 100644
--- a/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
@@ -38,7 +38,7 @@ export const ConversationScrollButton = ({
         className={cn('absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full', className)}
         onClick={handleScrollToBottom}
         size="tiny"
-        type="default"
+        variant="default"
         {...props}
       >
         <ArrowDownIcon className="size-4" />
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorFilters.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorFilters.tsx
index e394ba0e416..156a37411b0 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorFilters.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorFilters.tsx
@@ -85,7 +85,7 @@ export const AdvisorFilters = ({
             }}
           />
           <ButtonTooltip
-            type="text"
+            variant="text"
             className="w-7 h-7 p-0"
             icon={<X strokeWidth={1.5} />}
             onClick={onClose}
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
index af5efd141a9..b8f372f441b 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
@@ -113,7 +113,7 @@ export const AdvisorPanelBody = ({
           return (
             <div key={`${item.source}-${item.id}`} className="border-b">
               <Button
-                type="text"
+                variant="text"
                 className={cn(
                   'justify-start w-full block rounded-none h-auto py-3 px-4 hover:text-foreground',
                   isUnread && 'bg-surface-100/50'
@@ -160,7 +160,7 @@ export const AdvisorPanelBody = ({
       </div>
       {severityFilters.length > 0 && hiddenItemsCount > 0 && (
         <div className="px-4 py-3">
-          <Button type="text" className="w-full" onClick={onClearFilters}>
+          <Button variant="text" className="w-full" onClick={onClearFilters}>
             Show {hiddenItemsCount} more issue{hiddenItemsCount !== 1 ? 's' : ''}
           </Button>
         </div>
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx
index f4c43c01843..1b03c5a8b23 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx
@@ -34,7 +34,7 @@ export const AdvisorPanelHeader = ({ selectedItem, onBack, onClose }: AdvisorPan
   return (
     <div className="border-b px-4 py-3 flex items-center gap-3">
       <ButtonTooltip
-        type="text"
+        variant="text"
         className="w-7 h-7 p-0 flex justify-center items-center"
         icon={<ChevronLeft size={16} strokeWidth={1.5} aria-hidden={true} />}
         onClick={onBack}
@@ -58,7 +58,7 @@ export const AdvisorPanelHeader = ({ selectedItem, onBack, onClose }: AdvisorPan
         )}
       </div>
       <ButtonTooltip
-        type="text"
+        variant="text"
         className="w-7 h-7 p-0"
         icon={<X strokeWidth={1.5} />}
         onClick={onClose}
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorSignalDetail.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorSignalDetail.tsx
index 2e6127b13df..ae495fc34bd 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorSignalDetail.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorSignalDetail.tsx
@@ -88,14 +88,14 @@ export const AdvisorSignalDetail = ({ item }: AdvisorSignalDetailProps) => {
           telemetrySource="advisor_signal_detail"
         />
         {item.actions.map((action) => (
-          <Button key={`${item.dismissalKey}-${action.href}`} type="default" asChild>
+          <Button key={`${item.dismissalKey}-${action.href}`} variant="default" asChild>
             <Link href={action.href}>
               <span className="flex items-center gap-2">{action.label}</span>
             </Link>
           </Button>
         ))}
         <Button
-          type="default"
+          variant="default"
           icon={<EyeOff size={14} strokeWidth={1.5} />}
           onClick={onDismissSignal}
         >
diff --git a/apps/studio/components/ui/AdvisorPanel/EmptyAdvisor.tsx b/apps/studio/components/ui/AdvisorPanel/EmptyAdvisor.tsx
index 509dec8e1b7..c8a2773fe32 100644
--- a/apps/studio/components/ui/AdvisorPanel/EmptyAdvisor.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/EmptyAdvisor.tsx
@@ -48,7 +48,7 @@ export const EmptyAdvisor = ({ activeTab, hasFilters, onClearFilters }: EmptyAdv
         <p className="text-foreground-light text-sm text-balance">{getMessage()}</p>
       </div>
       {hasFilters && (
-        <Button type="outline" onClick={onClearFilters}>
+        <Button variant="outline" onClick={onClearFilters}>
           Clear filters
         </Button>
       )}
diff --git a/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx b/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx
index acae061fdd4..d0ecf76f504 100644
--- a/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx
@@ -75,7 +75,7 @@ export const NotificationDetail = ({ notification, onUpdateStatus }: Notificatio
                 ? action.url.replace('[slug]', organization?.slug ?? data.org_slug ?? '_')
                 : action.url
             return (
-              <Button key={key} type="default" icon={<ExternalLink strokeWidth={1.5} />} asChild>
+              <Button key={key} variant="default" icon={<ExternalLink strokeWidth={1.5} />} asChild>
                 <Link href={url} target="_blank" rel="noreferrer">
                   {action.label}
                 </Link>
@@ -83,7 +83,11 @@ export const NotificationDetail = ({ notification, onUpdateStatus }: Notificatio
             )
           } else if (action.action_type !== undefined) {
             return (
-              <Button key={key} type="default" onClick={() => onButtonAction(action.action_type)}>
+              <Button
+                key={key}
+                variant="default"
+                onClick={() => onButtonAction(action.action_type)}
+              >
                 {action.label}
               </Button>
             )
@@ -93,7 +97,7 @@ export const NotificationDetail = ({ notification, onUpdateStatus }: Notificatio
         })}
         {notification.status === 'archived' ? (
           <Button
-            type="default"
+            variant="default"
             icon={<ArchiveRestoreIcon size={14} strokeWidth={1.5} />}
             onClick={() => onUpdateStatus(notification.id, 'seen')}
           >
@@ -101,7 +105,7 @@ export const NotificationDetail = ({ notification, onUpdateStatus }: Notificatio
           </Button>
         ) : (
           <Button
-            type="default"
+            variant="default"
             icon={<Archive size={14} strokeWidth={1.5} />}
             onClick={() => onUpdateStatus(notification.id, 'archived')}
           >
diff --git a/apps/studio/components/ui/AiAssistantDropdown.tsx b/apps/studio/components/ui/AiAssistantDropdown.tsx
index da2c95264fd..512340d4cc6 100644
--- a/apps/studio/components/ui/AiAssistantDropdown.tsx
+++ b/apps/studio/components/ui/AiAssistantDropdown.tsx
@@ -54,7 +54,7 @@ export interface AiAssistantDropdownProps {
   onCopyPrompt?: () => void
   telemetrySource?: TelemetrySource
   size?: ComponentProps<typeof Button>['size']
-  type?: ComponentProps<typeof Button>['type']
+  variant?: ComponentProps<typeof Button>['variant']
   disabled?: boolean
   loading?: boolean
   className?: string
@@ -72,7 +72,7 @@ export function AiAssistantDropdown({
   onCopyPrompt,
   telemetrySource,
   size = 'tiny',
-  type = 'default',
+  variant = 'default',
   disabled = false,
   loading = false,
   className,
@@ -128,7 +128,7 @@ export function AiAssistantDropdown({
     <div className={cn('flex items-center', iconOnly ? 'gap-0' : 'gap-0')}>
       {/* Main button */}
       <Button
-        type={type}
+        variant={variant}
         size={size}
         disabled={disabled}
         onClick={handleOpenAssistant}
@@ -142,7 +142,7 @@ export function AiAssistantDropdown({
       <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
         <DropdownMenuTrigger asChild>
           <Button
-            type={type}
+            variant={variant}
             size={size}
             disabled={disabled}
             className={cn('rounded-l-none px-1', iconOnly && 'px-1')}
diff --git a/apps/studio/components/ui/AlertError.tsx b/apps/studio/components/ui/AlertError.tsx
index 8b1d859225a..dc4b7805fe4 100644
--- a/apps/studio/components/ui/AlertError.tsx
+++ b/apps/studio/components/ui/AlertError.tsx
@@ -30,7 +30,7 @@ export const ContactSupportButton = ({
   error?: { message: string } | null
 }) => {
   return (
-    <Button asChild type="default" className="w-min">
+    <Button asChild variant="default" className="w-min">
       <SupportLink
         queryParams={{
           category: SupportCategories.DASHBOARD_BUG,
diff --git a/apps/studio/components/ui/AlphaNotice.tsx b/apps/studio/components/ui/AlphaNotice.tsx
index e6405e62dbb..bcf8a80fe62 100644
--- a/apps/studio/components/ui/AlphaNotice.tsx
+++ b/apps/studio/components/ui/AlphaNotice.tsx
@@ -24,7 +24,12 @@ export const AlphaNotice = ({
       type="tip"
       layout="horizontal"
       actions={
-        <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />} className="mt-2">
+        <Button
+          asChild
+          variant="default"
+          icon={<ExternalLink strokeWidth={1.5} />}
+          className="mt-2"
+        >
           <Link target="_blank" rel="noopener noreferrer" href={feedbackUrl}>
             Share feedback
           </Link>
diff --git a/apps/studio/components/ui/AutoEnableRLSNotice.tsx b/apps/studio/components/ui/AutoEnableRLSNotice.tsx
index e739e8bdc7e..bb3b9e7e559 100644
--- a/apps/studio/components/ui/AutoEnableRLSNotice.tsx
+++ b/apps/studio/components/ui/AutoEnableRLSNotice.tsx
@@ -78,7 +78,7 @@ export const AutoEnableRLSNotice = ({ iconOnly }: { iconOnly?: boolean }) => {
           <CreateEnsureRLSTriggerDialog />
           <ButtonTooltip
             icon={<X />}
-            type="text"
+            variant="text"
             className="w-7"
             tooltip={{ content: { side: 'bottom', text: 'Minimize' } }}
             onClick={() => setIsMinimized(true)}
@@ -125,13 +125,13 @@ const CreateEnsureRLSTriggerDialog = ({ iconOnly }: { iconOnly?: boolean }) => {
       <DialogTrigger asChild>
         {iconOnly ? (
           <ButtonTooltip
-            type="default"
+            variant="default"
             icon={<ShieldCheck />}
             className="w-7"
             tooltip={{ content: { side: 'bottom', text: 'Auto-enable RLS for new tables' } }}
           />
         ) : (
-          <Button type="primary">Learn more</Button>
+          <Button variant="primary">Learn more</Button>
         )}
       </DialogTrigger>
       <DialogContent size="large">
@@ -159,7 +159,7 @@ const CreateEnsureRLSTriggerDialog = ({ iconOnly }: { iconOnly?: boolean }) => {
         </CodeBlock>
 
         <DialogFooter>
-          <Button type="default" disabled={isCreating} onClick={() => setOpen(false)}>
+          <Button variant="default" disabled={isCreating} onClick={() => setOpen(false)}>
             Close
           </Button>
           <ButtonTooltip
diff --git a/apps/studio/components/ui/BannerStack/BannerCard.tsx b/apps/studio/components/ui/BannerStack/BannerCard.tsx
index b3c7b1ba402..9187afce36e 100644
--- a/apps/studio/components/ui/BannerStack/BannerCard.tsx
+++ b/apps/studio/components/ui/BannerStack/BannerCard.tsx
@@ -30,9 +30,9 @@ export const BannerCard = ({ onDismiss, children, className }: BannerCardProps)
         {onDismiss && (
           <div className="absolute top-4 right-4 z-20">
             <Button
-              type="text"
+              variant="text"
               size="tiny"
-              htmlType="button"
+              type="button"
               icon={<X size={16} strokeWidth={1.5} />}
               onClick={(e) => {
                 e.preventDefault()
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx
index 9fa4b801ea7..32546af5a27 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx
@@ -49,7 +49,7 @@ export const BannerFreeMicroUpgrade = () => {
         </div>
         <div className="flex gap-2">
           <Button
-            type="primary"
+            variant="primary"
             size="tiny"
             asChild
             onClick={() => {
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerMetricsAPI.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerMetricsAPI.tsx
index dc1e433cc83..f028044b597 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerMetricsAPI.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerMetricsAPI.tsx
@@ -40,7 +40,7 @@ export const BannerMetricsAPI = () => {
           </p>
         </div>
         <div className="flex gap-2">
-          <Button type="default" size="tiny" asChild>
+          <Button variant="default" size="tiny" asChild>
             <Link
               href={`${DOCS_URL}/guides/telemetry/metrics`}
               target="_blank"
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerRlsTester.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerRlsTester.tsx
index 1bda274af67..61b1dbca19d 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerRlsTester.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerRlsTester.tsx
@@ -101,7 +101,7 @@ export const BannerRlsTester = () => {
           </p>
         </div>
         <Button
-          type="default"
+          variant="default"
           className="w-min"
           onClick={() => selectFeaturePreview(LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_TESTER)}
         >
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerTOSUpdate.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerTOSUpdate.tsx
index 582b07a8a14..1cf1060b985 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerTOSUpdate.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerTOSUpdate.tsx
@@ -64,7 +64,7 @@ const UpdatedTermsOfServiceDialog = () => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="default" className="w-min">
+        <Button variant="default" className="w-min">
           Learn more
         </Button>
       </DialogTrigger>
@@ -109,7 +109,7 @@ const UpdatedTermsOfServiceDialog = () => {
         <DialogFooter>
           <DialogClose asChild>
             <Button
-              type="default"
+              variant="default"
               className="opacity-100"
               onClick={() => setTOSUpdateAcknowledged(true)}
             >
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx
index 0c7fee8be57..ce687336672 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations.tsx
@@ -61,7 +61,7 @@ export const BannerTableEditorQueueOperations = () => {
             Batch multiple row edits and review them before saving to your database
           </p>
         </div>
-        <Button asChild type="default" className="w-min">
+        <Button asChild variant="default" className="w-min">
           <Link href={DASHBOARD_SETTINGS_URL}>
             {isQueueOperationsEnabled ? 'View' : 'Enable in'} preferences
           </Link>
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerUnifiedLogs.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerUnifiedLogs.tsx
index 0efc777bae2..5ec21112ad2 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerUnifiedLogs.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerUnifiedLogs.tsx
@@ -49,7 +49,7 @@ export const BannerUnifiedLogs = () => {
         </div>
         <div className="flex gap-2">
           {isEnabled ? (
-            <Button type="default" size="tiny" asChild>
+            <Button variant="default" size="tiny" asChild>
               <Link
                 href={`/project/${ref}/logs`}
                 onClick={() => {
@@ -63,7 +63,7 @@ export const BannerUnifiedLogs = () => {
             </Button>
           ) : (
             <Button
-              type="default"
+              variant="default"
               size="tiny"
               onClick={() => {
                 track('unified_logs_banner_cta_button_clicked', { is_enabled: false })
diff --git a/apps/studio/components/ui/Charts/ChartHandler.tsx b/apps/studio/components/ui/Charts/ChartHandler.tsx
index b1226ddb590..52b5921ab47 100644
--- a/apps/studio/components/ui/Charts/ChartHandler.tsx
+++ b/apps/studio/components/ui/Charts/ChartHandler.tsx
@@ -163,7 +163,7 @@ const ChartHandler = ({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 className="px-1.5"
                 icon={chartStyle === 'bar' ? <Activity /> : <BarChartIcon />}
                 onClick={() => setChartStyle(chartStyle === 'bar' ? 'line' : 'bar')}
diff --git a/apps/studio/components/ui/Charts/ChartHeader.tsx b/apps/studio/components/ui/Charts/ChartHeader.tsx
index c553228b0df..8a6e276819e 100644
--- a/apps/studio/components/ui/Charts/ChartHeader.tsx
+++ b/apps/studio/components/ui/Charts/ChartHeader.tsx
@@ -215,7 +215,7 @@ export const ChartHeader = ({
       </div>
       {!titleTooltip && docsUrl && (
         <ButtonTooltip
-          type="text"
+          variant="text"
           className="px-1"
           asChild
           tooltip={{
@@ -279,7 +279,7 @@ export const ChartHeader = ({
       <div className="flex items-center gap-2">
         {sql ? (
           <ButtonTooltip
-            type="default"
+            variant="default"
             className="px-1.5"
             asChild
             tooltip={{
@@ -297,7 +297,7 @@ export const ChartHeader = ({
 
         {!hideChartType && onChartStyleChange && (
           <ButtonTooltip
-            type="default"
+            variant="default"
             className="px-1.5"
             icon={chartStyle === 'bar' ? <Activity /> : <BarChartIcon />}
             onClick={() => onChartStyleChange(chartStyle === 'bar' ? 'line' : 'bar')}
@@ -311,7 +311,7 @@ export const ChartHeader = ({
         )}
         {setShowMaxValue && (
           <ButtonTooltip
-            type={showMaxValue ? 'default' : 'dashed'}
+            variant={showMaxValue ? 'default' : 'dashed'}
             className="px-1.5"
             icon={
               <GitCommitHorizontalIcon
diff --git a/apps/studio/components/ui/Charts/ReportSettings.tsx b/apps/studio/components/ui/Charts/ReportSettings.tsx
index 89096987774..2b1299c1b92 100644
--- a/apps/studio/components/ui/Charts/ReportSettings.tsx
+++ b/apps/studio/components/ui/Charts/ReportSettings.tsx
@@ -17,7 +17,7 @@ export const ReportSettings = ({ chartId }: ReportSettingsProps) => {
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
         <ButtonTooltip
-          type="default"
+          variant="default"
           icon={<Settings />}
           className="w-7"
           tooltip={{ content: { side: 'bottom', text: 'Report settings' } }}
diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx
index 12160acc6ef..f83aaaf9e10 100644
--- a/apps/studio/components/ui/ComputeBadgeWrapper.tsx
+++ b/apps/studio/components/ui/ComputeBadgeWrapper.tsx
@@ -188,8 +188,8 @@ export const ComputeBadgeWrapper = ({
               <div>
                 <Button
                   asChild
-                  type="default"
-                  htmlType="button"
+                  variant="default"
+                  type="button"
                   role="button"
                   onClick={() => {
                     track('compute_badge_upgrade_clicked', {
diff --git a/apps/studio/components/ui/CopyButton.tsx b/apps/studio/components/ui/CopyButton.tsx
index 334ee62445d..fbf10834285 100644
--- a/apps/studio/components/ui/CopyButton.tsx
+++ b/apps/studio/components/ui/CopyButton.tsx
@@ -31,7 +31,7 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       onClick,
       copyLabel = 'Copy',
       copiedLabel = 'Copied',
-      type = 'primary',
+      variant = 'primary',
       icon,
       className,
       ...props
@@ -56,13 +56,13 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           onClick?.(e)
         }}
         {...props}
-        type={type}
+        variant={variant}
         className={cn({ 'px-1': iconOnly }, className)}
         icon={
           showCopied ? (
             <Check
               strokeWidth={2}
-              className={cn(type === 'primary' ? 'text-inherit' : 'text-brand')}
+              className={cn(variant === 'primary' ? 'text-inherit' : 'text-brand')}
             />
           ) : (
             (icon ?? <Copy />)
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControlsDrawer.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControlsDrawer.tsx
index bbde3404568..1e89501fc94 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControlsDrawer.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControlsDrawer.tsx
@@ -37,7 +37,7 @@ export function DataTableFilterControlsDrawer() {
           <DrawerTrigger asChild>
             <Button
               size="tiny"
-              type="text"
+              variant="text"
               icon={<FilterIcon />}
               className="w-[26px]"
               ref={isMobile ? triggerButtonRef : null}
@@ -67,7 +67,7 @@ export function DataTableFilterControlsDrawer() {
         </div>
         <DrawerFooter>
           <DrawerClose asChild>
-            <Button type="outline" className="w-full">
+            <Button variant="outline" className="w-full">
               Close
             </Button>
           </DrawerClose>
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterResetButton.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterResetButton.tsx
index 298cfc7e363..a08ef6c9426 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterResetButton.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterResetButton.tsx
@@ -15,7 +15,7 @@ export function DataTableFilterResetButton<TData>({ value: _value }: DataTableFi
 
   return (
     <Button
-      type="outline"
+      variant="outline"
       icon={<X />}
       className="h-5 rounded-full px-1.5 py-1 font-mono text-[10px] [&>span]:translate-y-[-0.6px] space-x-1"
       onClick={(e) => {
diff --git a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
index 4d3ac20ebfd..9ccdb0b0c08 100644
--- a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
@@ -185,7 +185,7 @@ export function DataTableInfinite<TData, TValue, TMeta>({
                     disabled={isFetching}
                     onClick={() => fetchNextPage()}
                     size="small"
-                    type="default"
+                    variant="default"
                     icon={
                       isFetching ? <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> : null
                     }
diff --git a/apps/studio/components/ui/DataTable/DataTableResetButton.tsx b/apps/studio/components/ui/DataTable/DataTableResetButton.tsx
index 69812bba5ee..7cc8a49fd26 100644
--- a/apps/studio/components/ui/DataTable/DataTableResetButton.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableResetButton.tsx
@@ -18,7 +18,7 @@ export function DataTableResetButton() {
       label="Reset filters"
       side="left"
     >
-      <Button type="default" size="tiny" onClick={() => table.resetColumnFilters()} icon={<X />}>
+      <Button variant="default" size="tiny" onClick={() => table.resetColumnFilters()} icon={<X />}>
         Reset
       </Button>
     </ShortcutTooltip>
diff --git a/apps/studio/components/ui/DataTable/DataTableSheetDetails.tsx b/apps/studio/components/ui/DataTable/DataTableSheetDetails.tsx
index 3c7a302f567..cee10d24cd9 100644
--- a/apps/studio/components/ui/DataTable/DataTableSheetDetails.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableSheetDetails.tsx
@@ -74,7 +74,7 @@ export function DataTableSheetDetails({
             <TooltipTrigger asChild>
               <Button
                 size="tiny"
-                type="text"
+                variant="text"
                 disabled={!prevId}
                 onClick={onPrev}
                 className="px-1"
@@ -92,7 +92,7 @@ export function DataTableSheetDetails({
             <TooltipTrigger asChild>
               <Button
                 size="tiny"
-                type="text"
+                variant="text"
                 disabled={!nextId}
                 onClick={onNext}
                 className="px-1"
@@ -109,7 +109,7 @@ export function DataTableSheetDetails({
 
           <Button
             size="tiny"
-            type="text"
+            variant="text"
             onClick={() => table.resetRowSelection()}
             className="px-1"
             icon={<X />}
diff --git a/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx b/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
index 0f6ff89bad0..d832a349511 100644
--- a/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
@@ -224,5 +224,5 @@ export function DataTableSheetRowAction<TData, TFields extends DataTableFilterFi
     )
   }
 
-  return <CopyButton iconOnly type="text" text={String(value)} className="px-1" />
+  return <CopyButton iconOnly variant="text" text={String(value)} className="px-1" />
 }
diff --git a/apps/studio/components/ui/DataTable/DataTableToolbar.tsx b/apps/studio/components/ui/DataTable/DataTableToolbar.tsx
index 8862e008ded..7deab48fb3b 100644
--- a/apps/studio/components/ui/DataTable/DataTableToolbar.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableToolbar.tsx
@@ -42,7 +42,7 @@ export function DataTableToolbar({
           <TooltipTrigger asChild>
             <Button
               size="tiny"
-              type="default"
+              variant="default"
               icon={isFilterBarOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
               onClick={() => setIsFilterBarOpen((prev) => !prev)}
               className="hidden sm:flex"
diff --git a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
index dc92700e354..cd20a57a1ea 100644
--- a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
@@ -38,7 +38,7 @@ export function DataTableViewOptions() {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <ButtonTooltip
-          type="default"
+          variant="default"
           size="tiny"
           role="combobox"
           aria-expanded={open}
@@ -83,7 +83,7 @@ export function DataTableViewOptions() {
                         <span>{(column.columnDef.meta as any)?.label || column.id}</span>
                         {enableColumnOrdering && !search ? (
                           <SortableDragHandle
-                            type="text"
+                            variant="text"
                             size="tiny"
                             className="ml-auto size-5 text-muted-foreground hover:text-foreground focus:bg-muted focus:text-foreground"
                           >
diff --git a/apps/studio/components/ui/DataTable/FilterSideBar.tsx b/apps/studio/components/ui/DataTable/FilterSideBar.tsx
index 6ed57d3e663..f137d5b99b8 100644
--- a/apps/studio/components/ui/DataTable/FilterSideBar.tsx
+++ b/apps/studio/components/ui/DataTable/FilterSideBar.tsx
@@ -95,7 +95,7 @@ export function FilterSideBar({
             </div>
           }
           actions={
-            <Button asChild type="default">
+            <Button asChild variant="default">
               <Link href={`/project/${ref}/settings/log-drains`}>Go to Log Drains</Link>
             </Button>
           }
diff --git a/apps/studio/components/ui/DataTable/LiveButton.tsx b/apps/studio/components/ui/DataTable/LiveButton.tsx
index e899bd24fee..ae09100183d 100644
--- a/apps/studio/components/ui/DataTable/LiveButton.tsx
+++ b/apps/studio/components/ui/DataTable/LiveButton.tsx
@@ -68,7 +68,7 @@ export function LiveButton({ fetchPreviousPage, searchParamsParser }: LiveButton
       <Button
         className={cn(live && 'border-info text-info hover:text-info')}
         onClick={handleClick}
-        type={live ? 'primary' : 'default'}
+        variant={live ? 'primary' : 'default'}
         size="tiny"
         icon={live ? <CirclePause className="h-4 w-4" /> : <CirclePlay className="h-4 w-4" />}
       >
diff --git a/apps/studio/components/ui/DataTable/RefreshButton.tsx b/apps/studio/components/ui/DataTable/RefreshButton.tsx
index 26b83d3fc71..17632181c50 100644
--- a/apps/studio/components/ui/DataTable/RefreshButton.tsx
+++ b/apps/studio/components/ui/DataTable/RefreshButton.tsx
@@ -33,7 +33,7 @@ export const RefreshButton = ({ isLoading, onRefresh, shortcutId }: RefreshButto
       >
         <Button
           size="tiny"
-          type="default"
+          variant="default"
           disabled={isLoading}
           onClick={onRefresh}
           className="w-[26px]"
@@ -47,7 +47,7 @@ export const RefreshButton = ({ isLoading, onRefresh, shortcutId }: RefreshButto
   return (
     <ButtonTooltip
       size="tiny"
-      type="default"
+      variant="default"
       disabled={isLoading}
       onClick={onRefresh}
       className="w-[26px]"
diff --git a/apps/studio/components/ui/DatabaseSelector.tsx b/apps/studio/components/ui/DatabaseSelector.tsx
index 71ed1313537..baa2953db02 100644
--- a/apps/studio/components/ui/DatabaseSelector.tsx
+++ b/apps/studio/components/ui/DatabaseSelector.tsx
@@ -90,7 +90,7 @@ export const DatabaseSelector = ({
             </span>
           )}
           <Button
-            type="default"
+            variant="default"
             icon={isLoading && <Loader2 className="animate-spin" />}
             iconRight={<ChevronDown strokeWidth={1.5} size={12} />}
             {...buttonProps}
diff --git a/apps/studio/components/ui/DatePicker/index.tsx b/apps/studio/components/ui/DatePicker/index.tsx
index f67e55de27a..bcc24d54698 100644
--- a/apps/studio/components/ui/DatePicker/index.tsx
+++ b/apps/studio/components/ui/DatePicker/index.tsx
@@ -19,7 +19,7 @@ interface DatePickerProps {
   onChange?: (args: DatePickerToFrom) => void
   to?: string // ISO string
   from?: string // ISO string
-  triggerButtonType?: ButtonProps['type']
+  triggerButtonVariant?: ButtonProps['variant']
   triggerButtonClassName?: string
   triggerButtonTitle?: string
   triggerButtonSize?: 'tiny' | 'small'
@@ -59,7 +59,7 @@ export function DatePicker({
   to,
   from,
   onChange,
-  triggerButtonType = 'default',
+  triggerButtonVariant = 'default',
   triggerButtonClassName = '',
   triggerButtonTitle,
   triggerButtonSize,
@@ -214,7 +214,7 @@ export function DatePicker({
       <PopoverTrigger asChild>
         <Button
           title={triggerButtonTitle}
-          type={triggerButtonType}
+          variant={triggerButtonVariant}
           icon={<Calendar />}
           size={triggerButtonSize}
           className={triggerButtonClassName}
@@ -310,7 +310,7 @@ export function DatePicker({
           <PopoverSeparator />
           <div className="flex items-center justify-end gap-2 py-2 px-3 pb-4">
             {!hideClear && (
-              <Button type="default" onClick={() => handleClear()}>
+              <Button variant="default" onClick={() => handleClear()}>
                 Clear
               </Button>
             )}
diff --git a/apps/studio/components/ui/DateRangePicker.tsx b/apps/studio/components/ui/DateRangePicker.tsx
index f5f48cd7596..9f981512456 100644
--- a/apps/studio/components/ui/DateRangePicker.tsx
+++ b/apps/studio/components/ui/DateRangePicker.tsx
@@ -227,7 +227,7 @@ export const DateRangePicker = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button type="default" iconRight={<ChevronDown />}>
+        <Button variant="default" iconRight={<ChevronDown />}>
           <span>{timePeriod && options.find((x) => x.key === timePeriod)?.label}</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/studio/components/ui/DocsButton.tsx b/apps/studio/components/ui/DocsButton.tsx
index 65c90af6f7f..c4a0df06575 100644
--- a/apps/studio/components/ui/DocsButton.tsx
+++ b/apps/studio/components/ui/DocsButton.tsx
@@ -11,7 +11,7 @@ export const DocsButton = ({ href, abbrev = true, className }: DocsButtonProps)
   return (
     <Button
       asChild
-      type="default"
+      variant="default"
       className={className}
       icon={<BookOpen />}
       onClick={(e) => e.stopPropagation()}
diff --git a/apps/studio/components/ui/DownloadResultsButton.tsx b/apps/studio/components/ui/DownloadResultsButton.tsx
index e05e077fbb7..d9f84cc21d2 100644
--- a/apps/studio/components/ui/DownloadResultsButton.tsx
+++ b/apps/studio/components/ui/DownloadResultsButton.tsx
@@ -25,7 +25,7 @@ import { useShortcut } from '@/state/shortcuts/useShortcut'
 
 interface DownloadResultsButtonProps {
   iconOnly?: boolean
-  type?: 'text' | 'default'
+  variant?: 'text' | 'default'
   text?: string
   align?: 'start' | 'center' | 'end'
   results: any[]
@@ -39,7 +39,7 @@ interface DownloadResultsButtonProps {
 
 export const DownloadResultsButton = ({
   iconOnly = false,
-  type = 'default',
+  variant = 'default',
   text = 'Export',
   align = 'start',
   results,
@@ -128,7 +128,7 @@ export const DownloadResultsButton = ({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          type={type}
+          variant={variant}
           icon={iconOnly ? <Download /> : undefined}
           iconRight={iconOnly ? undefined : <ChevronDown />}
           disabled={results.length === 0}
diff --git a/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx b/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx
index f50b9c9ad0e..8591de05fc8 100644
--- a/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx
+++ b/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx
@@ -90,7 +90,7 @@ export const EdgeFunctionBlock = ({
         ) : (
           <>
             <Button
-              type="outline"
+              variant="outline"
               size="tiny"
               loading={isDeploying}
               disabled={disabled || isDeploying}
@@ -115,7 +115,7 @@ export const EdgeFunctionBlock = ({
           </p>
           <div className="flex justify-stretch mt-2 gap-2">
             <Button
-              type="outline"
+              variant="outline"
               size="tiny"
               className="w-full flex-1"
               disabled={isDeploying}
@@ -124,7 +124,7 @@ export const EdgeFunctionBlock = ({
               Cancel
             </Button>
             <Button
-              type="danger"
+              variant="danger"
               size="tiny"
               className="w-full flex-1"
               loading={isDeploying}
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index 87a4f2a8b13..807557c5f0f 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -305,7 +305,7 @@ export const EditorPanel = () => {
           {activeSnippet && (
             <ButtonTooltip
               size="tiny"
-              type="text"
+              variant="text"
               className="w-7 h-7 p-0"
               icon={<PlusIcon size={14} />}
               tooltip={{ content: { side: 'bottom', text: 'New snippet' } }}
@@ -316,7 +316,7 @@ export const EditorPanel = () => {
             <PopoverTrigger asChild>
               <ButtonTooltip
                 size="tiny"
-                type="text"
+                variant="text"
                 role="combobox"
                 aria-expanded={isSnippetsOpen}
                 className="w-7 h-7 p-0"
@@ -369,7 +369,7 @@ export const EditorPanel = () => {
               <PopoverTrigger asChild>
                 <Button
                   size="tiny"
-                  type="default"
+                  variant="default"
                   role="combobox"
                   className="mr-2"
                   aria-expanded={isTemplatesOpen}
@@ -425,7 +425,7 @@ export const EditorPanel = () => {
             </Popover>
           )}
           <ButtonTooltip
-            type="text"
+            variant="text"
             className="w-7 h-7 p-0"
             icon={<Maximize2 strokeWidth={1.5} />}
             tooltip={{
@@ -462,7 +462,7 @@ export const EditorPanel = () => {
           />
 
           <ButtonTooltip
-            type="text"
+            variant="text"
             className="w-7 h-7 p-0"
             onClick={handleClosePanel}
             icon={<X strokeWidth={1.5} />}
@@ -577,7 +577,7 @@ export const EditorPanel = () => {
               </span>
               <Button
                 size="tiny"
-                type="default"
+                variant="default"
                 className="ml-2"
                 onClick={() => setShowResults((prev) => !prev)}
               >
@@ -617,7 +617,7 @@ export const EditorPanel = () => {
             </div>
           )}
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             disabled={
               !currentValue ||
diff --git a/apps/studio/components/ui/EditorPanel/SaveSnippetDialog.tsx b/apps/studio/components/ui/EditorPanel/SaveSnippetDialog.tsx
index 568b5046d3e..0536a008a27 100644
--- a/apps/studio/components/ui/EditorPanel/SaveSnippetDialog.tsx
+++ b/apps/studio/components/ui/EditorPanel/SaveSnippetDialog.tsx
@@ -77,7 +77,7 @@ export const SaveSnippetDialog = ({ open, sql, onOpenChange, onSave }: SaveSnipp
           </div>
           <div className="flex justify-end">
             <ButtonTooltip
-              type="default"
+              variant="default"
               size="tiny"
               disabled={isGenerating || !isApiKeySet || isHipaaProjectDisallowed || isAiOptedOut}
               onClick={() => generateTitle({ sql })}
@@ -105,7 +105,7 @@ export const SaveSnippetDialog = ({ open, sql, onOpenChange, onSave }: SaveSnipp
         </DialogSection>
         <DialogSectionSeparator />
         <DialogFooter className="px-5 py-4">
-          <Button type="default" onClick={() => onOpenChange(false)}>
+          <Button variant="default" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button disabled={!name.trim()} onClick={handleSave}>
diff --git a/apps/studio/components/ui/Error.tsx b/apps/studio/components/ui/Error.tsx
index 555929a6e73..8acbfd7f0af 100644
--- a/apps/studio/components/ui/Error.tsx
+++ b/apps/studio/components/ui/Error.tsx
@@ -22,7 +22,7 @@ export default function EmptyPageState({ error }: any) {
         <Button asChild>
           <Link href="/projects">Head back</Link>
         </Button>
-        <Button asChild type="secondary">
+        <Button asChild variant="secondary">
           <SupportLink>Submit a support request</SupportLink>
         </Button>
       </div>
diff --git a/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx b/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
index 0ecd43f484e..be3593e61ae 100644
--- a/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
+++ b/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
@@ -37,7 +37,7 @@ export const ClientSideExceptionHandler = ({
       <div className="flex flex-col gap-y-1 text-left py-2 w-full">
         <div className="flex items-center justify-between mb-3">
           <p className="text-lg font-bold">Sorry! An unexpected error occurred.</p>
-          <CopyButton type="outline" text={message} copyLabel="Copy error" />
+          <CopyButton variant="outline" text={message} copyLabel="Copy error" />
         </div>
         <p className="text-sm">
           Application error: a client-side exception has occurred (see browser console for more
@@ -80,7 +80,7 @@ export const ClientSideExceptionHandler = ({
       </Admonition>
 
       <div className={cn('w-full mx-auto grid gap-2', 'grid-cols-2 sm:w-1/2')}>
-        <Button asChild type="default" icon={<ExternalLink />}>
+        <Button asChild variant="default" icon={<ExternalLink />}>
           <SupportLink
             queryParams={{
               category: SupportCategories.DASHBOARD_BUG,
@@ -96,11 +96,11 @@ export const ClientSideExceptionHandler = ({
         {/* [Joshen] For local and staging, allow us to escape the error boundary */}
         {/* We could actually investigate how to make this available on prod, but without being able to reliably test this, I'm not keen to do it now */}
         {isProduction ? (
-          <Button type="outline" onClick={() => router.reload()}>
+          <Button variant="outline" onClick={() => router.reload()}>
             Reload dashboard
           </Button>
         ) : (
-          <Button type="outline" onClick={() => resetErrorBoundary()}>
+          <Button variant="outline" onClick={() => resetErrorBoundary()}>
             Return to dashboard
           </Button>
         )}
diff --git a/apps/studio/components/ui/ErrorBoundary/ErrorBoundary.tsx b/apps/studio/components/ui/ErrorBoundary/ErrorBoundary.tsx
index 97f37d97a86..56b16321fb1 100644
--- a/apps/studio/components/ui/ErrorBoundary/ErrorBoundary.tsx
+++ b/apps/studio/components/ui/ErrorBoundary/ErrorBoundary.tsx
@@ -28,11 +28,11 @@ const ErrorFallback = ({
         <AlertTitle>{message}</AlertTitle>
         <AlertDescription>We've been notified and will review and fix this issue.</AlertDescription>
         <div className="mt-4 flex gap-2">
-          <Button type="default" onClick={resetErrorBoundary} className="text-sm">
+          <Button variant="default" onClick={resetErrorBoundary} className="text-sm">
             Try again
           </Button>
           {actions?.map((action, index) => (
-            <Button key={index} type="default" onClick={action.onClick} className="text-sm">
+            <Button key={index} variant="default" onClick={action.onClick} className="text-sm">
               {action.label}
             </Button>
           ))}
diff --git a/apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx b/apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx
index 3e19a3125ea..21c0b0adf50 100644
--- a/apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx
+++ b/apps/studio/components/ui/ErrorBoundary/InsertBeforeRemoveChildErrorHandler.tsx
@@ -54,7 +54,7 @@ export const InsertBeforeRemoveChildErrorHandler = ({
       </div>
 
       <div className="flex gap-x-2 justify-center items-center">
-        <Button asChild type="default" icon={<ExternalLink />}>
+        <Button asChild variant="default" icon={<ExternalLink />}>
           <a
             target="_blank"
             rel="noreferrer"
@@ -69,7 +69,7 @@ export const InsertBeforeRemoveChildErrorHandler = ({
             More information
           </a>
         </Button>
-        <Button type="outline" onClick={() => router.reload()}>
+        <Button variant="outline" onClick={() => router.reload()}>
           Refresh page
         </Button>
       </div>
diff --git a/apps/studio/components/ui/FeatureBanner.tsx b/apps/studio/components/ui/FeatureBanner.tsx
index 00c175202b5..b6f0550b82d 100644
--- a/apps/studio/components/ui/FeatureBanner.tsx
+++ b/apps/studio/components/ui/FeatureBanner.tsx
@@ -74,7 +74,7 @@ export const FeatureBanner = ({
       {dismissable && storageKey && (
         <div className={cn('absolute top-3 right-3', dismissClassName)}>
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             icon={<X size={16} strokeWidth={1.5} />}
             onClick={() => setIsDismissed(true)}
diff --git a/apps/studio/components/ui/FileExplorerAndEditor/index.tsx b/apps/studio/components/ui/FileExplorerAndEditor/index.tsx
index 7faffd09f24..a1ce9578e5c 100644
--- a/apps/studio/components/ui/FileExplorerAndEditor/index.tsx
+++ b/apps/studio/components/ui/FileExplorerAndEditor/index.tsx
@@ -398,7 +398,7 @@ export const FileExplorerAndEditor = ({
             Files
           </h3>
           {IS_PLATFORM && (
-            <Button size="tiny" type="default" icon={<Plus size={14} />} onClick={addNewFile}>
+            <Button size="tiny" variant="default" icon={<Plus size={14} />} onClick={addNewFile}>
               Add File
             </Button>
           )}
diff --git a/apps/studio/components/ui/FilterPopover.tsx b/apps/studio/components/ui/FilterPopover.tsx
index 4eb6e055d6c..4832d2ca036 100644
--- a/apps/studio/components/ui/FilterPopover.tsx
+++ b/apps/studio/components/ui/FilterPopover.tsx
@@ -182,7 +182,7 @@ export const FilterPopover = <T extends Record<string, any>>({
         <Button
           asChild
           disabled={disabled}
-          type={buttonType ?? (activeOptions.length > 0 ? 'default' : 'dashed')}
+          variant={buttonType ?? (activeOptions.length > 0 ? 'default' : 'dashed')}
           onClick={() => setOpen(false)}
           className={variant === 'rounded' ? 'rounded-full' : ''}
           iconRight={<ChevronDown />}
@@ -271,7 +271,7 @@ export const FilterPopover = <T extends Record<string, any>>({
         <div className="flex items-center justify-end gap-2 border-t border-overlay bg-surface-200 py-2 px-3">
           <Button
             size="tiny"
-            type="default"
+            variant="default"
             onClick={() => {
               onSaveFilters([])
               setSelectedOptions([])
@@ -281,7 +281,7 @@ export const FilterPopover = <T extends Record<string, any>>({
             {clearButtonText}
           </Button>
           <Button
-            type="primary"
+            variant="primary"
             onClick={() => {
               // Order the selection based on the options provided
               const sortingOrder = options.map((option) => option[valueKey]) as string[]
diff --git a/apps/studio/components/ui/Forms/FormActions.tsx b/apps/studio/components/ui/Forms/FormActions.tsx
index cb1410c04b2..d30a5468ce7 100644
--- a/apps/studio/components/ui/Forms/FormActions.tsx
+++ b/apps/studio/components/ui/Forms/FormActions.tsx
@@ -31,13 +31,13 @@ export const FormActions = ({
     >
       {helper && <span className="text-sm text-foreground-lighter">{helper}</span>}
       <div className="flex items-center gap-2">
-        <Button disabled={isDisabled} type="default" htmlType="reset" onClick={() => handleReset()}>
+        <Button disabled={isDisabled} variant="default" type="reset" onClick={() => handleReset()}>
           Cancel
         </Button>
         <Button
           form={form}
-          type="primary"
-          htmlType="submit"
+          variant="primary"
+          type="submit"
           disabled={isDisabled}
           loading={isSubmitting}
         >
diff --git a/apps/studio/components/ui/FunctionSelector.tsx b/apps/studio/components/ui/FunctionSelector.tsx
index 19c206746e4..b0ed938c0a1 100644
--- a/apps/studio/components/ui/FunctionSelector.tsx
+++ b/apps/studio/components/ui/FunctionSelector.tsx
@@ -81,7 +81,7 @@ const FunctionSelector = ({
   return (
     <div className={className}>
       {isLoading && (
-        <Button type="default" className="justify-start" block size={size} loading>
+        <Button variant="default" className="justify-start" block size={size} loading>
           Loading functions...
         </Button>
       )}
@@ -92,7 +92,7 @@ const FunctionSelector = ({
 
           <AlertDescription className="text-xs mb-2">Error: {error.message}</AlertDescription>
 
-          <Button type="default" size="tiny" onClick={() => refetch()}>
+          <Button variant="default" size="tiny" onClick={() => refetch()}>
             Reload functions
           </Button>
         </Alert>
@@ -104,7 +104,7 @@ const FunctionSelector = ({
             <Button
               size={size}
               disabled={!!disabled}
-              type="default"
+              variant="default"
               className={`w-full [&>span]:w-full ${size === 'small' ? 'py-1.5' : ''}`}
               iconRight={
                 <ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />
diff --git a/apps/studio/components/ui/GlobalShortcuts/ShortcutsReferenceSheet.tsx b/apps/studio/components/ui/GlobalShortcuts/ShortcutsReferenceSheet.tsx
index 6fd06f477b2..3dcd50f2f9d 100644
--- a/apps/studio/components/ui/GlobalShortcuts/ShortcutsReferenceSheet.tsx
+++ b/apps/studio/components/ui/GlobalShortcuts/ShortcutsReferenceSheet.tsx
@@ -204,7 +204,7 @@ function ShortcutsReferenceSheetContent() {
               <Button
                 aria-label="Clear search"
                 size="tiny"
-                type="text"
+                variant="text"
                 icon={<CircleX size={14} />}
                 onClick={() => setSearch('')}
                 className="h-5 w-5 p-0"
diff --git a/apps/studio/components/ui/GrafanaPromoBanner.tsx b/apps/studio/components/ui/GrafanaPromoBanner.tsx
index c71ba4d14e1..05460f6f0ba 100644
--- a/apps/studio/components/ui/GrafanaPromoBanner.tsx
+++ b/apps/studio/components/ui/GrafanaPromoBanner.tsx
@@ -53,7 +53,7 @@ const GrafanaBannerActions = ({ className }: { className?: string }) => {
 
   return (
     <div className={cn('flex gap-2', className)}>
-      <Button type="outline" className="bg-alternative" size="tiny" icon={<BookOpen />} asChild>
+      <Button variant="outline" className="bg-alternative" size="tiny" icon={<BookOpen />} asChild>
         <Link
           href={`${DOCS_URL}/guides/telemetry/metrics`}
           target="_blank"
@@ -62,7 +62,7 @@ const GrafanaBannerActions = ({ className }: { className?: string }) => {
           Docs
         </Link>
       </Button>
-      <Button type="default" size="tiny" asChild>
+      <Button variant="default" size="tiny" asChild>
         <Link
           href="https://github.com/supabase/supabase-grafana"
           target="_blank"
diff --git a/apps/studio/components/ui/HelpPanel/HelpButton.tsx b/apps/studio/components/ui/HelpPanel/HelpButton.tsx
index 102035ff4c2..4390d6228a0 100644
--- a/apps/studio/components/ui/HelpPanel/HelpButton.tsx
+++ b/apps/studio/components/ui/HelpPanel/HelpButton.tsx
@@ -15,7 +15,7 @@ export const HelpButton = () => {
   return (
     <ButtonTooltip
       id="help-dropdown-button"
-      type={isOpen ? 'secondary' : 'outline'}
+      variant={isOpen ? 'secondary' : 'outline'}
       size="tiny"
       className={cn('rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 group')}
       onClick={() => {
diff --git a/apps/studio/components/ui/HelpPanel/HelpPanel.tsx b/apps/studio/components/ui/HelpPanel/HelpPanel.tsx
index e23a566cbd4..82db3d0c7d3 100644
--- a/apps/studio/components/ui/HelpPanel/HelpPanel.tsx
+++ b/apps/studio/components/ui/HelpPanel/HelpPanel.tsx
@@ -44,7 +44,7 @@ export const HelpPanel = ({
         <div className="flex min-w-0 items-center gap-1.5 text-xs">
           {isSupportView && (
             <ButtonTooltip
-              type="text"
+              variant="text"
               className="h-7 w-7"
               onClick={() => setView('home')}
               icon={<ChevronLeft strokeWidth={1.5} />}
@@ -56,7 +56,7 @@ export const HelpPanel = ({
         <div className="flex items-center gap-2">
           <SupportFormStatusButton />
           <ButtonTooltip
-            type="text"
+            variant="text"
             className="w-7 h-7"
             onClick={() => closeSidebar(SIDEBAR_KEYS.HELP_PANEL)}
             icon={<X strokeWidth={1.5} />}
@@ -107,7 +107,7 @@ export const HelpPanel = ({
                       alt="Discord illustration"
                     />
                     <Button
-                      type="secondary"
+                      variant="secondary"
                       size="tiny"
                       icon={
                         <SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />
diff --git a/apps/studio/components/ui/HighQueryCost.tsx b/apps/studio/components/ui/HighQueryCost.tsx
index ce092d20f4c..ceb63c37c43 100644
--- a/apps/studio/components/ui/HighQueryCost.tsx
+++ b/apps/studio/components/ui/HighQueryCost.tsx
@@ -54,7 +54,7 @@ const HighQueryCostDialog = ({ error, suggestions = [] }: HighQueryCostErrorProp
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="outline">Learn more</Button>
+        <Button variant="outline">Learn more</Button>
       </DialogTrigger>
       <DialogContent onOpenAutoFocus={(event) => event.preventDefault()}>
         <DialogHeader>
@@ -112,7 +112,7 @@ const HighQueryCostDialog = ({ error, suggestions = [] }: HighQueryCostErrorProp
             href={`${DOCS_URL}/guides/troubleshooting/understanding-postgresql-explain-output-Un9dqX`}
           />
           <DialogClose asChild>
-            <Button type="default" className="opacity-100">
+            <Button variant="default" className="opacity-100">
               Understood
             </Button>
           </DialogClose>
@@ -134,7 +134,7 @@ const LoadDataWarningDialog = ({
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button type="default">Load data</Button>
+        <Button variant="default">Load data</Button>
       </DialogTrigger>
       <DialogContent onOpenAutoFocus={(event) => event.preventDefault()}>
         <DialogHeader>
@@ -167,12 +167,12 @@ const LoadDataWarningDialog = ({
         </DialogSection>
         <DialogFooter>
           <DialogClose asChild>
-            <Button type="default" className="opacity-100">
+            <Button variant="default" className="opacity-100">
               Cancel
             </Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button type="warning" onClick={() => onSelectLoadData()}>
+            <Button variant="warning" onClick={() => onSelectLoadData()}>
               I understand, proceed
             </Button>
           </DialogClose>
diff --git a/apps/studio/components/ui/InformationBox.tsx b/apps/studio/components/ui/InformationBox.tsx
index 6bf597b1130..ab386bee982 100644
--- a/apps/studio/components/ui/InformationBox.tsx
+++ b/apps/studio/components/ui/InformationBox.tsx
@@ -75,7 +75,7 @@ const InformationBox = forwardRef<HTMLDivElement, InformationBoxProps>(
 
               {url && (
                 <div>
-                  <Button asChild type="default" icon={<ExternalLink />}>
+                  <Button asChild variant="default" icon={<ExternalLink />}>
                     <Link href={url} target="_blank" rel="noreferrer">
                       {urlLabel}
                     </Link>
diff --git a/apps/studio/components/ui/Logs/ChartIntervalDropdown.tsx b/apps/studio/components/ui/Logs/ChartIntervalDropdown.tsx
index 10baeacf701..02512903ca2 100644
--- a/apps/studio/components/ui/Logs/ChartIntervalDropdown.tsx
+++ b/apps/studio/components/ui/Logs/ChartIntervalDropdown.tsx
@@ -48,7 +48,7 @@ export const ChartIntervalDropdown = ({
   return (
     <DropdownMenu open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>
-        <Button type="default" iconRight={<ChevronDown size={14} />}>
+        <Button variant="default" iconRight={<ChevronDown size={14} />}>
           <span>{selectedInterval.label}</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
index 8f530ad8036..1a2f195b8b0 100644
--- a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -56,7 +56,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
             <div className="flex flex-row justify-between items-center">
               <h3>Field Reference</h3>
               <Button
-                type="text"
+                variant="text"
                 className="px-1"
                 onClick={() => setShowReference(false)}
                 icon={<X size={18} strokeWidth={1.5} />}
@@ -69,7 +69,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
           hideFooter
           triggerElement={
             <Button
-              type="default"
+              variant="default"
               onClick={() => setShowReference(true)}
               icon={<BookOpen strokeWidth={1.5} />}
             >
@@ -104,7 +104,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
             <Popover open={open} onOpenChange={setOpen}>
               <PopoverTrigger asChild>
                 <Button
-                  type="default"
+                  variant="default"
                   role="combobox"
                   size={'small'}
                   aria-expanded={open}
diff --git a/apps/studio/components/ui/NoSearchResults.tsx b/apps/studio/components/ui/NoSearchResults.tsx
index 65b80adaf2c..368af842d8f 100644
--- a/apps/studio/components/ui/NoSearchResults.tsx
+++ b/apps/studio/components/ui/NoSearchResults.tsx
@@ -32,7 +32,7 @@ export const NoSearchResults = ({
         </p>
       </div>
       {onResetFilter !== undefined && (
-        <Button type="default" onClick={() => onResetFilter()}>
+        <Button variant="default" onClick={() => onResetFilter()}>
           Reset filter
         </Button>
       )}
diff --git a/apps/studio/components/ui/OrganizationProjectSelector.tsx b/apps/studio/components/ui/OrganizationProjectSelector.tsx
index 38b9e9d6413..34873b2b48b 100644
--- a/apps/studio/components/ui/OrganizationProjectSelector.tsx
+++ b/apps/studio/components/ui/OrganizationProjectSelector.tsx
@@ -272,7 +272,7 @@ export const OrganizationProjectSelector = ({
         ) : (
           <Button
             block
-            type="default"
+            variant="default"
             role="combobox"
             size="small"
             aria-expanded={open}
diff --git a/apps/studio/components/ui/Panel.tsx b/apps/studio/components/ui/Panel.tsx
index 039b90bdc00..4612f135103 100644
--- a/apps/studio/components/ui/Panel.tsx
+++ b/apps/studio/components/ui/Panel.tsx
@@ -134,7 +134,7 @@ const PanelNotice = forwardRef<
           )}
         </div>
         {href && (
-          <Button size="tiny" type="default" className="text-xs" asChild>
+          <Button size="tiny" variant="default" className="text-xs" asChild>
             <a href={href} target="_blank" rel="noreferrer noopener">
               {buttonText ?? 'Read the accouncement'}
             </a>
diff --git a/apps/studio/components/ui/PartnerManagedResource.tsx b/apps/studio/components/ui/PartnerManagedResource.tsx
index 5b5c0ff5ad3..3162fbafb4d 100644
--- a/apps/studio/components/ui/PartnerManagedResource.tsx
+++ b/apps/studio/components/ui/PartnerManagedResource.tsx
@@ -86,7 +86,7 @@ function PartnerManagedResource({
       {details && <div className="text-sm text-foreground-light text-center">{details}</div>}
 
       {showCta && (
-        <Button asChild type="default" iconRight={<ExternalLink />}>
+        <Button asChild variant="default" iconRight={<ExternalLink />}>
           <a href={ctaUrl} target="_blank" rel="noopener noreferrer">
             {cta?.message || `View ${resource} on ${PARTNER_TO_NAME[managedBy]}`}
           </a>
diff --git a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
index d509f5ffd2e..a1c2ecb786a 100644
--- a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
+++ b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -68,7 +68,7 @@ export const ProductMenuItem = ({
   if (url) {
     if (isExternal) {
       const externalLink = (
-        <Button asChild block className="justify-start!" type="text" size="small" icon={icon}>
+        <Button asChild block className="justify-start!" variant="text" size="small" icon={icon}>
           <Link href={url} target="_blank" rel="noreferrer">
             {name}
           </Link>
diff --git a/apps/studio/components/ui/ProjectSettings/ToggleLegacyApiKeys.tsx b/apps/studio/components/ui/ProjectSettings/ToggleLegacyApiKeys.tsx
index c965b5991cf..68cbfd2ca26 100644
--- a/apps/studio/components/ui/ProjectSettings/ToggleLegacyApiKeys.tsx
+++ b/apps/studio/components/ui/ProjectSettings/ToggleLegacyApiKeys.tsx
@@ -104,7 +104,7 @@ export const ToggleLegacyApiKeysPanel = () => {
             </div>
             <div className="flex items-center">
               <ButtonTooltip
-                type="default"
+                variant="default"
                 onClick={
                   isLegacyKeysEnabled && (authorizedApps?.length || isAuthorizedAppsError)
                     ? () => setIsAppsWarningOpen(true)
diff --git a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
index af78b93ba15..b64761076ba 100644
--- a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
+++ b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
@@ -46,7 +46,7 @@ export const ProjectUpgradeFailedBanner = () => {
         type="warning"
         title={`Postgres version upgrade was not successful (Initiated at ${initiatedAt})`}
         actions={
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <SupportLink
               queryParams={{
                 category: SupportCategories.DATABASE_UNRESPONSIVE,
diff --git a/apps/studio/components/ui/QueryBlock/BlockViewConfiguration.tsx b/apps/studio/components/ui/QueryBlock/BlockViewConfiguration.tsx
index 245671c6f54..50b1ee2d27f 100644
--- a/apps/studio/components/ui/QueryBlock/BlockViewConfiguration.tsx
+++ b/apps/studio/components/ui/QueryBlock/BlockViewConfiguration.tsx
@@ -41,7 +41,7 @@ export const BlockViewConfiguration = ({
       <PopoverTrigger asChild>
         <ButtonTooltip
           id="help-popover-button"
-          type="text"
+          variant="text"
           className="px-1"
           icon={<Settings2 size={14} strokeWidth={1.5} />}
           tooltip={{ content: { side: 'bottom', text: 'View data' } }}
diff --git a/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx b/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx
index 0f40adad39d..8e70d54fcfa 100644
--- a/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx
+++ b/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx
@@ -25,7 +25,7 @@ interface EditQueryButtonProps {
   title: string
   sql?: string
   className?: string
-  type?: 'default' | 'text'
+  variant?: 'default' | 'text'
 }
 
 export const EditQueryButton = ({
@@ -33,7 +33,7 @@ export const EditQueryButton = ({
   sql,
   title,
   className,
-  type = 'text',
+  variant = 'text',
 }: EditQueryButtonProps) => {
   const router = useRouter()
   const { newQuery } = useNewQuery()
@@ -53,7 +53,7 @@ export const EditQueryButton = ({
   if (id !== undefined) {
     return (
       <ButtonTooltip
-        type={type}
+        variant={variant}
         size="tiny"
         className={cn('w-7 h-7', className)}
         icon={<Edit size={14} strokeWidth={1.5} />}
@@ -68,7 +68,7 @@ export const EditQueryButton = ({
 
   return !isInSQLEditor || isInNewSnippet ? (
     <ButtonTooltip
-      type={type}
+      variant={variant}
       size="tiny"
       className={cn('w-7 h-7', className)}
       icon={<Edit size={14} strokeWidth={1.5} />}
@@ -92,7 +92,7 @@ export const EditQueryButton = ({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <ButtonTooltip
-          type={type}
+          variant={variant}
           size="tiny"
           disabled={!sql}
           className={cn('w-7 h-7', className)}
diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
index 50d18225885..43e8d866c81 100644
--- a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
+++ b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
@@ -166,7 +166,7 @@ export const QueryBlock = ({
           {!disabled && (
             <>
               <ButtonTooltip
-                type="text"
+                variant="text"
                 size="tiny"
                 className="w-7 h-7"
                 icon={<Code size={14} strokeWidth={1.5} />}
@@ -196,7 +196,7 @@ export const QueryBlock = ({
 
               <EditQueryButton id={id} title={label} sql={sql} />
               <ButtonTooltip
-                type="text"
+                variant="text"
                 size="tiny"
                 className="w-7 h-7"
                 icon={<Play size={14} strokeWidth={1.5} />}
@@ -373,7 +373,7 @@ export const QueryBlock = ({
                 Queries that involve any mutation will not be run in reports
               </p>
               {!!onRemoveChart && (
-                <Button type="default" className="mt-2" onClick={() => onRemoveChart()}>
+                <Button variant="default" className="mt-2" onClick={() => onRemoveChart()}>
                   Remove chart
                 </Button>
               )}
diff --git a/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx b/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx
index 078c8dc239c..8eeebba0016 100644
--- a/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx
+++ b/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx
@@ -48,7 +48,7 @@ interface RequestUpgradeToBillingOwnersProps {
   /** Used in the default message template, e.g: "Upgrade to ..." */
   featureProposition?: string
   className?: string
-  type?: 'primary' | 'default'
+  variant?: 'primary' | 'default'
 }
 
 export const RequestUpgradeToBillingOwners = ({
@@ -58,7 +58,7 @@ export const RequestUpgradeToBillingOwners = ({
   featureProposition,
   children,
   className,
-  type = 'primary',
+  variant = 'primary',
 }: PropsWithChildren<RequestUpgradeToBillingOwnersProps>) => {
   const [open, setOpen] = useState(false)
   const track = useTrack()
@@ -162,7 +162,7 @@ export const RequestUpgradeToBillingOwners = ({
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
-        <Button block={block} type={type} className={className}>
+        <Button block={block} variant={variant} className={className}>
           {buttonText}
         </Button>
       </DialogTrigger>
@@ -236,10 +236,10 @@ export const RequestUpgradeToBillingOwners = ({
             </DialogSection>
 
             <DialogFooter>
-              <Button type="default" disabled={isSubmitting} onClick={() => setOpen(false)}>
+              <Button variant="default" disabled={isSubmitting} onClick={() => setOpen(false)}>
                 Cancel
               </Button>
-              <Button htmlType="submit" form={formId} loading={isSubmitting}>
+              <Button type="submit" form={formId} loading={isSubmitting}>
                 Submit request
               </Button>
             </DialogFooter>
diff --git a/apps/studio/components/ui/Resource/ResourceItem.tsx b/apps/studio/components/ui/Resource/ResourceItem.tsx
index 0f7b76a315a..deb566d4980 100644
--- a/apps/studio/components/ui/Resource/ResourceItem.tsx
+++ b/apps/studio/components/ui/Resource/ResourceItem.tsx
@@ -68,7 +68,7 @@ export const ResourceItem = forwardRef<HTMLDivElement, ResourceItemProps>(
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="text"
+                variant="text"
                 className="px-1"
                 icon={<MoreVertical size={16} />}
                 onClick={(e) => {
diff --git a/apps/studio/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.tsx b/apps/studio/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.tsx
index 56a172de247..9a2acba857a 100644
--- a/apps/studio/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.tsx
+++ b/apps/studio/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.tsx
@@ -241,7 +241,7 @@ export const ResourceExhaustionWarningBanner = () => {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 icon={<Wrench size={14} />}
                 iconRight={<ChevronDown size={14} />}
               >
@@ -278,20 +278,20 @@ export const ResourceExhaustionWarningBanner = () => {
             </DropdownMenuContent>
           </DropdownMenu>
         ) : learnMoreUrl !== undefined ? (
-          <Button asChild type="default" icon={<BookOpen size={14} />}>
+          <Button asChild variant="default" icon={<BookOpen size={14} />}>
             <a href={learnMoreUrl} target="_blank" rel="noreferrer">
               Learn more
             </a>
           </Button>
         ) : aiPrompt !== undefined ? (
-          <Button type="default" onClick={handleAskAI}>
+          <Button variant="default" onClick={handleAskAI}>
             Ask AI Assistant
           </Button>
         ) : null}
         {correctionUrl !== undefined && (
           <Button
             asChild
-            type="primary"
+            variant="primary"
             disabled={isComputeUpgradeMetric && isOrgLoading}
             onClick={() =>
               track('resource_exhaustion_banner_upgrade_clicked', {
diff --git a/apps/studio/components/ui/SchemaComboBox.tsx b/apps/studio/components/ui/SchemaComboBox.tsx
index ce0f5f0fc9f..99ea921f230 100644
--- a/apps/studio/components/ui/SchemaComboBox.tsx
+++ b/apps/studio/components/ui/SchemaComboBox.tsx
@@ -73,7 +73,7 @@ export const SchemaComboBox = ({
   return (
     <div className={className}>
       {isSchemasLoading && (
-        <Button type="default" className="justify-start" block size={size} loading>
+        <Button variant="default" className="justify-start" block size={size} loading>
           Loading schemas...
         </Button>
       )}
@@ -84,7 +84,7 @@ export const SchemaComboBox = ({
           <AlertDescription className="text-xs mb-2 wrap-break-word">
             Error: {(schemasError as any)?.message}
           </AlertDescription>
-          <Button type="default" size="tiny" onClick={() => refetchSchemas()}>
+          <Button variant="default" size="tiny" onClick={() => refetchSchemas()}>
             Reload schemas
           </Button>
         </Alert>
@@ -96,7 +96,7 @@ export const SchemaComboBox = ({
             <Button
               size={size}
               disabled={disabled}
-              type="default"
+              variant="default"
               className={`w-full [&>span]:w-full`}
               iconRight={
                 <ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />
diff --git a/apps/studio/components/ui/SchemaSelector.tsx b/apps/studio/components/ui/SchemaSelector.tsx
index bc7832fe38c..e4b50fd9086 100644
--- a/apps/studio/components/ui/SchemaSelector.tsx
+++ b/apps/studio/components/ui/SchemaSelector.tsx
@@ -94,7 +94,7 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
       <div ref={ref} className={className} {...rest}>
         {isSchemasLoading && (
           <Button
-            type="default"
+            variant="default"
             key="schema-selector-skeleton"
             className="w-full [&>span]:w-full"
             size={size}
@@ -110,7 +110,7 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
             <AlertDescription className="text-xs mb-2 wrap-break-word">
               Error: {(schemasError as any)?.message}
             </AlertDescription>
-            <Button type="default" size="tiny" onClick={() => refetchSchemas()}>
+            <Button variant="default" size="tiny" onClick={() => refetchSchemas()}>
               Reload schemas
             </Button>
           </Alert>
@@ -122,7 +122,7 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
               <Button
                 size={size}
                 disabled={disabled}
-                type="default"
+                variant="default"
                 data-testid="schema-selector"
                 className={`w-full [&>span]:w-full pr-1! space-x-1`}
                 iconRight={
diff --git a/apps/studio/components/ui/SortDropdown.tsx b/apps/studio/components/ui/SortDropdown.tsx
index a47308b87e5..6c202d62045 100644
--- a/apps/studio/components/ui/SortDropdown.tsx
+++ b/apps/studio/components/ui/SortDropdown.tsx
@@ -30,7 +30,7 @@ export const SortDropdown = ({ options, value, setValue }: SortDropdownProps) =>
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           icon={sortOrder === 'desc' ? <ArrowDownWideNarrow /> : <ArrowDownNarrowWide />}
         >
           Sorted by {columnLabel ?? sortColumn}
diff --git a/apps/studio/components/ui/SqlWarningAdmonition.tsx b/apps/studio/components/ui/SqlWarningAdmonition.tsx
index 039c03c817f..6c89532ab16 100644
--- a/apps/studio/components/ui/SqlWarningAdmonition.tsx
+++ b/apps/studio/components/ui/SqlWarningAdmonition.tsx
@@ -45,11 +45,11 @@ export const SqlWarningAdmonition = ({
         {subMessage ?? 'Make sure you are not accidentally removing something important.'}
       </p>
       <div className="flex justify-stretch mt-2 gap-2">
-        <Button type="outline" size="tiny" className="w-full flex-1" onClick={onCancel}>
+        <Button variant="outline" size="tiny" className="w-full flex-1" onClick={onCancel}>
           {cancelLabel ?? 'Cancel'}
         </Button>
         <Button
-          type="danger"
+          variant="danger"
           size="tiny"
           disabled={disabled}
           className="w-full flex-1"
diff --git a/apps/studio/components/ui/ToggleSpendCapButton.tsx b/apps/studio/components/ui/ToggleSpendCapButton.tsx
index a6d78a83b24..40d70e54ce9 100644
--- a/apps/studio/components/ui/ToggleSpendCapButton.tsx
+++ b/apps/studio/components/ui/ToggleSpendCapButton.tsx
@@ -8,12 +8,12 @@ import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganizati
 
 interface ToggleSpendCapButtonProps {
   action?: 'disable' | 'enable'
-  type?: 'default' | 'primary'
+  variant?: 'default' | 'primary'
 }
 
 export const ToggleSpendCapButton = ({
   action = 'disable',
-  type = 'default',
+  variant = 'default',
   children,
 }: PropsWithChildren<ToggleSpendCapButtonProps>) => {
   const { data: organization } = useSelectedOrganizationQuery()
@@ -37,7 +37,7 @@ export const ToggleSpendCapButton = ({
   )
 
   return (
-    <Button type={type} asChild>
+    <Button variant={variant} asChild>
       {link}
     </Button>
   )
diff --git a/apps/studio/components/ui/UnknownInterface.tsx b/apps/studio/components/ui/UnknownInterface.tsx
index c4e694e3633..ff7ba4ef08d 100644
--- a/apps/studio/components/ui/UnknownInterface.tsx
+++ b/apps/studio/components/ui/UnknownInterface.tsx
@@ -17,7 +17,7 @@ export const UnknownInterface = ({
         title="Looking for something?"
         description="We couldn't find the page that you're looking for"
       >
-        <Button asChild type="default" className="mt-2">
+        <Button asChild variant="default" className="mt-2">
           <Link href={urlBack}>Head back</Link>
         </Button>
       </Admonition>
diff --git a/apps/studio/components/ui/UpgradePlanButton.tsx b/apps/studio/components/ui/UpgradePlanButton.tsx
index cf11df6a4e3..0b1a2bacc92 100644
--- a/apps/studio/components/ui/UpgradePlanButton.tsx
+++ b/apps/studio/components/ui/UpgradePlanButton.tsx
@@ -35,7 +35,7 @@ interface UpgradePlanButtonProps {
  */
 export const UpgradePlanButton = ({
   source,
-  variant: type = 'primary',
+  variant = 'primary',
   plan = 'Pro',
   addon,
   featureProposition,
@@ -97,7 +97,7 @@ export const UpgradePlanButton = ({
         addon={addon}
         featureProposition={featureProposition}
         className={className}
-        type={type}
+        variant={variant}
       >
         {children}
       </RequestUpgradeToBillingOwners>
@@ -108,7 +108,7 @@ export const UpgradePlanButton = ({
     return (
       <ButtonTooltip
         disabled
-        type={type}
+        variant={variant}
         className={className}
         tooltip={{
           content: {
@@ -123,7 +123,7 @@ export const UpgradePlanButton = ({
   }
 
   return (
-    <Button asChild type={type} disabled={disabled} className={className} onClick={onClick}>
+    <Button asChild variant={variant} disabled={disabled} className={className} onClick={onClick}>
       {link}
     </Button>
   )
diff --git a/apps/studio/components/ui/org-selector.tsx b/apps/studio/components/ui/org-selector.tsx
index 5be121dce5d..1faff645c14 100644
--- a/apps/studio/components/ui/org-selector.tsx
+++ b/apps/studio/components/ui/org-selector.tsx
@@ -158,7 +158,7 @@ export function OrganizationSelector({
                     setSearch('')
                     setShowAll(true)
                   }}
-                  type="default"
+                  variant="default"
                 >
                   Show all organizations
                 </Button>
@@ -172,7 +172,7 @@ export function OrganizationSelector({
           <CardHeader className="border-none">
             <CardTitle>Need a new organization?</CardTitle>
           </CardHeader>
-          <Button size="small" className="" asChild type="default">
+          <Button size="small" className="" asChild variant="default">
             <Link href={`/new?${searchParams.toString()}`}>New Organization</Link>
           </Button>
         </Card>
diff --git a/apps/studio/data/projects/project-detail-query.ts b/apps/studio/data/projects/project-detail-query.ts
index 0b7c83c5c22..ad3f3ae5266 100644
--- a/apps/studio/data/projects/project-detail-query.ts
+++ b/apps/studio/data/projects/project-detail-query.ts
@@ -118,7 +118,7 @@ export function prefetchProjectDetail(client: QueryClient, { ref }: ProjectDetai
   return client.fetchQuery({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: projectKeys.detail(ref),
-    queryFn: ({ signal }) => getProjectDetail({ ref }, signal, undefined, client),
+    queryFn: ({ client, signal }) => getProjectDetail({ ref }, signal, undefined, client),
   })
 }
 
diff --git a/apps/studio/data/table-rows/table-row-delete-mutation.tsx b/apps/studio/data/table-rows/table-row-delete-mutation.tsx
index 82158c4374f..9f5eb30b395 100644
--- a/apps/studio/data/table-rows/table-row-delete-mutation.tsx
+++ b/apps/studio/data/table-rows/table-row-delete-mutation.tsx
@@ -105,7 +105,7 @@ export const useTableRowDeleteMutation = ({
             action: (
               <div className="w-full flex gap-x-2 mx-0! mt-3">
                 {/* [Joshen] Ideally we also are able to add this CTA but we can't guarantee this info without an on-demand fetch */}
-                {/* <Button asChild key="cta-1" type="default">
+                {/* <Button asChild key="cta-1" variant="default">
                     <Link href={`/project/${projectRef}/editor`}>
                       View "{referencingTable}" table
                     </Link>
diff --git a/apps/studio/hooks/use-check-latest-deploy.tsx b/apps/studio/hooks/use-check-latest-deploy.tsx
index dbd0fa0f4c5..f695da8f0b4 100644
--- a/apps/studio/hooks/use-check-latest-deploy.tsx
+++ b/apps/studio/hooks/use-check-latest-deploy.tsx
@@ -21,7 +21,7 @@ const DeployCheckToast = ({ id }: { id: string | number }) => {
       </div>
 
       <div className="flex gap-5 justify-end">
-        <Button type="outline" onClick={() => toast.dismiss(id)}>
+        <Button variant="outline" onClick={() => toast.dismiss(id)}>
           Not now
         </Button>
         <Button onClick={() => router.reload()}>Refresh</Button>
diff --git a/apps/studio/pages/500.tsx b/apps/studio/pages/500.tsx
index 4acfadf36bb..85f3e13ece6 100644
--- a/apps/studio/pages/500.tsx
+++ b/apps/studio/pages/500.tsx
@@ -69,7 +69,7 @@ const Error500: NextPage = () => {
         ) : (
           <Button onClick={onClickLogout}>Head back</Button>
         )}
-        <Button type="secondary" asChild>
+        <Button variant="secondary" asChild>
           <SupportLink>Submit a support request</SupportLink>
         </Button>
       </div>
diff --git a/apps/studio/pages/account/tokens.tsx b/apps/studio/pages/account/tokens.tsx
index 894bba73196..f12f55577bf 100644
--- a/apps/studio/pages/account/tokens.tsx
+++ b/apps/studio/pages/account/tokens.tsx
@@ -40,12 +40,12 @@ const UserAccessTokens: NextPageWithLayout = () => {
             placeholder="Filter tokens"
           />
           <div className="flex items-center gap-x-2">
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <a href={`${DOCS_URL}/reference/api/introduction`} target="_blank" rel="noreferrer">
                 API Docs
               </a>
             </Button>
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <a href={`${DOCS_URL}/reference/cli/start`} target="_blank" rel="noreferrer">
                 CLI docs
               </a>
diff --git a/apps/studio/pages/account/tokens/scoped.tsx b/apps/studio/pages/account/tokens/scoped.tsx
index 7d4cc2c3f9f..61fa4dcd655 100644
--- a/apps/studio/pages/account/tokens/scoped.tsx
+++ b/apps/studio/pages/account/tokens/scoped.tsx
@@ -40,7 +40,7 @@ const ScopedTokens: NextPageWithLayout = () => {
             placeholder="Filter by name"
           />
           <div className="flex items-center gap-x-2">
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <a
                 href="https://supabase.com/docs/reference/api/introduction"
                 target="_blank"
@@ -49,7 +49,7 @@ const ScopedTokens: NextPageWithLayout = () => {
                 API Docs
               </a>
             </Button>
-            <Button asChild type="default" icon={<ExternalLink />}>
+            <Button asChild variant="default" icon={<ExternalLink />}>
               <a
                 href="https://supabase.com/docs/reference/cli/start"
                 target="_blank"
diff --git a/apps/studio/pages/cli/login.tsx b/apps/studio/pages/cli/login.tsx
index 3d435f20225..29132db3263 100644
--- a/apps/studio/pages/cli/login.tsx
+++ b/apps/studio/pages/cli/login.tsx
@@ -206,7 +206,7 @@ export const CliLoginScreen = ({
               isPlural ? 's' : ''
             }: ${status.missingParameters.join(', ')}.`}
           />
-          <Button type="default" block asChild>
+          <Button variant="default" block asChild>
             <Link href="/organizations">Back to dashboard</Link>
           </Button>
         </div>
@@ -234,7 +234,7 @@ export const CliLoginScreen = ({
               </>
             }
           />
-          <Button type="default" block asChild>
+          <Button variant="default" block asChild>
             <Link href="/organizations">Back to dashboard</Link>
           </Button>
         </div>
@@ -270,7 +270,7 @@ export const CliLoginScreen = ({
             text={status.deviceCode}
             copyLabel="Copy code"
             copiedLabel="Copied"
-            type="primary"
+            variant="primary"
             size="tiny"
             className="w-full"
           />
diff --git a/apps/studio/pages/maintenance.tsx b/apps/studio/pages/maintenance.tsx
index 49e2174ce3d..30606ceea4a 100644
--- a/apps/studio/pages/maintenance.tsx
+++ b/apps/studio/pages/maintenance.tsx
@@ -45,7 +45,7 @@ const MaintenancePage: NextPageWithLayout = () => {
           <p className="text-sm text-foreground-lighter">
             Reload the page to check if the maintenance window has ended
           </p>
-          <Button onClick={() => window.location.reload()} type="primary" icon={<RefreshCw />}>
+          <Button onClick={() => window.location.reload()} variant="primary" icon={<RefreshCw />}>
             Reload
           </Button>
         </div>
diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx
index 6ab70961c77..b700ec42b45 100644
--- a/apps/studio/pages/new/[slug].tsx
+++ b/apps/studio/pages/new/[slug].tsx
@@ -625,7 +625,7 @@ const Wizard: NextPageWithLayout = () => {
                             </p>
 
                             <div>
-                              <Button asChild type="default">
+                              <Button asChild variant="default">
                                 <Link href={`/org/${slug}/billing#invoices`}>View invoices</Link>
                               </Button>
                             </div>
diff --git a/apps/studio/pages/new/index.tsx b/apps/studio/pages/new/index.tsx
index a7294969f82..042a3f98ecf 100644
--- a/apps/studio/pages/new/index.tsx
+++ b/apps/studio/pages/new/index.tsx
@@ -29,7 +29,7 @@ const Wizard: NextPageWithLayout = () => {
 
   const { mutate: setupIntent } = useSetupIntent({ onSuccess: (res) => setIntent(res) })
 
-  const captchaRefCallback = useCallback((node: any) => {
+  const captchaRefCallback = useCallback((node: HCaptcha) => {
     setCaptchaRef(node)
   }, [])
 
diff --git a/apps/studio/pages/org/[slug]/index.tsx b/apps/studio/pages/org/[slug]/index.tsx
index 07955393c69..57bb03caaa7 100644
--- a/apps/studio/pages/org/[slug]/index.tsx
+++ b/apps/studio/pages/org/[slug]/index.tsx
@@ -37,7 +37,7 @@ const ProjectsPage: NextPageWithLayout = () => {
               </>
             }
             actions={
-              <Button asChild type="default">
+              <Button asChild variant="default">
                 <Link href="/account/security">Set up MFA</Link>
               </Button>
             }
diff --git a/apps/studio/pages/org/[slug]/private-apps/index.tsx b/apps/studio/pages/org/[slug]/private-apps/index.tsx
index afe0981b672..0d53e4d1414 100644
--- a/apps/studio/pages/org/[slug]/private-apps/index.tsx
+++ b/apps/studio/pages/org/[slug]/private-apps/index.tsx
@@ -67,7 +67,7 @@ function PrivateAppsContent() {
                   tooltipOpen={showCreate ? false : undefined}
                 >
                   <Button
-                    type="primary"
+                    variant="primary"
                     icon={<Plus size={14} />}
                     onClick={() => setShowCreate(true)}
                   >
diff --git a/apps/studio/pages/organizations.tsx b/apps/studio/pages/organizations.tsx
index 25526ce8b34..98fb524116e 100644
--- a/apps/studio/pages/organizations.tsx
+++ b/apps/studio/pages/organizations.tsx
@@ -92,7 +92,7 @@ const OrganizationsPage: NextPageWithLayout = () => {
               />
 
               {organizationCreationEnabled && (
-                <Button asChild icon={<Plus />} type="primary" className="w-min">
+                <Button asChild icon={<Plus />} variant="primary" className="w-min">
                   <Link href={`/new`}>New organization</Link>
                 </Button>
               )}
diff --git a/apps/studio/pages/partners/stripe/projects/login.tsx b/apps/studio/pages/partners/stripe/projects/login.tsx
index bb8d48bc9d4..b47974f4e79 100644
--- a/apps/studio/pages/partners/stripe/projects/login.tsx
+++ b/apps/studio/pages/partners/stripe/projects/login.tsx
@@ -130,7 +130,7 @@ const StripeProjectsLoginPage: NextPageWithLayout = () => {
                   </>
                 }
               />
-              <Button type="default" block onClick={() => signOut()}>
+              <Button variant="default" block onClick={() => signOut()}>
                 Sign out
               </Button>
             </div>
@@ -148,10 +148,10 @@ const StripeProjectsLoginPage: NextPageWithLayout = () => {
                 }
               />
               <div className="flex flex-col gap-2">
-                <Button type="primary" block loading={isConfirming} onClick={handleApprove}>
+                <Button variant="primary" block loading={isConfirming} onClick={handleApprove}>
                   Authorize Stripe Projects
                 </Button>
-                <Button type="text" block onClick={() => router.push('/')}>
+                <Button variant="text" block onClick={() => router.push('/')}>
                   Cancel
                 </Button>
               </div>
@@ -165,7 +165,7 @@ const StripeProjectsLoginPage: NextPageWithLayout = () => {
                 displayName={displayName}
                 action={
                   <ButtonTooltip
-                    type="text"
+                    variant="text"
                     size="small"
                     className="h-8 w-8 px-0"
                     onClick={() => signOut()}
@@ -184,14 +184,14 @@ const StripeProjectsLoginPage: NextPageWithLayout = () => {
 
               <div className="flex flex-col gap-2">
                 <Button
-                  type="primary"
+                  variant="primary"
                   loading={isConfirming}
                   disabled={isConfirming}
                   onClick={handleApprove}
                 >
                   Create organization
                 </Button>
-                <Button type="text" onClick={() => router.push('/')}>
+                <Button variant="text" onClick={() => router.push('/')}>
                   Cancel
                 </Button>
               </div>
@@ -205,7 +205,7 @@ const StripeProjectsLoginPage: NextPageWithLayout = () => {
                 title="Unable to load authorization"
                 description={error?.message}
               />
-              <Button type="default" block onClick={() => signOut()}>
+              <Button variant="default" block onClick={() => signOut()}>
                 Sign out
               </Button>
             </div>
diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/auth/policies.tsx
index a4ddd1f3ad8..43efa9f4c6c 100644
--- a/apps/studio/pages/project/[ref]/auth/policies.tsx
+++ b/apps/studio/pages/project/[ref]/auth/policies.tsx
@@ -342,7 +342,7 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
                   searchString ? (
                     <Button
                       size="tiny"
-                      type="text"
+                      variant="text"
                       className="p-0 h-5 w-5"
                       icon={<X />}
                       onClick={() => setSearchString('')}
diff --git a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
index 0f4bc4fd79c..eb1a858f741 100644
--- a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
+++ b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
@@ -169,7 +169,7 @@ const RedirectToTemplates = () => {
           title="Unable to find template"
           description={`${templateId ? `The template "${templateId}"` : 'This template'} doesn’t seem to exist.`}
         >
-          <Button asChild type="default" className="mt-2">
+          <Button asChild variant="default" className="mt-2">
             <Link href={`/project/${ref}/auth/templates`}>Head back</Link>
           </Button>
         </Admonition>
@@ -250,13 +250,13 @@ const RedirectToTemplates = () => {
                         </CardContent>
                         <CardFooter className="justify-end space-x-2">
                           {templateForm.formState.isDirty && (
-                            <Button type="default" onClick={() => templateForm.reset()}>
+                            <Button variant="default" onClick={() => templateForm.reset()}>
                               Cancel
                             </Button>
                           )}
                           <Button
-                            type="primary"
-                            htmlType="submit"
+                            variant="primary"
+                            type="submit"
                             disabled={
                               !canUpdateConfig ||
                               isUpdatingConfig ||
diff --git a/apps/studio/pages/project/[ref]/branches/index.tsx b/apps/studio/pages/project/[ref]/branches/index.tsx
index e479cec2ce0..ac37bdaede7 100644
--- a/apps/studio/pages/project/[ref]/branches/index.tsx
+++ b/apps/studio/pages/project/[ref]/branches/index.tsx
@@ -202,7 +202,7 @@ BranchesPage.getLayout = (page) => {
 
     const primaryActions = (
       <ButtonTooltip
-        type="primary"
+        variant="primary"
         disabled={!canCreateBranches}
         onClick={() => snap.setShowCreateBranchModal(true)}
         tooltip={{
@@ -220,7 +220,11 @@ BranchesPage.getLayout = (page) => {
 
     const secondaryActions = (
       <div className="flex items-center gap-x-2">
-        <Button asChild type="text" icon={<MessageCircle className="text-muted" strokeWidth={1} />}>
+        <Button
+          asChild
+          variant="text"
+          icon={<MessageCircle className="text-muted" strokeWidth={1} />}
+        >
           <a
             target="_blank"
             rel="noreferrer"
diff --git a/apps/studio/pages/project/[ref]/branches/merge-requests.tsx b/apps/studio/pages/project/[ref]/branches/merge-requests.tsx
index db24ab8e476..3f3d163aea7 100644
--- a/apps/studio/pages/project/[ref]/branches/merge-requests.tsx
+++ b/apps/studio/pages/project/[ref]/branches/merge-requests.tsx
@@ -187,7 +187,7 @@ const MergeRequestsPage: NextPageWithLayout = () => {
                             last viewed
                           </div>
                           <Button
-                            type="primary"
+                            variant="primary"
                             size="tiny"
                             loading={currentBranch && isUpdating}
                             onClick={() =>
@@ -252,7 +252,7 @@ const MergeRequestsPage: NextPageWithLayout = () => {
                                   <DropdownMenu>
                                     <DropdownMenuTrigger asChild>
                                       <Button
-                                        type="text"
+                                        variant="text"
                                         icon={<MoreVertical />}
                                         className="px-1"
                                         onClick={(e) => e.stopPropagation()}
@@ -366,7 +366,7 @@ const MergeRequestsPageWrapper = ({ children }: PropsWithChildren<{}>) => {
         <div className="flex items-center gap-x-2">
           <Button
             asChild
-            type="text"
+            variant="text"
             icon={<MessageCircle className="text-muted" strokeWidth={1} />}
           >
             <a
diff --git a/apps/studio/pages/project/[ref]/database/column-privileges.tsx b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
index 9bca371826b..d882afb19e1 100644
--- a/apps/studio/pages/project/[ref]/database/column-privileges.tsx
+++ b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
@@ -254,7 +254,7 @@ const PrivilegesPage: NextPageWithLayout = () => {
                     You will need to manually apply these changes to your database.
                   </AlertDescription>
                   <Button
-                    type="outline"
+                    variant="outline"
                     aria-label="Dismiss"
                     className="absolute top-2 right-2 p-1 pl-1!"
                     onClick={() => {
@@ -282,7 +282,7 @@ const PrivilegesPage: NextPageWithLayout = () => {
                     <code className="text-code-inline">delete</code>) will fail.
                   </AlertDescription>
                   <Button
-                    type="outline"
+                    variant="outline"
                     aria-label="Dismiss"
                     className="absolute top-2 right-2 p-1 pl-1!"
                     onClick={() => {
@@ -354,7 +354,7 @@ const PrivilegesPage: NextPageWithLayout = () => {
                 You may access this feature by enabling it under dashboard feature previews.
               </AlertDescription>
               <div className="mt-4">
-                <Button type="default" onClick={() => toggleFeaturePreviewModal(true)}>
+                <Button variant="default" onClick={() => toggleFeaturePreviewModal(true)}>
                   View feature previews
                 </Button>
               </div>
diff --git a/apps/studio/pages/project/[ref]/database/indexes.tsx b/apps/studio/pages/project/[ref]/database/indexes.tsx
index f9f558a88da..fac07b3af62 100644
--- a/apps/studio/pages/project/[ref]/database/indexes.tsx
+++ b/apps/studio/pages/project/[ref]/database/indexes.tsx
@@ -34,7 +34,7 @@ const IndexesPage: NextPageWithLayout = () => {
               className="no-underline"
               href={`${DOCS_URL}/guides/database/query-optimization`}
             />
-            <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
+            <Button asChild variant="default" icon={<ExternalLink strokeWidth={1.5} />}>
               <a
                 target="_blank"
                 rel="noreferrer"
diff --git a/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx b/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
index 222558d469a..20d6fd32952 100644
--- a/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
+++ b/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
@@ -113,7 +113,7 @@ const DatabaseReadReplicaPage: NextPageWithLayout = () => {
         ) : (
           <div className="flex items-center gap-x-2 mt-0!">
             <ScaffoldDescription>ID: {identifier}</ScaffoldDescription>
-            <CopyButton iconOnly type="default" text={identifier ?? ''} />
+            <CopyButton iconOnly variant="default" text={identifier ?? ''} />
           </div>
         )
       }
@@ -133,7 +133,7 @@ const DatabaseReadReplicaPage: NextPageWithLayout = () => {
       ]}
       secondaryActions={
         <ButtonTooltip
-          type="default"
+          variant="default"
           className="w-7"
           icon={<Trash />}
           tooltip={{
@@ -143,7 +143,7 @@ const DatabaseReadReplicaPage: NextPageWithLayout = () => {
         />
       }
       primaryActions={[
-        <Button asChild key="logs" type="default">
+        <Button asChild key="logs" variant="default">
           <Link
             href={`/project/${ref}/logs/postgres-logs${!!identifier ? `?db=${identifier}` : ''}`}
           >
@@ -152,7 +152,7 @@ const DatabaseReadReplicaPage: NextPageWithLayout = () => {
         </Button>,
         <Button
           key="drop"
-          type="default"
+          variant="default"
           disabled={status !== 'ACTIVE_HEALTHY'}
           onClick={() => setShowConfirmRestart(true)}
         >
diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
index cde7da576c9..7dc16f1c30e 100644
--- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
+++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
@@ -157,7 +157,7 @@ const LegacyEdgeFunctionOverview = () => {
                 return (
                   <Button
                     key={`function-filter-${i}`}
-                    type={interval === item.key ? 'secondary' : 'default'}
+                    variant={interval === item.key ? 'secondary' : 'default'}
                     onClick={() => setInterval(item.key)}
                     className={classes.join(' ')}
                   >
diff --git a/apps/studio/pages/project/[ref]/functions/index.tsx b/apps/studio/pages/project/[ref]/functions/index.tsx
index 13a004b971f..07e4eb8bbb9 100644
--- a/apps/studio/pages/project/[ref]/functions/index.tsx
+++ b/apps/studio/pages/project/[ref]/functions/index.tsx
@@ -147,7 +147,7 @@ const EdgeFunctionsPage: NextPageWithLayout = () => {
                                   <Button
                                     key="clear"
                                     size="tiny"
-                                    type="text"
+                                    variant="text"
                                     icon={<X />}
                                     onClick={() => setSearch('')}
                                     className="p-0 h-5 w-5"
@@ -166,7 +166,7 @@ const EdgeFunctionsPage: NextPageWithLayout = () => {
                         side="bottom"
                       >
                         <Button
-                          type="default"
+                          variant="default"
                           icon={<RefreshCw />}
                           loading={isFetching}
                           onClick={() => refetch()}
@@ -246,7 +246,7 @@ EdgeFunctionsPage.getLayout = (page: React.ReactElement) => {
               </PageHeaderSummary>
               <PageHeaderAside>
                 <DocsButton href={`${DOCS_URL}/guides/functions`} />
-                <Button asChild type="default" icon={<ExternalLink />}>
+                <Button asChild variant="default" icon={<ExternalLink />}>
                   <a
                     target="_blank"
                     rel="noreferrer"
diff --git a/apps/studio/pages/project/[ref]/functions/new.tsx b/apps/studio/pages/project/[ref]/functions/new.tsx
index 79cba4beb28..1aa3c89de65 100644
--- a/apps/studio/pages/project/[ref]/functions/new.tsx
+++ b/apps/studio/pages/project/[ref]/functions/new.tsx
@@ -299,7 +299,7 @@ const NewFunctionPage = () => {
             <PopoverTrigger asChild>
               <Button
                 size="tiny"
-                type="default"
+                variant="default"
                 role="combobox"
                 aria-expanded={open}
                 aria-controls={templatesListboxId}
@@ -348,7 +348,7 @@ const NewFunctionPage = () => {
           </Popover>
           <Button
             size="tiny"
-            type="default"
+            variant="default"
             onClick={handleChat}
             icon={<AiIconAnimation size={16} />}
           >
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
index 3234b636aee..a362c7cca86 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
@@ -29,7 +29,7 @@ export const LogsSavedPage: NextPageWithLayout = () => {
             <>
               <Table.th>Snippets</Table.th>
               <Table.th className="w-24">
-                <Button size="tiny" type="default" onClick={() => setRecentLogSnippets([])}>
+                <Button size="tiny" variant="default" onClick={() => setRecentLogSnippets([])}>
                   Clear history
                 </Button>
               </Table.th>
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx b/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx
index 54f214961e6..01c57640504 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx
@@ -79,7 +79,7 @@ const Template = ({ projectRef, template }: { projectRef?: string; template: Log
             <PopoverTrigger asChild>
               <Button
                 asChild
-                type="default"
+                variant="default"
                 onClick={(e) => {
                   e.preventDefault()
                   setShowPreview(!showPreview)
diff --git a/apps/studio/pages/project/[ref]/merge.tsx b/apps/studio/pages/project/[ref]/merge.tsx
index f5dc6f7d4e5..5fa26d7ab33 100644
--- a/apps/studio/pages/project/[ref]/merge.tsx
+++ b/apps/studio/pages/project/[ref]/merge.tsx
@@ -390,7 +390,7 @@ const MergePage: NextPageWithLayout = () => {
                 overrideAction={
                   hasCurrentWorkflowFailed ? (
                     <Button
-                      type="default"
+                      variant="default"
                       asChild
                       icon={<GitBranchIcon size={16} strokeWidth={1.5} />}
                       className="shrink-0"
@@ -399,7 +399,7 @@ const MergePage: NextPageWithLayout = () => {
                     </Button>
                   ) : hasCurrentWorkflowCompleted ? (
                     <Button
-                      type="default"
+                      variant="default"
                       onClick={handleCloseBranch}
                       loading={isDeleting}
                       icon={<X size={16} strokeWidth={1.5} />}
diff --git a/apps/studio/pages/project/[ref]/observability/auth.tsx b/apps/studio/pages/project/[ref]/observability/auth.tsx
index 4e7333cfdac..e18c7bea0fc 100644
--- a/apps/studio/pages/project/[ref]/observability/auth.tsx
+++ b/apps/studio/pages/project/[ref]/observability/auth.tsx
@@ -220,7 +220,7 @@ const AuthUsage = () => {
                 side="bottom"
               >
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isRefreshing}
                   icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
                   className="w-7"
diff --git a/apps/studio/pages/project/[ref]/observability/database.tsx b/apps/studio/pages/project/[ref]/observability/database.tsx
index a63da1028f1..2887ab606da 100644
--- a/apps/studio/pages/project/[ref]/observability/database.tsx
+++ b/apps/studio/pages/project/[ref]/observability/database.tsx
@@ -237,7 +237,7 @@ const DatabaseUsage = () => {
               side="bottom"
             >
               <Button
-                type="default"
+                variant="default"
                 disabled={isRefreshing}
                 icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
                 className="w-7"
@@ -367,14 +367,14 @@ const DatabaseUsage = () => {
 
                   <div className="ml-auto">
                     {project?.cloud_provider === 'AWS' ? (
-                      <Button asChild type="default">
+                      <Button asChild variant="default">
                         <Link href={`/project/${ref}/settings/compute-and-disk`}>
                           Increase disk size
                         </Link>
                       </Button>
                     ) : (
                       <ButtonTooltip
-                        type="default"
+                        variant="default"
                         disabled={!canUpdateDiskSizeConfig}
                         onClick={() => setshowIncreaseDiskSizeModal(true)}
                         tooltip={{
@@ -443,7 +443,7 @@ const DatabaseUsage = () => {
                       inactive.
                     </p>
 
-                    <Button asChild type="default" icon={<ExternalLink />}>
+                    <Button asChild variant="default" icon={<ExternalLink />}>
                       <Link
                         href={`${DOCS_URL}/guides/platform/database-size#disk-space-usage`}
                         target="_blank"
diff --git a/apps/studio/pages/project/[ref]/observability/edge-functions.tsx b/apps/studio/pages/project/[ref]/observability/edge-functions.tsx
index ea8d6a69480..f322b664da3 100644
--- a/apps/studio/pages/project/[ref]/observability/edge-functions.tsx
+++ b/apps/studio/pages/project/[ref]/observability/edge-functions.tsx
@@ -154,7 +154,7 @@ const EdgeFunctionsUsage = () => {
                 side="bottom"
               >
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isRefreshing}
                   icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
                   className="w-7"
diff --git a/apps/studio/pages/project/[ref]/observability/postgrest.tsx b/apps/studio/pages/project/[ref]/observability/postgrest.tsx
index 498fd11bc3d..e35a32be132 100644
--- a/apps/studio/pages/project/[ref]/observability/postgrest.tsx
+++ b/apps/studio/pages/project/[ref]/observability/postgrest.tsx
@@ -126,7 +126,7 @@ const PostgrestReport = () => {
                 side="bottom"
               >
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isRefetching}
                   icon={<RefreshCw className={isRefetching ? 'animate-spin' : ''} />}
                   className="w-7"
diff --git a/apps/studio/pages/project/[ref]/observability/realtime.tsx b/apps/studio/pages/project/[ref]/observability/realtime.tsx
index 658cb034610..0bc16544dde 100644
--- a/apps/studio/pages/project/[ref]/observability/realtime.tsx
+++ b/apps/studio/pages/project/[ref]/observability/realtime.tsx
@@ -151,7 +151,7 @@ const RealtimeUsage = () => {
                 side="bottom"
               >
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={isRefreshing}
                   icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
                   className="w-7"
diff --git a/apps/studio/pages/project/[ref]/observability/storage.tsx b/apps/studio/pages/project/[ref]/observability/storage.tsx
index ba9be481393..9e3a0bf874a 100644
--- a/apps/studio/pages/project/[ref]/observability/storage.tsx
+++ b/apps/studio/pages/project/[ref]/observability/storage.tsx
@@ -99,7 +99,7 @@ export const StorageReport: NextPageWithLayout = () => {
                 side="bottom"
               >
                 <Button
-                  type="default"
+                  variant="default"
                   disabled={report.isLoading}
                   icon={<RefreshCw className={report.isLoading ? 'animate-spin' : ''} />}
                   className="w-7"
diff --git a/apps/studio/pages/project/[ref]/settings/log-drains.tsx b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
index f2ede559130..92ee1da75d1 100644
--- a/apps/studio/pages/project/[ref]/settings/log-drains.tsx
+++ b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
@@ -214,7 +214,7 @@ const LogDrainsSettings: NextPageWithLayout = () => {
                   <Button
                     disabled={!hasAccessToLogDrains || !canManageLogDrains}
                     onClick={handleAddDestinationClick}
-                    type="primary"
+                    variant="primary"
                     className="rounded-r-none px-3"
                   >
                     Add destination
@@ -223,7 +223,7 @@ const LogDrainsSettings: NextPageWithLayout = () => {
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      type="primary"
+                      variant="primary"
                       title="Choose token scope"
                       className="rounded-l-none px-[4px] py-[5px]"
                       icon={<ChevronDown />}
diff --git a/apps/studio/pages/project/[ref]/sql/[id].tsx b/apps/studio/pages/project/[ref]/sql/[id].tsx
index 75ac58d35e2..24702773c82 100644
--- a/apps/studio/pages/project/[ref]/sql/[id].tsx
+++ b/apps/studio/pages/project/[ref]/sql/[id].tsx
@@ -119,7 +119,7 @@ const SqlEditor: NextPageWithLayout = () => {
           >
             {!!tabId ? (
               <Button
-                type="default"
+                variant="default"
                 className="mt-2"
                 onClick={() => {
                   tabs.handleTabClose({
@@ -135,7 +135,7 @@ const SqlEditor: NextPageWithLayout = () => {
             ) : (
               <Button
                 asChild
-                type="default"
+                variant="default"
                 className="mt-2"
                 onClick={() => setLastVisitedSnippet(undefined)}
               >
diff --git a/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
index 29f468423d2..3d360ccdead 100644
--- a/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
+++ b/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
@@ -80,7 +80,7 @@ const BucketPage: NextPageWithLayout = () => {
             <PageBreadcrumbsActions>
               <Button
                 asChild
-                type="outline"
+                variant="outline"
                 size="tiny"
                 icon={<Shield size={14} />}
                 iconRight={
@@ -99,7 +99,7 @@ const BucketPage: NextPageWithLayout = () => {
               </Button>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="outline" size="tiny" iconRight={<ChevronDown size={14} />}>
+                  <Button variant="outline" size="tiny" iconRight={<ChevronDown size={14} />}>
                     Edit bucket
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/apps/studio/pages/sign-in.tsx b/apps/studio/pages/sign-in.tsx
index af475facea0..912145132a1 100644
--- a/apps/studio/pages/sign-in.tsx
+++ b/apps/studio/pages/sign-in.tsx
@@ -55,7 +55,7 @@ const SignInPage: NextPageWithLayout = () => {
               asChild
               block
               size="large"
-              type="outline"
+              variant="outline"
               icon={<Lock width={18} height={18} />}
             >
               <Link
diff --git a/apps/studio/public/monaco-editor/editor/editor.main.js b/apps/studio/public/monaco-editor/editor/editor.main.js
index b0920f5935e..6babd5027e6 100644
--- a/apps/studio/public/monaco-editor/editor/editor.main.js
+++ b/apps/studio/public/monaco-editor/editor/editor.main.js
@@ -641,7 +641,7 @@ ${a.toString()}`}}class t{constructor(a=new C.ServiceCollection,c=!1,h,o=m){var
 	target: ${this.target?this.target.outerHTML:null}`}_getMouseColumn(v=null){return v&&v.column<this._ctx.viewModel.getLineMaxColumn(v.lineNumber)?b.CursorColumns.visibleColumnFromColumn(this._ctx.viewModel.getLineContent(v.lineNumber),v.column,this._ctx.viewModel.model.getOptions().tabSize)+1:this.mouseColumn}fulfillUnknown(v=null){return s.createUnknown(this.target,this._getMouseColumn(v),v)}fulfillTextarea(){return s.createTextarea(this.target,this._getMouseColumn())}fulfillMargin(v,p,L,E){return s.createMargin(v,this.target,this._getMouseColumn(p),p,L,E)}fulfillViewZone(v,p,L){return s.createViewZone(v,this.target,this._getMouseColumn(p),p,L)}fulfillContentText(v,p,L){return s.createContentText(this.target,this._getMouseColumn(v),v,p,L)}fulfillContentEmpty(v,p){return s.createContentEmpty(this.target,this._getMouseColumn(v),v,p)}fulfillContentWidget(v){return s.createContentWidget(this.target,this._getMouseColumn(),v)}fulfillScrollbar(v){return s.createScrollbar(this.target,this._getMouseColumn(v),v)}fulfillOverlayWidget(v){return s.createOverlayWidget(this.target,this._getMouseColumn(),v)}withTarget(v){return new o(this._ctx,this.editorPos,this.pos,this.relativePos,v)}}const l={isAfterLines:!0};function r(f){return{isAfterLines:!1,horizontalDistanceToText:f}}class d{constructor(v,p){this._context=v,this._viewHelper=p}mouseTargetIsWidget(v){const p=v.target,L=k.PartFingerprints.collect(p,this._viewHelper.viewDomNode);return!!(a.isChildOfContentWidgets(L)||a.isChildOfOverflowingContentWidgets(L)||a.isChildOfOverlayWidgets(L))}createMouseTarget(v,p,L,E,I){const T=new c(this._context,this._viewHelper,v),F=new o(T,p,L,E,I);try{const R=d._createMouseTarget(T,F,!1);if(R.type===6&&T.stickyTabStops&&R.position!==null){const M=d._snapToSoftTabBoundary(R.position,T.viewModel),N=w.Range.fromPositions(M,M).plusRange(R.range);return F.fulfillContentText(M,N,R.detail)}return R}catch{return F.fulfillUnknown()}}static _createMouseTarget(v,p,L){if(p.target===null){if(L)return p.fulfillUnknown();const T=d._doHitTest(v,p);return T.type===1?d.createMouseTargetFromHitTestPosition(v,p,T.spanNode,T.position,T.injectedText):this._createMouseTarget(v,p.withTarget(T.hitTarget),!0)}const E=p;let I=null;return I=I||d._hitTestContentWidget(v,E),I=I||d._hitTestOverlayWidget(v,E),I=I||d._hitTestMinimap(v,E),I=I||d._hitTestScrollbarSlider(v,E),I=I||d._hitTestViewZone(v,E),I=I||d._hitTestMargin(v,E),I=I||d._hitTestViewCursor(v,E),I=I||d._hitTestTextArea(v,E),I=I||d._hitTestViewLines(v,E,L),I=I||d._hitTestScrollbar(v,E),I||p.fulfillUnknown()}static _hitTestContentWidget(v,p){if(a.isChildOfContentWidgets(p.targetPath)||a.isChildOfOverflowingContentWidgets(p.targetPath)){const L=v.findAttribute(p.target,"widgetId");return L?p.fulfillContentWidget(L):p.fulfillUnknown()}return null}static _hitTestOverlayWidget(v,p){if(a.isChildOfOverlayWidgets(p.targetPath)){const L=v.findAttribute(p.target,"widgetId");return L?p.fulfillOverlayWidget(L):p.fulfillUnknown()}return null}static _hitTestViewCursor(v,p){if(p.target){const L=v.lastRenderData.lastViewCursorsRenderData;for(const E of L)if(p.target===E.domNode)return p.fulfillContentText(E.position,null,{mightBeForeignElement:!1,injectedText:null})}if(p.isInContentArea){const L=v.lastRenderData.lastViewCursorsRenderData,E=p.mouseContentHorizontalOffset,I=p.mouseVerticalOffset;for(const T of L){if(E<T.contentLeft||E>T.contentLeft+T.width)continue;const F=v.getVerticalOffsetForLineNumber(T.position.lineNumber);if(F<=I&&I<=F+T.height)return p.fulfillContentText(T.position,null,{mightBeForeignElement:!1,injectedText:null})}}return null}static _hitTestViewZone(v,p){const L=v.getZoneAtCoord(p.mouseVerticalOffset);if(L){const E=p.isInContentArea?8:5;return p.fulfillViewZone(E,L.position,L)}return null}static _hitTestTextArea(v,p){return a.isTextArea(p.targetPath)?v.lastRenderData.lastTextareaPosition?p.fulfillContentText(v.lastRenderData.lastTextareaPosition,null,{mightBeForeignElement:!1,injectedText:null}):p.fulfillTextarea():null}static _hitTestMargin(v,p){if(p.isInMarginArea){const L=v.getFullLineRangeAtCoord(p.mouseVerticalOffset),E=L.range.getStartPosition();let I=Math.abs(p.relativePos.x);const T={isAfterLines:L.isAfterLines,glyphMarginLeft:v.layoutInfo.glyphMarginLeft,glyphMarginWidth:v.layoutInfo.glyphMarginWidth,lineNumbersWidth:v.layoutInfo.lineNumbersWidth,offsetX:I};return I-=v.layoutInfo.glyphMarginLeft,I<=v.layoutInfo.glyphMarginWidth?p.fulfillMargin(2,E,L.range,T):(I-=v.layoutInfo.glyphMarginWidth,I<=v.layoutInfo.lineNumbersWidth?p.fulfillMargin(3,E,L.range,T):(I-=v.layoutInfo.lineNumbersWidth,p.fulfillMargin(4,E,L.range,T)))}return null}static _hitTestViewLines(v,p,L){if(!a.isChildOfViewLines(p.targetPath))return null;if(v.isInTopPadding(p.mouseVerticalOffset))return p.fulfillContentEmpty(new D.Position(1,1),l);if(v.isAfterLines(p.mouseVerticalOffset)||v.isInBottomPadding(p.mouseVerticalOffset)){const I=v.viewModel.getLineCount(),T=v.viewModel.getLineMaxColumn(I);return p.fulfillContentEmpty(new D.Position(I,T),l)}if(L){if(a.isStrictChildOfViewLines(p.targetPath)){const I=v.getLineNumberAtVerticalOffset(p.mouseVerticalOffset);if(v.viewModel.getLineLength(I)===0){const F=v.getLineWidth(I),R=r(p.mouseContentHorizontalOffset-F);return p.fulfillContentEmpty(new D.Position(I,1),R)}const T=v.getLineWidth(I);if(p.mouseContentHorizontalOffset>=T){const F=r(p.mouseContentHorizontalOffset-T),R=new D.Position(I,v.viewModel.getLineMaxColumn(I));return p.fulfillContentEmpty(R,F)}}return p.fulfillUnknown()}const E=d._doHitTest(v,p);return E.type===1?d.createMouseTargetFromHitTestPosition(v,p,E.spanNode,E.position,E.injectedText):this._createMouseTarget(v,p.withTarget(E.hitTarget),!0)}static _hitTestMinimap(v,p){if(a.isChildOfMinimap(p.targetPath)){const L=v.getLineNumberAtVerticalOffset(p.mouseVerticalOffset),E=v.viewModel.getLineMaxColumn(L);return p.fulfillScrollbar(new D.Position(L,E))}return null}static _hitTestScrollbarSlider(v,p){if(a.isChildOfScrollableElement(p.targetPath)&&p.target&&p.target.nodeType===1){const L=p.target.className;if(L&&/\b(slider|scrollbar)\b/.test(L)){const E=v.getLineNumberAtVerticalOffset(p.mouseVerticalOffset),I=v.viewModel.getLineMaxColumn(E);return p.fulfillScrollbar(new D.Position(E,I))}}return null}static _hitTestScrollbar(v,p){if(a.isChildOfScrollableElement(p.targetPath)){const L=v.getLineNumberAtVerticalOffset(p.mouseVerticalOffset),E=v.viewModel.getLineMaxColumn(L);return p.fulfillScrollbar(new D.Position(L,E))}return null}getMouseColumn(v){const p=this._context.configuration.options,L=p.get(139),E=this._context.viewLayout.getCurrentScrollLeft()+v.x-L.contentLeft;return d._getMouseColumn(E,p.get(48).typicalHalfwidthCharacterWidth)}static _getMouseColumn(v,p){return v<0?1:Math.round(v/p)+1}static createMouseTargetFromHitTestPosition(v,p,L,E,I){const T=E.lineNumber,F=E.column,R=v.getLineWidth(T);if(p.mouseContentHorizontalOffset>R){const $=r(p.mouseContentHorizontalOffset-R);return p.fulfillContentEmpty(E,$)}const M=v.visibleRangeForPosition(T,F);if(!M)return p.fulfillUnknown(E);const N=M.left;if(Math.abs(p.mouseContentHorizontalOffset-N)<1)return p.fulfillContentText(E,null,{mightBeForeignElement:!!I,injectedText:I});const A=[];if(A.push({offset:M.left,column:F}),F>1){const $=v.visibleRangeForPosition(T,F-1);$&&A.push({offset:$.left,column:F-1})}const P=v.viewModel.getLineMaxColumn(T);if(F<P){const $=v.visibleRangeForPosition(T,F+1);$&&A.push({offset:$.left,column:F+1})}A.sort(($,Q)=>$.offset-Q.offset);const x=p.pos.toClientCoordinates(),W=L.getBoundingClientRect(),U=W.left<=x.clientX&&x.clientX<=W.right;let O=null;for(let $=1;$<A.length;$++){const Q=A[$-1],se=A[$];if(Q.offset<=p.mouseContentHorizontalOffset&&p.mouseContentHorizontalOffset<=se.offset){O=new w.Range(T,Q.column,T,se.column);const le=Math.abs(Q.offset-p.mouseContentHorizontalOffset),te=Math.abs(se.offset-p.mouseContentHorizontalOffset);E=le<te?new D.Position(T,Q.column):new D.Position(T,se.column);break}}return p.fulfillContentText(E,O,{mightBeForeignElement:!U||!!I,injectedText:I})}static _doHitTestWithCaretRangeFromPoint(v,p){const L=v.getLineNumberAtVerticalOffset(p.mouseVerticalOffset),E=v.getVerticalOffsetForLineNumber(L),I=E+v.lineHeight;if(!(L===v.viewModel.getLineCount()&&p.mouseVerticalOffset>I)){const F=Math.floor((E+I)/2);let R=p.pos.y+(F-p.mouseVerticalOffset);R<=p.editorPos.y&&(R=p.editorPos.y+1),R>=p.editorPos.y+p.editorPos.height&&(R=p.editorPos.y+p.editorPos.height-1);const M=new S.PageCoordinates(p.pos.x,R),N=this._actualDoHitTestWithCaretRangeFromPoint(v,M.toClientCoordinates());if(N.type===1)return N}return this._actualDoHitTestWithCaretRangeFromPoint(v,p.pos.toClientCoordinates())}static _actualDoHitTestWithCaretRangeFromPoint(v,p){const L=C.getShadowRoot(v.viewDomNode);let E;if(L?typeof L.caretRangeFromPoint>"u"?E=u(L,p.clientX,p.clientY):E=L.caretRangeFromPoint(p.clientX,p.clientY):E=document.caretRangeFromPoint(p.clientX,p.clientY),!E||!E.startContainer)return new m;const I=E.startContainer;if(I.nodeType===I.TEXT_NODE){const T=I.parentNode,F=T?T.parentNode:null,R=F?F.parentNode:null;return(R&&R.nodeType===R.ELEMENT_NODE?R.className:null)===y.ViewLine.CLASS_NAME?t.createFromDOMInfo(v,T,E.startOffset):new m(I.parentNode)}else if(I.nodeType===I.ELEMENT_NODE){const T=I.parentNode,F=T?T.parentNode:null;return(F&&F.nodeType===F.ELEMENT_NODE?F.className:null)===y.ViewLine.CLASS_NAME?t.createFromDOMInfo(v,I,I.textContent.length):new m(I)}return new m}static _doHitTestWithCaretPositionFromPoint(v,p){const L=document.caretPositionFromPoint(p.clientX,p.clientY);if(L.offsetNode.nodeType===L.offsetNode.TEXT_NODE){const E=L.offsetNode.parentNode,I=E?E.parentNode:null,T=I?I.parentNode:null;return(T&&T.nodeType===T.ELEMENT_NODE?T.className:null)===y.ViewLine.CLASS_NAME?t.createFromDOMInfo(v,L.offsetNode.parentNode,L.offset):new m(L.offsetNode.parentNode)}if(L.offsetNode.nodeType===L.offsetNode.ELEMENT_NODE){const E=L.offsetNode.parentNode,I=E&&E.nodeType===E.ELEMENT_NODE?E.className:null,T=E?E.parentNode:null,F=T&&T.nodeType===T.ELEMENT_NODE?T.className:null;if(I===y.ViewLine.CLASS_NAME){const R=L.offsetNode.childNodes[Math.min(L.offset,L.offsetNode.childNodes.length-1)];if(R)return t.createFromDOMInfo(v,R,0)}else if(F===y.ViewLine.CLASS_NAME)return t.createFromDOMInfo(v,L.offsetNode,0)}return new m(L.offsetNode)}static _snapToSoftTabBoundary(v,p){const L=p.getLineContent(v.lineNumber),{tabSize:E}=p.model.getOptions(),I=g.AtomicTabMoveOperations.atomicPosition(L,v.column-1,E,2);return I!==-1?new D.Position(v.lineNumber,I+1):v}static _doHitTest(v,p){let L=new m;if(typeof document.caretRangeFromPoint=="function"?L=this._doHitTestWithCaretRangeFromPoint(v,p):document.caretPositionFromPoint&&(L=this._doHitTestWithCaretPositionFromPoint(v,p.pos.toClientCoordinates())),L.type===1){const E=v.viewModel.getInjectedTextAt(L.position),I=v.viewModel.normalizePosition(L.position,2);(E||!I.equals(L.position))&&(L=new n(I,L.spanNode,E))}return L}}e.MouseTargetFactory=d;function u(f,v,p){const L=document.createRange();let E=f.elementFromPoint(v,p);if(E!==null){for(;E&&E.firstChild&&E.firstChild.nodeType!==E.firstChild.TEXT_NODE&&E.lastChild&&E.lastChild.firstChild;)E=E.lastChild;const I=E.getBoundingClientRect(),T=window.getComputedStyle(E,null).getPropertyValue("font-style"),F=window.getComputedStyle(E,null).getPropertyValue("font-variant"),R=window.getComputedStyle(E,null).getPropertyValue("font-weight"),M=window.getComputedStyle(E,null).getPropertyValue("font-size"),N=window.getComputedStyle(E,null).getPropertyValue("line-height"),A=window.getComputedStyle(E,null).getPropertyValue("font-family"),P=`${T} ${F} ${R} ${M}/${N} ${A}`,x=E.innerText;let W=I.left,U=0,O;if(v>I.left+I.width)U=x.length;else{const $=_.getInstance();for(let Q=0;Q<x.length+1;Q++){if(O=$.getCharWidth(x.charAt(Q),P)/2,W+=O,v<W){U=Q;break}W+=O}}L.setStart(E.firstChild,U),L.setEnd(E.firstChild,U)}return L}class _{static getInstance(){return _._INSTANCE||(_._INSTANCE=new _),_._INSTANCE}constructor(){this._cache={},this._canvas=document.createElement("canvas")}getCharWidth(v,p){const L=v+p;if(this._cache[L])return this._cache[L];const E=this._canvas.getContext("2d");E.font=p;const T=E.measureText(v).width;return this._cache[L]=T,T}}_._INSTANCE=null}),define(X[792],J([1,0,7,66,2,17,329,151,144,13,23,137,77]),function(j,e,S,k,y,D,w,b,C,g,m,n,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MouseHandler=void 0;class i extends n.ViewEventHandler{constructor(l,r,d){super(),this._mouseLeaveMonitor=null,this._context=l,this.viewController=r,this.viewHelper=d,this.mouseTargetFactory=new w.MouseTargetFactory(this._context,d),this._mouseDownOperation=this._register(new s(this._context,this.viewController,this.viewHelper,this.mouseTargetFactory,(f,v)=>this._createMouseTarget(f,v),f=>this._getMouseColumn(f))),this.lastMouseLeaveTime=-1,this._height=this._context.configuration.options.get(139).height;const u=new b.EditorMouseEventFactory(this.viewHelper.viewDomNode);this._register(u.onContextMenu(this.viewHelper.viewDomNode,f=>this._onContextMenu(f,!0))),this._register(u.onMouseMove(this.viewHelper.viewDomNode,f=>{this._onMouseMove(f),this._mouseLeaveMonitor||(this._mouseLeaveMonitor=S.addDisposableListener(document,"mousemove",v=>{this.viewHelper.viewDomNode.contains(v.target)||this._onMouseLeave(new b.EditorMouseEvent(v,!1,this.viewHelper.viewDomNode))}))})),this._register(u.onMouseUp(this.viewHelper.viewDomNode,f=>this._onMouseUp(f))),this._register(u.onMouseLeave(this.viewHelper.viewDomNode,f=>this._onMouseLeave(f)));let _=0;this._register(u.onPointerDown(this.viewHelper.viewDomNode,(f,v)=>{_=v})),this._register(S.addDisposableListener(this.viewHelper.viewDomNode,S.EventType.POINTER_UP,f=>{this._mouseDownOperation.onPointerUp()})),this._register(u.onMouseDown(this.viewHelper.viewDomNode,f=>this._onMouseDown(f,_))),this._setupMouseWheelZoomListener(),this._context.addEventHandler(this)}_setupMouseWheelZoomListener(){const l=t.MouseWheelClassifier.INSTANCE;let r=0,d=C.EditorZoom.getZoomLevel(),u=!1,_=0;const f=p=>{if(this.viewController.emitMouseWheel(p),!this._context.configuration.options.get(73))return;const L=new k.StandardWheelEvent(p);if(l.acceptStandardWheelEvent(L),l.isPhysicalMouseWheel()){if(v(p)){const E=C.EditorZoom.getZoomLevel(),I=L.deltaY>0?1:-1;C.EditorZoom.setZoomLevel(E+I),L.preventDefault(),L.stopPropagation()}}else Date.now()-r>50&&(d=C.EditorZoom.getZoomLevel(),u=v(p),_=0),r=Date.now(),_+=L.deltaY,u&&(C.EditorZoom.setZoomLevel(d+_/5),L.preventDefault(),L.stopPropagation())};this._register(S.addDisposableListener(this.viewHelper.viewDomNode,S.EventType.MOUSE_WHEEL,f,{capture:!0,passive:!1}));function v(p){return D.isMacintosh?(p.metaKey||p.ctrlKey)&&!p.shiftKey&&!p.altKey:p.ctrlKey&&!p.metaKey&&!p.shiftKey&&!p.altKey}}dispose(){this._context.removeEventHandler(this),this._mouseLeaveMonitor&&(this._mouseLeaveMonitor.dispose(),this._mouseLeaveMonitor=null),super.dispose()}onConfigurationChanged(l){if(l.hasChanged(139)){const r=this._context.configuration.options.get(139).height;this._height!==r&&(this._height=r,this._mouseDownOperation.onHeightChanged())}return!1}onCursorStateChanged(l){return this._mouseDownOperation.onCursorStateChanged(l),!1}onFocusChanged(l){return!1}getTargetAtClientPoint(l,r){const u=new b.ClientCoordinates(l,r).toPageCoordinates(),_=(0,b.createEditorPagePosition)(this.viewHelper.viewDomNode);if(u.y<_.y||u.y>_.y+_.height||u.x<_.x||u.x>_.x+_.width)return null;const f=(0,b.createCoordinatesRelativeToEditor)(this.viewHelper.viewDomNode,_,u);return this.mouseTargetFactory.createMouseTarget(this.viewHelper.getLastRenderData(),_,u,f,null)}_createMouseTarget(l,r){let d=l.target;if(!this.viewHelper.viewDomNode.contains(d)){const u=S.getShadowRoot(this.viewHelper.viewDomNode);u&&(d=u.elementsFromPoint(l.posx,l.posy).find(_=>this.viewHelper.viewDomNode.contains(_)))}return this.mouseTargetFactory.createMouseTarget(this.viewHelper.getLastRenderData(),l.editorPos,l.pos,l.relativePos,r?d:null)}_getMouseColumn(l){return this.mouseTargetFactory.getMouseColumn(l.relativePos)}_onContextMenu(l,r){this.viewController.emitContextMenu({event:l,target:this._createMouseTarget(l,r)})}_onMouseMove(l){this.mouseTargetFactory.mouseTargetIsWidget(l)||l.preventDefault(),!(this._mouseDownOperation.isActive()||l.timestamp<this.lastMouseLeaveTime)&&this.viewController.emitMouseMove({event:l,target:this._createMouseTarget(l,!0)})}_onMouseLeave(l){this._mouseLeaveMonitor&&(this._mouseLeaveMonitor.dispose(),this._mouseLeaveMonitor=null),this.lastMouseLeaveTime=new Date().getTime(),this.viewController.emitMouseLeave({event:l,target:null})}_onMouseUp(l){this.viewController.emitMouseUp({event:l,target:this._createMouseTarget(l,!0)})}_onMouseDown(l,r){const d=this._createMouseTarget(l,!0),u=d.type===6||d.type===7,_=d.type===2||d.type===3||d.type===4,f=d.type===3,v=this._context.configuration.options.get(104),p=d.type===8||d.type===5,L=d.type===9;let E=l.leftButton||l.middleButton;D.isMacintosh&&l.leftButton&&l.ctrlKey&&(E=!1);const I=()=>{l.preventDefault(),this.viewHelper.focusTextArea()};if(E&&(u||f&&v))I(),this._mouseDownOperation.start(d.type,l,r);else if(_)l.preventDefault();else if(p){const T=d.detail;E&&this.viewHelper.shouldSuppressMouseDownOnViewZone(T.viewZoneId)&&(I(),this._mouseDownOperation.start(d.type,l,r),l.preventDefault())}else L&&this.viewHelper.shouldSuppressMouseDownOnWidget(d.detail)&&(I(),l.preventDefault());this.viewController.emitMouseDown({event:l,target:d})}}e.MouseHandler=i;class s extends y.Disposable{constructor(l,r,d,u,_,f){super(),this._context=l,this._viewController=r,this._viewHelper=d,this._mouseTargetFactory=u,this._createMouseTarget=_,this._getMouseColumn=f,this._mouseMoveMonitor=this._register(new b.GlobalEditorPointerMoveMonitor(this._viewHelper.viewDomNode)),this._topBottomDragScrolling=this._register(new a(this._context,this._viewHelper,this._mouseTargetFactory,(v,p,L)=>this._dispatchMouse(v,p,L))),this._mouseState=new h,this._currentSelection=new m.Selection(1,1,1,1),this._isActive=!1,this._lastMouseEvent=null}dispose(){super.dispose()}isActive(){return this._isActive}_onMouseDownThenMove(l){this._lastMouseEvent=l,this._mouseState.setModifiers(l);const r=this._findMousePosition(l,!1);!r||(this._mouseState.isDragAndDrop?this._viewController.emitMouseDrag({event:l,target:r}):r.type===13&&(r.outsidePosition==="above"||r.outsidePosition==="below")?this._topBottomDragScrolling.start(r,l):(this._topBottomDragScrolling.stop(),this._dispatchMouse(r,!0,1)))}start(l,r,d){this._lastMouseEvent=r,this._mouseState.setStartedOnLineNumbers(l===3),this._mouseState.setStartButtons(r),this._mouseState.setModifiers(r);const u=this._findMousePosition(r,!0);if(!u||!u.position)return;this._mouseState.trySetCount(r.detail,u.position),r.detail=this._mouseState.count;const _=this._context.configuration.options;if(!_.get(87)&&_.get(33)&&!_.get(20)&&!this._mouseState.altKey&&r.detail<2&&!this._isActive&&!this._currentSelection.isEmpty()&&u.type===6&&u.position&&this._currentSelection.containsPosition(u.position)){this._mouseState.isDragAndDrop=!0,this._isActive=!0,this._mouseMoveMonitor.startMonitoring(this._viewHelper.viewLinesDomNode,d,r.buttons,f=>this._onMouseDownThenMove(f),f=>{const v=this._findMousePosition(this._lastMouseEvent,!1);f&&f instanceof KeyboardEvent?this._viewController.emitMouseDropCanceled():this._viewController.emitMouseDrop({event:this._lastMouseEvent,target:v?this._createMouseTarget(this._lastMouseEvent,!0):null}),this._stop()});return}this._mouseState.isDragAndDrop=!1,this._dispatchMouse(u,r.shiftKey,1),this._isActive||(this._isActive=!0,this._mouseMoveMonitor.startMonitoring(this._viewHelper.viewLinesDomNode,d,r.buttons,f=>this._onMouseDownThenMove(f),()=>this._stop()))}_stop(){this._isActive=!1,this._topBottomDragScrolling.stop()}onHeightChanged(){this._mouseMoveMonitor.stopMonitoring()}onPointerUp(){this._mouseMoveMonitor.stopMonitoring()}onCursorStateChanged(l){this._currentSelection=l.selections[0]}_getPositionOutsideEditor(l){const r=l.editorPos,d=this._context.viewModel,u=this._context.viewLayout,_=this._getMouseColumn(l);if(l.posy<r.y){const v=r.y-l.posy,p=Math.max(u.getCurrentScrollTop()-v,0),L=w.HitTestContext.getZoneAtCoord(this._context,p);if(L){const I=this._helpPositionJumpOverViewZone(L);if(I)return w.MouseTarget.createOutsideEditor(_,I,"above",v)}const E=u.getLineNumberAtVerticalOffset(p);return w.MouseTarget.createOutsideEditor(_,new g.Position(E,1),"above",v)}if(l.posy>r.y+r.height){const v=l.posy-r.y-r.height,p=u.getCurrentScrollTop()+l.relativePos.y,L=w.HitTestContext.getZoneAtCoord(this._context,p);if(L){const I=this._helpPositionJumpOverViewZone(L);if(I)return w.MouseTarget.createOutsideEditor(_,I,"below",v)}const E=u.getLineNumberAtVerticalOffset(p);return w.MouseTarget.createOutsideEditor(_,new g.Position(E,d.getLineMaxColumn(E)),"below",v)}const f=u.getLineNumberAtVerticalOffset(u.getCurrentScrollTop()+l.relativePos.y);if(l.posx<r.x){const v=r.x-l.posx;return w.MouseTarget.createOutsideEditor(_,new g.Position(f,1),"left",v)}if(l.posx>r.x+r.width){const v=l.posx-r.x-r.width;return w.MouseTarget.createOutsideEditor(_,new g.Position(f,d.getLineMaxColumn(f)),"right",v)}return null}_findMousePosition(l,r){const d=this._getPositionOutsideEditor(l);if(d)return d;const u=this._createMouseTarget(l,r);if(!u.position)return null;if(u.type===8||u.type===5){const f=this._helpPositionJumpOverViewZone(u.detail);if(f)return w.MouseTarget.createViewZone(u.type,u.element,u.mouseColumn,f,u.detail)}return u}_helpPositionJumpOverViewZone(l){const r=new g.Position(this._currentSelection.selectionStartLineNumber,this._currentSelection.selectionStartColumn),d=l.positionBefore,u=l.positionAfter;return d&&u?d.isBefore(r)?d:u:null}_dispatchMouse(l,r,d){!l.position||this._viewController.dispatchMouse({position:l.position,mouseColumn:l.mouseColumn,startedOnLineNumbers:this._mouseState.startedOnLineNumbers,revealType:d,inSelectionMode:r,mouseDownCount:this._mouseState.count,altKey:this._mouseState.altKey,ctrlKey:this._mouseState.ctrlKey,metaKey:this._mouseState.metaKey,shiftKey:this._mouseState.shiftKey,leftButton:this._mouseState.leftButton,middleButton:this._mouseState.middleButton,onInjectedText:l.type===6&&l.detail.injectedText!==null})}}class a extends y.Disposable{constructor(l,r,d,u){super(),this._context=l,this._viewHelper=r,this._mouseTargetFactory=d,this._dispatchMouse=u,this._operation=null}dispose(){super.dispose(),this.stop()}start(l,r){this._operation?this._operation.setPosition(l,r):this._operation=new c(this._context,this._viewHelper,this._mouseTargetFactory,this._dispatchMouse,l,r)}stop(){this._operation&&(this._operation.dispose(),this._operation=null)}}class c extends y.Disposable{constructor(l,r,d,u,_,f){super(),this._context=l,this._viewHelper=r,this._mouseTargetFactory=d,this._dispatchMouse=u,this._position=_,this._mouseEvent=f,this._lastTime=Date.now(),this._animationFrameDisposable=S.scheduleAtNextAnimationFrame(()=>this._execute())}dispose(){this._animationFrameDisposable.dispose()}setPosition(l,r){this._position=l,this._mouseEvent=r}_tick(){const l=Date.now(),r=l-this._lastTime;return this._lastTime=l,r}_getScrollSpeed(){const l=this._context.configuration.options.get(64),r=this._context.configuration.options.get(139).height/l,d=this._position.outsideDistance/l;return d<=1.5?Math.max(30,r*(1+d)):d<=3?Math.max(60,r*(2+d)):Math.max(200,r*(7+d))}_execute(){const l=this._context.configuration.options.get(64),r=this._getScrollSpeed(),d=this._tick(),u=r*(d/1e3)*l,_=this._position.outsidePosition==="above"?-u:u;this._context.viewModel.viewLayout.deltaScrollNow(0,_),this._viewHelper.renderNow();const f=this._context.viewLayout.getLinesViewportData(),v=this._position.outsidePosition==="above"?f.startLineNumber:f.endLineNumber;let p;{const L=(0,b.createEditorPagePosition)(this._viewHelper.viewDomNode),E=this._context.configuration.options.get(139).horizontalScrollbarHeight,I=new b.PageCoordinates(this._mouseEvent.pos.x,L.y+L.height-E-.1),T=(0,b.createCoordinatesRelativeToEditor)(this._viewHelper.viewDomNode,L,I);p=this._mouseTargetFactory.createMouseTarget(this._viewHelper.getLastRenderData(),L,I,T,null)}(!p.position||p.position.lineNumber!==v)&&(this._position.outsidePosition==="above"?p=w.MouseTarget.createOutsideEditor(this._position.mouseColumn,new g.Position(v,1),"above",this._position.outsideDistance):p=w.MouseTarget.createOutsideEditor(this._position.mouseColumn,new g.Position(v,this._context.viewModel.getLineMaxColumn(v)),"below",this._position.outsideDistance)),this._dispatchMouse(p,!0,2),this._animationFrameDisposable=S.scheduleAtNextAnimationFrame(()=>this._execute())}}class h{get altKey(){return this._altKey}get ctrlKey(){return this._ctrlKey}get metaKey(){return this._metaKey}get shiftKey(){return this._shiftKey}get leftButton(){return this._leftButton}get middleButton(){return this._middleButton}get startedOnLineNumbers(){return this._startedOnLineNumbers}constructor(){this._altKey=!1,this._ctrlKey=!1,this._metaKey=!1,this._shiftKey=!1,this._leftButton=!1,this._middleButton=!1,this._startedOnLineNumbers=!1,this._lastMouseDownPosition=null,this._lastMouseDownPositionEqualCount=0,this._lastMouseDownCount=0,this._lastSetMouseDownCountTime=0,this.isDragAndDrop=!1}get count(){return this._lastMouseDownCount}setModifiers(l){this._altKey=l.altKey,this._ctrlKey=l.ctrlKey,this._metaKey=l.metaKey,this._shiftKey=l.shiftKey}setStartButtons(l){this._leftButton=l.leftButton,this._middleButton=l.middleButton}setStartedOnLineNumbers(l){this._startedOnLineNumbers=l}trySetCount(l,r){const d=new Date().getTime();d-this._lastSetMouseDownCountTime>h.CLEAR_MOUSE_DOWN_COUNT_TIME&&(l=1),this._lastSetMouseDownCountTime=d,l>this._lastMouseDownCount+1&&(l=this._lastMouseDownCount+1),this._lastMouseDownPosition&&this._lastMouseDownPosition.equals(r)?this._lastMouseDownPositionEqualCount++:this._lastMouseDownPositionEqualCount=1,this._lastMouseDownPosition=r,this._lastMouseDownCount=Math.min(l,this._lastMouseDownPositionEqualCount)}}h.CLEAR_MOUSE_DOWN_COUNT_TIME=400}),define(X[793],J([1,0,7,17,56,2,792,151,204,217]),function(j,e,S,k,y,D,w,b,C,g){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.PointerHandler=e.PointerEventHandler=void 0;class m extends w.MouseHandler{constructor(s,a,c){super(s,a,c),this._register(y.Gesture.addTarget(this.viewHelper.linesContentDomNode)),this._register(S.addDisposableListener(this.viewHelper.linesContentDomNode,y.EventType.Tap,o=>this.onTap(o))),this._register(S.addDisposableListener(this.viewHelper.linesContentDomNode,y.EventType.Change,o=>this.onChange(o))),this._register(S.addDisposableListener(this.viewHelper.linesContentDomNode,y.EventType.Contextmenu,o=>this._onContextMenu(new b.EditorMouseEvent(o,!1,this.viewHelper.viewDomNode),!1))),this._lastPointerType="mouse",this._register(S.addDisposableListener(this.viewHelper.linesContentDomNode,"pointerdown",o=>{const l=o.pointerType;if(l==="mouse"){this._lastPointerType="mouse";return}else l==="touch"?this._lastPointerType="touch":this._lastPointerType="pen"}));const h=new b.EditorPointerEventFactory(this.viewHelper.viewDomNode);this._register(h.onPointerMove(this.viewHelper.viewDomNode,o=>this._onMouseMove(o))),this._register(h.onPointerUp(this.viewHelper.viewDomNode,o=>this._onMouseUp(o))),this._register(h.onPointerLeave(this.viewHelper.viewDomNode,o=>this._onMouseLeave(o))),this._register(h.onPointerDown(this.viewHelper.viewDomNode,(o,l)=>this._onMouseDown(o,l)))}onTap(s){if(!s.initialTarget||!this.viewHelper.linesContentDomNode.contains(s.initialTarget))return;s.preventDefault(),this.viewHelper.focusTextArea();const a=this._createMouseTarget(new b.EditorMouseEvent(s,!1,this.viewHelper.viewDomNode),!1);a.position&&this.viewController.dispatchMouse({position:a.position,mouseColumn:a.position.column,startedOnLineNumbers:!1,revealType:1,mouseDownCount:s.tapCount,inSelectionMode:!1,altKey:!1,ctrlKey:!1,metaKey:!1,shiftKey:!1,leftButton:!1,middleButton:!1,onInjectedText:a.type===6&&a.detail.injectedText!==null})}onChange(s){this._lastPointerType==="touch"&&this._context.viewModel.viewLayout.deltaScrollNow(-s.translationX,-s.translationY)}_onMouseDown(s,a){s.browserEvent.pointerType!=="touch"&&super._onMouseDown(s,a)}}e.PointerEventHandler=m;class n extends w.MouseHandler{constructor(s,a,c){super(s,a,c),this._register(y.Gesture.addTarget(this.viewHelper.linesContentDomNode)),this._register(S.addDisposableListener(this.viewHelper.linesContentDomNode,y.EventType.Tap,h=>this.onTap(h))),this._register(S.addDisposableListener(this.viewHelper.linesContentDomNode,y.EventType.Change,h=>this.onChange(h))),this._register(S.addDisposableListener(this.viewHelper.linesContentDomNode,y.EventType.Contextmenu,h=>this._onContextMenu(new b.EditorMouseEvent(h,!1,this.viewHelper.viewDomNode),!1)))}onTap(s){s.preventDefault(),this.viewHelper.focusTextArea();const a=this._createMouseTarget(new b.EditorMouseEvent(s,!1,this.viewHelper.viewDomNode),!1);if(a.position){const c=document.createEvent("CustomEvent");c.initEvent(g.TextAreaSyntethicEvents.Tap,!1,!0),this.viewHelper.dispatchTextAreaEvent(c),this.viewController.moveTo(a.position,1)}}onChange(s){this._context.viewModel.viewLayout.deltaScrollNow(-s.translationX,-s.translationY)}}class t extends D.Disposable{constructor(s,a,c){super(),k.isIOS&&C.BrowserFeatures.pointerEvents?this.handler=this._register(new m(s,a,c)):window.TouchEvent?this.handler=this._register(new n(s,a,c)):this.handler=this._register(new w.MouseHandler(s,a,c))}getTargetAtClientPoint(s,a){return this.handler.getTargetAtClientPoint(s,a)}}e.PointerHandler=t}),define(X[794],J([1,0,17,12,74,218,52,328,13,5,134,161,449,394]),function(j,e,S,k,y,D,w,b,C,g,m,n,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ViewLines=void 0;class i{constructor(){this._currentVisibleRange=new g.Range(1,1,1,1)}getCurrentVisibleRange(){return this._currentVisibleRange}setCurrentVisibleRange(o){this._currentVisibleRange=o}}class s{constructor(o,l,r,d,u,_,f){this.minimalReveal=o,this.lineNumber=l,this.startColumn=r,this.endColumn=d,this.startScrollTop=u,this.stopScrollTop=_,this.scrollType=f,this.type="range",this.minLineNumber=l,this.maxLineNumber=l}}class a{constructor(o,l,r,d,u){this.minimalReveal=o,this.selections=l,this.startScrollTop=r,this.stopScrollTop=d,this.scrollType=u,this.type="selections";let _=l[0].startLineNumber,f=l[0].endLineNumber;for(let v=1,p=l.length;v<p;v++){const L=l[v];_=Math.min(_,L.startLineNumber),f=Math.max(f,L.endLineNumber)}this.minLineNumber=_,this.maxLineNumber=f}}class c extends w.ViewPart{constructor(o,l){super(o),this._linesContent=l,this._textRangeRestingSpot=document.createElement("div"),this._visibleLines=new D.VisibleLinesCollection(this),this.domNode=this._visibleLines.domNode;const r=this._context.configuration,d=this._context.configuration.options,u=d.get(48),_=d.get(140);this._lineHeight=d.get(64),this._typicalHalfwidthCharacterWidth=u.typicalHalfwidthCharacterWidth,this._isViewportWrapping=_.isViewportWrapping,this._revealHorizontalRightPadding=d.get(95),this._cursorSurroundingLines=d.get(27),this._cursorSurroundingLinesStyle=d.get(28),this._canUseLayerHinting=!d.get(30),this._viewLineOptions=new b.ViewLineOptions(r,this._context.theme.type),w.PartFingerprints.write(this.domNode,7),this.domNode.setClassName(`view-lines ${n.MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`),(0,y.applyFontInfo)(this.domNode,u),this._maxLineWidth=0,this._asyncUpdateLineWidths=new k.RunOnceScheduler(()=>{this._updateLineWidthsSlow()},200),this._asyncCheckMonospaceFontAssumptions=new k.RunOnceScheduler(()=>{this._checkMonospaceFontAssumptions()},2e3),this._lastRenderedData=new i,this._horizontalRevealRequest=null,this._stickyScrollEnabled=d.get(110).enabled,this._maxNumberStickyLines=d.get(110).maxLineCount}dispose(){this._asyncUpdateLineWidths.dispose(),this._asyncCheckMonospaceFontAssumptions.dispose(),super.dispose()}getDomNode(){return this.domNode}createVisibleLine(){return new b.ViewLine(this._viewLineOptions)}onConfigurationChanged(o){this._visibleLines.onConfigurationChanged(o),o.hasChanged(140)&&(this._maxLineWidth=0);const l=this._context.configuration.options,r=l.get(48),d=l.get(140);return this._lineHeight=l.get(64),this._typicalHalfwidthCharacterWidth=r.typicalHalfwidthCharacterWidth,this._isViewportWrapping=d.isViewportWrapping,this._revealHorizontalRightPadding=l.get(95),this._cursorSurroundingLines=l.get(27),this._cursorSurroundingLinesStyle=l.get(28),this._canUseLayerHinting=!l.get(30),this._stickyScrollEnabled=l.get(110).enabled,this._maxNumberStickyLines=l.get(110).maxLineCount,(0,y.applyFontInfo)(this.domNode,r),this._onOptionsMaybeChanged(),o.hasChanged(139)&&(this._maxLineWidth=0),!0}_onOptionsMaybeChanged(){const o=this._context.configuration,l=new b.ViewLineOptions(o,this._context.theme.type);if(!this._viewLineOptions.equals(l)){this._viewLineOptions=l;const r=this._visibleLines.getStartLineNumber(),d=this._visibleLines.getEndLineNumber();for(let u=r;u<=d;u++)this._visibleLines.getVisibleLine(u).onOptionsChanged(this._viewLineOptions);return!0}return!1}onCursorStateChanged(o){const l=this._visibleLines.getStartLineNumber(),r=this._visibleLines.getEndLineNumber();let d=!1;for(let u=l;u<=r;u++)d=this._visibleLines.getVisibleLine(u).onSelectionChanged()||d;return d}onDecorationsChanged(o){{const l=this._visibleLines.getStartLineNumber(),r=this._visibleLines.getEndLineNumber();for(let d=l;d<=r;d++)this._visibleLines.getVisibleLine(d).onDecorationsChanged()}return!0}onFlushed(o){const l=this._visibleLines.onFlushed(o);return this._maxLineWidth=0,l}onLinesChanged(o){return this._visibleLines.onLinesChanged(o)}onLinesDeleted(o){return this._visibleLines.onLinesDeleted(o)}onLinesInserted(o){return this._visibleLines.onLinesInserted(o)}onRevealRangeRequest(o){const l=this._computeScrollTopToRevealRange(this._context.viewLayout.getFutureViewport(),o.source,o.minimalReveal,o.range,o.selections,o.verticalType);if(l===-1)return!1;let r=this._context.viewLayout.validateScrollPosition({scrollTop:l});o.revealHorizontal?o.range&&o.range.startLineNumber!==o.range.endLineNumber?r={scrollTop:r.scrollTop,scrollLeft:0}:o.range?this._horizontalRevealRequest=new s(o.minimalReveal,o.range.startLineNumber,o.range.startColumn,o.range.endColumn,this._context.viewLayout.getCurrentScrollTop(),r.scrollTop,o.scrollType):o.selections&&o.selections.length>0&&(this._horizontalRevealRequest=new a(o.minimalReveal,o.selections,this._context.viewLayout.getCurrentScrollTop(),r.scrollTop,o.scrollType)):this._horizontalRevealRequest=null;const u=Math.abs(this._context.viewLayout.getCurrentScrollTop()-r.scrollTop)<=this._lineHeight?1:o.scrollType;return this._context.viewModel.viewLayout.setScrollPosition(r,u),!0}onScrollChanged(o){if(this._horizontalRevealRequest&&o.scrollLeftChanged&&(this._horizontalRevealRequest=null),this._horizontalRevealRequest&&o.scrollTopChanged){const l=Math.min(this._horizontalRevealRequest.startScrollTop,this._horizontalRevealRequest.stopScrollTop),r=Math.max(this._horizontalRevealRequest.startScrollTop,this._horizontalRevealRequest.stopScrollTop);(o.scrollTop<l||o.scrollTop>r)&&(this._horizontalRevealRequest=null)}return this.domNode.setWidth(o.scrollWidth),this._visibleLines.onScrollChanged(o)||!0}onTokensChanged(o){return this._visibleLines.onTokensChanged(o)}onZonesChanged(o){return this._context.viewModel.viewLayout.setMaxLineWidth(this._maxLineWidth),this._visibleLines.onZonesChanged(o)}onThemeChanged(o){return this._onOptionsMaybeChanged()}getPositionFromDOMInfo(o,l){const r=this._getViewLineDomNode(o);if(r===null)return null;const d=this._getLineNumberFor(r);if(d===-1||d<1||d>this._context.viewModel.getLineCount())return null;if(this._context.viewModel.getLineMaxColumn(d)===1)return new C.Position(d,1);const u=this._visibleLines.getStartLineNumber(),_=this._visibleLines.getEndLineNumber();if(d<u||d>_)return null;let f=this._visibleLines.getVisibleLine(d).getColumnOfNodeOffset(d,o,l);const v=this._context.viewModel.getLineMinColumn(d);return f<v&&(f=v),new C.Position(d,f)}_getViewLineDomNode(o){for(;o&&o.nodeType===1;){if(o.className===b.ViewLine.CLASS_NAME)return o;o=o.parentElement}return null}_getLineNumberFor(o){const l=this._visibleLines.getStartLineNumber(),r=this._visibleLines.getEndLineNumber();for(let d=l;d<=r;d++){const u=this._visibleLines.getVisibleLine(d);if(o===u.getDomNode())return d}return-1}getLineWidth(o){const l=this._visibleLines.getStartLineNumber(),r=this._visibleLines.getEndLineNumber();if(o<l||o>r)return-1;const d=new t.DomReadingContext(this.domNode.domNode,this._textRangeRestingSpot),u=this._visibleLines.getVisibleLine(o).getWidth(d);return this._updateLineWidthsSlowIfDomDidLayout(d),u}linesVisibleRangesForRange(o,l){if(this.shouldRender())return null;const r=o.endLineNumber,d=g.Range.intersectRanges(o,this._lastRenderedData.getCurrentVisibleRange());if(!d)return null;const u=[];let _=0;const f=new t.DomReadingContext(this.domNode.domNode,this._textRangeRestingSpot);let v=0;l&&(v=this._context.viewModel.coordinatesConverter.convertViewPositionToModelPosition(new C.Position(d.startLineNumber,1)).lineNumber);const p=this._visibleLines.getStartLineNumber(),L=this._visibleLines.getEndLineNumber();for(let E=d.startLineNumber;E<=d.endLineNumber;E++){if(E<p||E>L)continue;const I=E===d.startLineNumber?d.startColumn:1,T=E===d.endLineNumber?d.endColumn:this._context.viewModel.getLineMaxColumn(E),F=this._visibleLines.getVisibleLine(E).getVisibleRangesForRange(E,I,T,f);if(!!F){if(l&&E<r){const R=v;v=this._context.viewModel.coordinatesConverter.convertViewPositionToModelPosition(new C.Position(E+1,1)).lineNumber,R!==v&&(F.ranges[F.ranges.length-1].width+=this._typicalHalfwidthCharacterWidth)}u[_++]=new m.LineVisibleRanges(F.outsideRenderedLine,E,m.HorizontalRange.from(F.ranges))}}return this._updateLineWidthsSlowIfDomDidLayout(f),_===0?null:u}_visibleRangesForLineRange(o,l,r){if(this.shouldRender()||o<this._visibleLines.getStartLineNumber()||o>this._visibleLines.getEndLineNumber())return null;const d=new t.DomReadingContext(this.domNode.domNode,this._textRangeRestingSpot),u=this._visibleLines.getVisibleLine(o).getVisibleRangesForRange(o,l,r,d);return this._updateLineWidthsSlowIfDomDidLayout(d),u}visibleRangeForPosition(o){const l=this._visibleRangesForLineRange(o.lineNumber,o.column,o.column);return l?new m.HorizontalPosition(l.outsideRenderedLine,l.ranges[0].left):null}_updateLineWidthsFast(){return this._updateLineWidths(!0)}_updateLineWidthsSlow(){this._updateLineWidths(!1)}_updateLineWidthsSlowIfDomDidLayout(o){!o.didDomLayout||this._asyncUpdateLineWidths.isScheduled()||(this._asyncUpdateLineWidths.cancel(),this._updateLineWidthsSlow())}_updateLineWidths(o){const l=this._visibleLines.getStartLineNumber(),r=this._visibleLines.getEndLineNumber();let d=1,u=!0;for(let _=l;_<=r;_++){const f=this._visibleLines.getVisibleLine(_);if(o&&!f.getWidthIsFast()){u=!1;continue}d=Math.max(d,f.getWidth(null))}return u&&l===1&&r===this._context.viewModel.getLineCount()&&(this._maxLineWidth=0),this._ensureMaxLineWidth(d),u}_checkMonospaceFontAssumptions(){let o=-1,l=-1;const r=this._visibleLines.getStartLineNumber(),d=this._visibleLines.getEndLineNumber();for(let u=r;u<=d;u++){const _=this._visibleLines.getVisibleLine(u);if(_.needsMonospaceFontCheck()){const f=_.getWidth(null);f>l&&(l=f,o=u)}}if(o!==-1&&!this._visibleLines.getVisibleLine(o).monospaceAssumptionsAreValid())for(let u=r;u<=d;u++)this._visibleLines.getVisibleLine(u).onMonospaceAssumptionsInvalidated()}prepareRender(){throw new Error("Not supported")}render(){throw new Error("Not supported")}renderText(o){if(this._visibleLines.renderLines(o),this._lastRenderedData.setCurrentVisibleRange(o.visibleRange),this.domNode.setWidth(this._context.viewLayout.getScrollWidth()),this.domNode.setHeight(Math.min(this._context.viewLayout.getScrollHeight(),1e6)),this._horizontalRevealRequest){const r=this._horizontalRevealRequest;if(o.startLineNumber<=r.minLineNumber&&r.maxLineNumber<=o.endLineNumber){this._horizontalRevealRequest=null,this.onDidRender();const d=this._computeScrollLeftToReveal(r);d&&(this._isViewportWrapping||this._ensureMaxLineWidth(d.maxHorizontalOffset),this._context.viewModel.viewLayout.setScrollPosition({scrollLeft:d.scrollLeft},r.scrollType))}}if(this._updateLineWidthsFast()?this._asyncUpdateLineWidths.cancel():this._asyncUpdateLineWidths.schedule(),S.isLinux&&!this._asyncCheckMonospaceFontAssumptions.isScheduled()){const r=this._visibleLines.getStartLineNumber(),d=this._visibleLines.getEndLineNumber();for(let u=r;u<=d;u++)if(this._visibleLines.getVisibleLine(u).needsMonospaceFontCheck()){this._asyncCheckMonospaceFontAssumptions.schedule();break}}this._linesContent.setLayerHinting(this._canUseLayerHinting),this._linesContent.setContain("strict");const l=this._context.viewLayout.getCurrentScrollTop()-o.bigNumbersDelta;this._linesContent.setTop(-l),this._linesContent.setLeft(-this._context.viewLayout.getCurrentScrollLeft())}_ensureMaxLineWidth(o){const l=Math.ceil(o);this._maxLineWidth<l&&(this._maxLineWidth=l,this._context.viewModel.viewLayout.setMaxLineWidth(this._maxLineWidth))}_computeScrollTopToRevealRange(o,l,r,d,u,_){const f=o.top,v=o.height,p=f+v;let L,E,I;if(u&&u.length>0){let N=u[0].startLineNumber,A=u[0].endLineNumber;for(let P=1,x=u.length;P<x;P++){const W=u[P];N=Math.min(N,W.startLineNumber),A=Math.max(A,W.endLineNumber)}L=!1,E=this._context.viewLayout.getVerticalOffsetForLineNumber(N),I=this._context.viewLayout.getVerticalOffsetForLineNumber(A)+this._lineHeight}else if(d)L=!0,E=this._context.viewLayout.getVerticalOffsetForLineNumber(d.startLineNumber),I=this._context.viewLayout.getVerticalOffsetForLineNumber(d.endLineNumber)+this._lineHeight;else return-1;const T=(l==="mouse"||r)&&this._cursorSurroundingLinesStyle==="default";let F=0,R=0;if(T)r||(F=this._lineHeight);else{const N=Math.min(v/this._lineHeight/2,this._cursorSurroundingLines);this._stickyScrollEnabled?F=Math.max(N,this._maxNumberStickyLines)*this._lineHeight:F=N*this._lineHeight,R=Math.max(0,N-1)*this._lineHeight}r||(_===0||_===4)&&(R+=this._lineHeight),E-=F,I+=R;let M;if(I-E>v){if(!L)return-1;M=E}else if(_===5||_===6)if(_===6&&f<=E&&I<=p)M=f;else{const N=Math.max(5*this._lineHeight,v*.2),A=E-N,P=I-v;M=Math.max(P,A)}else if(_===1||_===2)if(_===2&&f<=E&&I<=p)M=f;else{const N=(E+I)/2;M=Math.max(0,N-v/2)}else M=this._computeMinimumScrolling(f,p,E,I,_===3,_===4);return M}_computeScrollLeftToReveal(o){const l=this._context.viewLayout.getCurrentViewport(),r=this._context.configuration.options.get(139),d=l.left,u=d+l.width-r.verticalScrollbarWidth;let _=1073741824,f=0;if(o.type==="range"){const p=this._visibleRangesForLineRange(o.lineNumber,o.startColumn,o.endColumn);if(!p)return null;for(const L of p.ranges)_=Math.min(_,Math.round(L.left)),f=Math.max(f,Math.round(L.left+L.width))}else for(const p of o.selections){if(p.startLineNumber!==p.endLineNumber)return null;const L=this._visibleRangesForLineRange(p.startLineNumber,p.startColumn,p.endColumn);if(!L)return null;for(const E of L.ranges)_=Math.min(_,Math.round(E.left)),f=Math.max(f,Math.round(E.left+E.width))}return o.minimalReveal||(_=Math.max(0,_-c.HORIZONTAL_EXTRA_PX),f+=this._revealHorizontalRightPadding),o.type==="selections"&&f-_>l.width?null:{scrollLeft:this._computeMinimumScrolling(d,u,_,f),maxHorizontalOffset:f}}_computeMinimumScrolling(o,l,r,d,u,_){o=o|0,l=l|0,r=r|0,d=d|0,u=!!u,_=!!_;const f=l-o;if(d-r<f){if(u)return r;if(_)return Math.max(0,d-f);if(r<o)return r;if(d>l)return Math.max(0,d-f)}else return r;return o}}c.HORIZONTAL_EXTRA_PX=30,e.ViewLines=c}),define(X[24],J([1,0,6,2,8,34,91]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Themable=e.registerThemingParticipant=e.Extensions=e.getThemeTypeSelector=e.themeColorFromId=e.IThemeService=void 0,e.IThemeService=(0,y.createDecorator)("themeService");function b(i){return{id:i}}e.themeColorFromId=b;function C(i){switch(i){case w.ColorScheme.DARK:return"vs-dark";case w.ColorScheme.HIGH_CONTRAST_DARK:return"hc-black";case w.ColorScheme.HIGH_CONTRAST_LIGHT:return"hc-light";default:return"vs"}}e.getThemeTypeSelector=C,e.Extensions={ThemingContribution:"base.contributions.theming"};class g{constructor(){this.themingParticipants=[],this.themingParticipants=[],this.onThemingParticipantAddedEmitter=new S.Emitter}onColorThemeChange(s){return this.themingParticipants.push(s),this.onThemingParticipantAddedEmitter.fire(s),(0,k.toDisposable)(()=>{const a=this.themingParticipants.indexOf(s);this.themingParticipants.splice(a,1)})}getThemingParticipants(){return this.themingParticipants}}const m=new g;D.Registry.add(e.Extensions.ThemingContribution,m);function n(i){return m.onColorThemeChange(i)}e.registerThemingParticipant=n;class t extends k.Disposable{constructor(s){super(),this.themeService=s,this.theme=s.getColorTheme(),this._register(this.themeService.onDidColorThemeChange(a=>this.onThemeChange(a)))}onThemeChange(s){this.theme=s,this.updateStyles()}updateStyles(){}}e.Themable=t}),define(X[795],J([1,0,6,2,59,24]),function(j,e,S,k,y,D){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.GlobalStyleSheet=e.AbstractCodeEditorService=void 0;let w=class extends k.Disposable{constructor(g){super(),this._themeService=g,this._onWillCreateCodeEditor=this._register(new S.Emitter),this._onCodeEditorAdd=this._register(new S.Emitter),this.onCodeEditorAdd=this._onCodeEditorAdd.event,this._onCodeEditorRemove=this._register(new S.Emitter),this.onCodeEditorRemove=this._onCodeEditorRemove.event,this._onWillCreateDiffEditor=this._register(new S.Emitter),this._onDiffEditorAdd=this._register(new S.Emitter),this.onDiffEditorAdd=this._onDiffEditorAdd.event,this._onDiffEditorRemove=this._register(new S.Emitter),this.onDiffEditorRemove=this._onDiffEditorRemove.event,this._decorationOptionProviders=new Map,this._codeEditorOpenHandlers=new y.LinkedList,this._modelProperties=new Map,this._codeEditors=Object.create(null),this._diffEditors=Object.create(null),this._globalStyleSheet=null}willCreateCodeEditor(){this._onWillCreateCodeEditor.fire()}addCodeEditor(g){this._codeEditors[g.getId()]=g,this._onCodeEditorAdd.fire(g)}removeCodeEditor(g){delete this._codeEditors[g.getId()]&&this._onCodeEditorRemove.fire(g)}listCodeEditors(){return Object.keys(this._codeEditors).map(g=>this._codeEditors[g])}willCreateDiffEditor(){this._onWillCreateDiffEditor.fire()}addDiffEditor(g){this._diffEditors[g.getId()]=g,this._onDiffEditorAdd.fire(g)}removeDiffEditor(g){delete this._diffEditors[g.getId()]&&this._onDiffEditorRemove.fire(g)}listDiffEditors(){return Object.keys(this._diffEditors).map(g=>this._diffEditors[g])}getFocusedCodeEditor(){let g=null;const m=this.listCodeEditors();for(const n of m){if(n.hasTextFocus())return n;n.hasWidgetFocus()&&(g=n)}return g}removeDecorationType(g){const m=this._decorationOptionProviders.get(g);m&&(m.refCount--,m.refCount<=0&&(this._decorationOptionProviders.delete(g),m.dispose(),this.listCodeEditors().forEach(n=>n.removeDecorationsByType(g))))}setModelProperty(g,m,n){const t=g.toString();let i;this._modelProperties.has(t)?i=this._modelProperties.get(t):(i=new Map,this._modelProperties.set(t,i)),i.set(m,n)}getModelProperty(g,m){const n=g.toString();if(this._modelProperties.has(n))return this._modelProperties.get(n).get(m)}openCodeEditor(g,m,n){return Ee(this,void 0,void 0,function*(){for(const t of this._codeEditorOpenHandlers){const i=yield t(g,m,n);if(i!==null)return i}return null})}registerCodeEditorOpenHandler(g){const m=this._codeEditorOpenHandlers.unshift(g);return(0,k.toDisposable)(m)}};w=Ne([fe(0,D.IThemeService)],w),e.AbstractCodeEditorService=w;class b{constructor(g){this._styleSheet=g}}e.GlobalStyleSheet=b}),define(X[796],J([1,0,7,35,77,52,24]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.EditorScrollbar=void 0;class b extends D.ViewPart{constructor(g,m,n,t){super(g);const i=this._context.configuration.options,s=i.get(98),a=i.get(72),c=i.get(38),h=i.get(101),o={listenOnDomNode:n.domNode,className:"editor-scrollable "+(0,w.getThemeTypeSelector)(g.theme.type),useShadows:!1,lazyRender:!0,vertical:s.vertical,horizontal:s.horizontal,verticalHasArrows:s.verticalHasArrows,horizontalHasArrows:s.horizontalHasArrows,verticalScrollbarSize:s.verticalScrollbarSize,verticalSliderSize:s.verticalSliderSize,horizontalScrollbarSize:s.horizontalScrollbarSize,horizontalSliderSize:s.horizontalSliderSize,handleMouseWheel:s.handleMouseWheel,alwaysConsumeMouseWheel:s.alwaysConsumeMouseWheel,arrowSize:s.arrowSize,mouseWheelScrollSensitivity:a,fastScrollSensitivity:c,scrollPredominantAxis:h,scrollByPage:s.scrollByPage};this.scrollbar=this._register(new y.SmoothScrollableElement(m.domNode,o,this._context.viewLayout.getScrollable())),D.PartFingerprints.write(this.scrollbar.getDomNode(),5),this.scrollbarDomNode=(0,k.createFastDomNode)(this.scrollbar.getDomNode()),this.scrollbarDomNode.setPosition("absolute"),this._setLayout();const l=(r,d,u)=>{const _={};if(d){const f=r.scrollTop;f&&(_.scrollTop=this._context.viewLayout.getCurrentScrollTop()+f,r.scrollTop=0)}if(u){const f=r.scrollLeft;f&&(_.scrollLeft=this._context.viewLayout.getCurrentScrollLeft()+f,r.scrollLeft=0)}this._context.viewModel.viewLayout.setScrollPosition(_,1)};this._register(S.addDisposableListener(n.domNode,"scroll",r=>l(n.domNode,!0,!0))),this._register(S.addDisposableListener(m.domNode,"scroll",r=>l(m.domNode,!0,!1))),this._register(S.addDisposableListener(t.domNode,"scroll",r=>l(t.domNode,!0,!1))),this._register(S.addDisposableListener(this.scrollbarDomNode.domNode,"scroll",r=>l(this.scrollbarDomNode.domNode,!0,!1)))}dispose(){super.dispose()}_setLayout(){const g=this._context.configuration.options,m=g.get(139);this.scrollbarDomNode.setLeft(m.contentLeft),g.get(70).side==="right"?this.scrollbarDomNode.setWidth(m.contentWidth+m.minimap.minimapWidth):this.scrollbarDomNode.setWidth(m.contentWidth),this.scrollbarDomNode.setHeight(m.height)}getOverviewRulerLayoutInfo(){return this.scrollbar.getOverviewRulerLayoutInfo()}getDomNode(){return this.scrollbarDomNode}delegateVerticalScrollbarPointerDown(g){this.scrollbar.delegateVerticalScrollbarPointerDown(g)}delegateScrollFromMouseWheelEvent(g){this.scrollbar.delegateScrollFromMouseWheelEvent(g)}onConfigurationChanged(g){if(g.hasChanged(98)||g.hasChanged(72)||g.hasChanged(38)){const m=this._context.configuration.options,n=m.get(98),t=m.get(72),i=m.get(38),s=m.get(101),a={vertical:n.vertical,horizontal:n.horizontal,verticalScrollbarSize:n.verticalScrollbarSize,horizontalScrollbarSize:n.horizontalScrollbarSize,scrollByPage:n.scrollByPage,handleMouseWheel:n.handleMouseWheel,mouseWheelScrollSensitivity:t,fastScrollSensitivity:i,scrollPredominantAxis:s};this.scrollbar.updateOptions(a)}return g.hasChanged(139)&&this._setLayout(),!0}onScrollChanged(g){return!0}onThemeChanged(g){return this.scrollbar.updateClassName("editor-scrollable "+(0,w.getThemeTypeSelector)(this._context.theme.type)),!0}prepareRender(g){}render(g){this.scrollbar.renderNow()}}e.EditorScrollbar=b}),define(X[797],J([1,0,106,31,24,402]),function(j,e,S,k,y){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.SelectionsOverlay=void 0;class D{constructor(t){this.left=t.left,this.width=t.width,this.startStyle=null,this.endStyle=null}}class w{constructor(t,i){this.lineNumber=t,this.ranges=i}}function b(n){return new D(n)}function C(n){return new w(n.lineNumber,n.ranges.map(b))}class g extends S.DynamicViewOverlay{constructor(t){super(),this._previousFrameVisibleRangesWithStyle=[],this._context=t;const i=this._context.configuration.options;this._lineHeight=i.get(64),this._roundedSelection=i.get(96),this._typicalHalfwidthCharacterWidth=i.get(48).typicalHalfwidthCharacterWidth,this._selections=[],this._renderResult=null,this._context.addEventHandler(this)}dispose(){this._context.removeEventHandler(this),this._renderResult=null,super.dispose()}onConfigurationChanged(t){const i=this._context.configuration.options;return this._lineHeight=i.get(64),this._roundedSelection=i.get(96),this._typicalHalfwidthCharacterWidth=i.get(48).typicalHalfwidthCharacterWidth,!0}onCursorStateChanged(t){return this._selections=t.selections.slice(0),!0}onDecorationsChanged(t){return!0}onFlushed(t){return!0}onLinesChanged(t){return!0}onLinesDeleted(t){return!0}onLinesInserted(t){return!0}onScrollChanged(t){return t.scrollTopChanged}onZonesChanged(t){return!0}_visibleRangesHaveGaps(t){for(let i=0,s=t.length;i<s;i++)if(t[i].ranges.length>1)return!0;return!1}_enrichVisibleRangesWithStyle(t,i,s){const a=this._typicalHalfwidthCharacterWidth/4;let c=null,h=null;if(s&&s.length>0&&i.length>0){const o=i[0].lineNumber;if(o===t.startLineNumber)for(let r=0;!c&&r<s.length;r++)s[r].lineNumber===o&&(c=s[r].ranges[0]);const l=i[i.length-1].lineNumber;if(l===t.endLineNumber)for(let r=s.length-1;!h&&r>=0;r--)s[r].lineNumber===l&&(h=s[r].ranges[0]);c&&!c.startStyle&&(c=null),h&&!h.startStyle&&(h=null)}for(let o=0,l=i.length;o<l;o++){const r=i[o].ranges[0],d=r.left,u=r.left+r.width,_={top:0,bottom:0},f={top:0,bottom:0};if(o>0){const v=i[o-1].ranges[0].left,p=i[o-1].ranges[0].left+i[o-1].ranges[0].width;m(d-v)<a?_.top=2:d>v&&(_.top=1),m(u-p)<a?f.top=2:v<u&&u<p&&(f.top=1)}else c&&(_.top=c.startStyle.top,f.top=c.endStyle.top);if(o+1<l){const v=i[o+1].ranges[0].left,p=i[o+1].ranges[0].left+i[o+1].ranges[0].width;m(d-v)<a?_.bottom=2:v<d&&d<p&&(_.bottom=1),m(u-p)<a?f.bottom=2:u<p&&(f.bottom=1)}else h&&(_.bottom=h.startStyle.bottom,f.bottom=h.endStyle.bottom);r.startStyle=_,r.endStyle=f}}_getVisibleRangesWithStyle(t,i,s){const c=(i.linesVisibleRangesForRange(t,!0)||[]).map(C);return!this._visibleRangesHaveGaps(c)&&this._roundedSelection&&this._enrichVisibleRangesWithStyle(i.visibleRange,c,s),c}_createSelectionPiece(t,i,s,a,c){return'<div class="cslr '+s+'" style="top:'+t.toString()+"px;left:"+a.toString()+"px;width:"+c.toString()+"px;height:"+i+'px;"></div>'}_actualRenderOneSelection(t,i,s,a){if(a.length===0)return;const c=!!a[0].ranges[0].startStyle,h=this._lineHeight.toString(),o=(this._lineHeight-1).toString(),l=a[0].lineNumber,r=a[a.length-1].lineNumber;for(let d=0,u=a.length;d<u;d++){const _=a[d],f=_.lineNumber,v=f-i,p=s&&(f===r||f===l)?o:h,L=s&&f===l?1:0;let E="",I="";for(let T=0,F=_.ranges.length;T<F;T++){const R=_.ranges[T];if(c){const N=R.startStyle,A=R.endStyle;if(N.top===1||N.bottom===1){E+=this._createSelectionPiece(L,p,g.SELECTION_CLASS_NAME,R.left-g.ROUNDED_PIECE_WIDTH,g.ROUNDED_PIECE_WIDTH);let P=g.EDITOR_BACKGROUND_CLASS_NAME;N.top===1&&(P+=" "+g.SELECTION_TOP_RIGHT),N.bottom===1&&(P+=" "+g.SELECTION_BOTTOM_RIGHT),E+=this._createSelectionPiece(L,p,P,R.left-g.ROUNDED_PIECE_WIDTH,g.ROUNDED_PIECE_WIDTH)}if(A.top===1||A.bottom===1){E+=this._createSelectionPiece(L,p,g.SELECTION_CLASS_NAME,R.left+R.width,g.ROUNDED_PIECE_WIDTH);let P=g.EDITOR_BACKGROUND_CLASS_NAME;A.top===1&&(P+=" "+g.SELECTION_TOP_LEFT),A.bottom===1&&(P+=" "+g.SELECTION_BOTTOM_LEFT),E+=this._createSelectionPiece(L,p,P,R.left+R.width,g.ROUNDED_PIECE_WIDTH)}}let M=g.SELECTION_CLASS_NAME;if(c){const N=R.startStyle,A=R.endStyle;N.top===0&&(M+=" "+g.SELECTION_TOP_LEFT),N.bottom===0&&(M+=" "+g.SELECTION_BOTTOM_LEFT),A.top===0&&(M+=" "+g.SELECTION_TOP_RIGHT),A.bottom===0&&(M+=" "+g.SELECTION_BOTTOM_RIGHT)}I+=this._createSelectionPiece(L,p,M,R.left,R.width)}t[v][0]+=E,t[v][1]+=I}}prepareRender(t){const i=[],s=t.visibleRange.startLineNumber,a=t.visibleRange.endLineNumber;for(let h=s;h<=a;h++){const o=h-s;i[o]=["",""]}const c=[];for(let h=0,o=this._selections.length;h<o;h++){const l=this._selections[h];if(l.isEmpty()){c[h]=null;continue}const r=this._getVisibleRangesWithStyle(l,t,this._previousFrameVisibleRangesWithStyle[h]);c[h]=r,this._actualRenderOneSelection(i,s,this._selections.length>1,r)}this._previousFrameVisibleRangesWithStyle=c,this._renderResult=i.map(([h,o])=>h+o)}render(t,i){if(!this._renderResult)return"";const s=i-t;return s<0||s>=this._renderResult.length?"":this._renderResult[s]}}g.SELECTION_CLASS_NAME="selected-text",g.SELECTION_TOP_LEFT="top-left-radius",g.SELECTION_BOTTOM_LEFT="bottom-left-radius",g.SELECTION_TOP_RIGHT="top-right-radius",g.SELECTION_BOTTOM_RIGHT="bottom-right-radius",g.EDITOR_BACKGROUND_CLASS_NAME="monaco-editor-background",g.ROUNDED_PIECE_WIDTH=10,e.SelectionsOverlay=g,(0,y.registerThemingParticipant)((n,t)=>{const i=n.getColor(k.editorSelectionForeground);i&&!i.isTransparent()&&t.addRule(`.monaco-editor .view-line span.inline-selected-text { color: ${i}; }`)});function m(n){return n<0?-n:n}}),define(X[73],J([1,0,585,37,31,24]),function(j,e,S,k,y,D){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.editorUnicodeHighlightBackground=e.editorUnicodeHighlightBorder=e.editorBracketPairGuideActiveBackground6=e.editorBracketPairGuideActiveBackground5=e.editorBracketPairGuideActiveBackground4=e.editorBracketPairGuideActiveBackground3=e.editorBracketPairGuideActiveBackground2=e.editorBracketPairGuideActiveBackground1=e.editorBracketPairGuideBackground6=e.editorBracketPairGuideBackground5=e.editorBracketPairGuideBackground4=e.editorBracketPairGuideBackground3=e.editorBracketPairGuideBackground2=e.editorBracketPairGuideBackground1=e.editorBracketHighlightingUnexpectedBracketForeground=e.editorBracketHighlightingForeground6=e.editorBracketHighlightingForeground5=e.editorBracketHighlightingForeground4=e.editorBracketHighlightingForeground3=e.editorBracketHighlightingForeground2=e.editorBracketHighlightingForeground1=e.overviewRulerInfo=e.overviewRulerWarning=e.overviewRulerError=e.overviewRulerRangeHighlight=e.ghostTextBackground=e.ghostTextForeground=e.ghostTextBorder=e.editorUnnecessaryCodeOpacity=e.editorUnnecessaryCodeBorder=e.editorGutter=e.editorOverviewRulerBackground=e.editorOverviewRulerBorder=e.editorBracketMatchBorder=e.editorBracketMatchBackground=e.editorCodeLensForeground=e.editorRuler=e.editorDimmedLineNumber=e.editorActiveLineNumber=e.editorLineNumbers=e.editorActiveIndentGuides=e.editorIndentGuides=e.editorWhitespaces=e.editorCursorBackground=e.editorCursorForeground=e.editorSymbolHighlightBorder=e.editorSymbolHighlight=e.editorRangeHighlightBorder=e.editorRangeHighlight=e.editorLineHighlightBorder=e.editorLineHighlight=void 0,e.editorLineHighlight=(0,y.registerColor)("editor.lineHighlightBackground",{dark:null,light:null,hcDark:null,hcLight:null},S.localize(0,null)),e.editorLineHighlightBorder=(0,y.registerColor)("editor.lineHighlightBorder",{dark:"#282828",light:"#eeeeee",hcDark:"#f38518",hcLight:y.contrastBorder},S.localize(1,null)),e.editorRangeHighlight=(0,y.registerColor)("editor.rangeHighlightBackground",{dark:"#ffffff0b",light:"#fdff0033",hcDark:null,hcLight:null},S.localize(2,null),!0),e.editorRangeHighlightBorder=(0,y.registerColor)("editor.rangeHighlightBorder",{dark:null,light:null,hcDark:y.activeContrastBorder,hcLight:y.activeContrastBorder},S.localize(3,null),!0),e.editorSymbolHighlight=(0,y.registerColor)("editor.symbolHighlightBackground",{dark:y.editorFindMatchHighlight,light:y.editorFindMatchHighlight,hcDark:null,hcLight:null},S.localize(4,null),!0),e.editorSymbolHighlightBorder=(0,y.registerColor)("editor.symbolHighlightBorder",{dark:null,light:null,hcDark:y.activeContrastBorder,hcLight:y.activeContrastBorder},S.localize(5,null),!0),e.editorCursorForeground=(0,y.registerColor)("editorCursor.foreground",{dark:"#AEAFAD",light:k.Color.black,hcDark:k.Color.white,hcLight:"#0F4A85"},S.localize(6,null)),e.editorCursorBackground=(0,y.registerColor)("editorCursor.background",null,S.localize(7,null)),e.editorWhitespaces=(0,y.registerColor)("editorWhitespace.foreground",{dark:"#e3e4e229",light:"#33333333",hcDark:"#e3e4e229",hcLight:"#CCCCCC"},S.localize(8,null)),e.editorIndentGuides=(0,y.registerColor)("editorIndentGuide.background",{dark:e.editorWhitespaces,light:e.editorWhitespaces,hcDark:e.editorWhitespaces,hcLight:e.editorWhitespaces},S.localize(9,null)),e.editorActiveIndentGuides=(0,y.registerColor)("editorIndentGuide.activeBackground",{dark:e.editorWhitespaces,light:e.editorWhitespaces,hcDark:e.editorWhitespaces,hcLight:e.editorWhitespaces},S.localize(10,null)),e.editorLineNumbers=(0,y.registerColor)("editorLineNumber.foreground",{dark:"#858585",light:"#237893",hcDark:k.Color.white,hcLight:"#292929"},S.localize(11,null));const w=(0,y.registerColor)("editorActiveLineNumber.foreground",{dark:"#c6c6c6",light:"#0B216F",hcDark:y.activeContrastBorder,hcLight:y.activeContrastBorder},S.localize(12,null),!1,S.localize(13,null));e.editorActiveLineNumber=(0,y.registerColor)("editorLineNumber.activeForeground",{dark:w,light:w,hcDark:w,hcLight:w},S.localize(14,null)),e.editorDimmedLineNumber=(0,y.registerColor)("editorLineNumber.dimmedForeground",{dark:null,light:null,hcDark:null,hcLight:null},S.localize(15,null)),e.editorRuler=(0,y.registerColor)("editorRuler.foreground",{dark:"#5A5A5A",light:k.Color.lightgrey,hcDark:k.Color.white,hcLight:"#292929"},S.localize(16,null)),e.editorCodeLensForeground=(0,y.registerColor)("editorCodeLens.foreground",{dark:"#999999",light:"#919191",hcDark:"#999999",hcLight:"#292929"},S.localize(17,null)),e.editorBracketMatchBackground=(0,y.registerColor)("editorBracketMatch.background",{dark:"#0064001a",light:"#0064001a",hcDark:"#0064001a",hcLight:"#0000"},S.localize(18,null)),e.editorBracketMatchBorder=(0,y.registerColor)("editorBracketMatch.border",{dark:"#888",light:"#B9B9B9",hcDark:y.contrastBorder,hcLight:y.contrastBorder},S.localize(19,null)),e.editorOverviewRulerBorder=(0,y.registerColor)("editorOverviewRuler.border",{dark:"#7f7f7f4d",light:"#7f7f7f4d",hcDark:"#7f7f7f4d",hcLight:"#666666"},S.localize(20,null)),e.editorOverviewRulerBackground=(0,y.registerColor)("editorOverviewRuler.background",null,S.localize(21,null)),e.editorGutter=(0,y.registerColor)("editorGutter.background",{dark:y.editorBackground,light:y.editorBackground,hcDark:y.editorBackground,hcLight:y.editorBackground},S.localize(22,null)),e.editorUnnecessaryCodeBorder=(0,y.registerColor)("editorUnnecessaryCode.border",{dark:null,light:null,hcDark:k.Color.fromHex("#fff").transparent(.8),hcLight:y.contrastBorder},S.localize(23,null)),e.editorUnnecessaryCodeOpacity=(0,y.registerColor)("editorUnnecessaryCode.opacity",{dark:k.Color.fromHex("#000a"),light:k.Color.fromHex("#0007"),hcDark:null,hcLight:null},S.localize(24,null)),e.ghostTextBorder=(0,y.registerColor)("editorGhostText.border",{dark:null,light:null,hcDark:k.Color.fromHex("#fff").transparent(.8),hcLight:k.Color.fromHex("#292929").transparent(.8)},S.localize(25,null)),e.ghostTextForeground=(0,y.registerColor)("editorGhostText.foreground",{dark:k.Color.fromHex("#ffffff56"),light:k.Color.fromHex("#0007"),hcDark:null,hcLight:null},S.localize(26,null)),e.ghostTextBackground=(0,y.registerColor)("editorGhostText.background",{dark:null,light:null,hcDark:null,hcLight:null},S.localize(27,null));const b=new k.Color(new k.RGBA(0,122,204,.6));e.overviewRulerRangeHighlight=(0,y.registerColor)("editorOverviewRuler.rangeHighlightForeground",{dark:b,light:b,hcDark:b,hcLight:b},S.localize(28,null),!0),e.overviewRulerError=(0,y.registerColor)("editorOverviewRuler.errorForeground",{dark:new k.Color(new k.RGBA(255,18,18,.7)),light:new k.Color(new k.RGBA(255,18,18,.7)),hcDark:new k.Color(new k.RGBA(255,50,50,1)),hcLight:"#B5200D"},S.localize(29,null)),e.overviewRulerWarning=(0,y.registerColor)("editorOverviewRuler.warningForeground",{dark:y.editorWarningForeground,light:y.editorWarningForeground,hcDark:y.editorWarningBorder,hcLight:y.editorWarningBorder},S.localize(30,null)),e.overviewRulerInfo=(0,y.registerColor)("editorOverviewRuler.infoForeground",{dark:y.editorInfoForeground,light:y.editorInfoForeground,hcDark:y.editorInfoBorder,hcLight:y.editorInfoBorder},S.localize(31,null)),e.editorBracketHighlightingForeground1=(0,y.registerColor)("editorBracketHighlight.foreground1",{dark:"#FFD700",light:"#0431FAFF",hcDark:"#FFD700",hcLight:"#0431FAFF"},S.localize(32,null)),e.editorBracketHighlightingForeground2=(0,y.registerColor)("editorBracketHighlight.foreground2",{dark:"#DA70D6",light:"#319331FF",hcDark:"#DA70D6",hcLight:"#319331FF"},S.localize(33,null)),e.editorBracketHighlightingForeground3=(0,y.registerColor)("editorBracketHighlight.foreground3",{dark:"#179FFF",light:"#7B3814FF",hcDark:"#87CEFA",hcLight:"#7B3814FF"},S.localize(34,null)),e.editorBracketHighlightingForeground4=(0,y.registerColor)("editorBracketHighlight.foreground4",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(35,null)),e.editorBracketHighlightingForeground5=(0,y.registerColor)("editorBracketHighlight.foreground5",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(36,null)),e.editorBracketHighlightingForeground6=(0,y.registerColor)("editorBracketHighlight.foreground6",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(37,null)),e.editorBracketHighlightingUnexpectedBracketForeground=(0,y.registerColor)("editorBracketHighlight.unexpectedBracket.foreground",{dark:new k.Color(new k.RGBA(255,18,18,.8)),light:new k.Color(new k.RGBA(255,18,18,.8)),hcDark:new k.Color(new k.RGBA(255,50,50,1)),hcLight:""},S.localize(38,null)),e.editorBracketPairGuideBackground1=(0,y.registerColor)("editorBracketPairGuide.background1",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(39,null)),e.editorBracketPairGuideBackground2=(0,y.registerColor)("editorBracketPairGuide.background2",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(40,null)),e.editorBracketPairGuideBackground3=(0,y.registerColor)("editorBracketPairGuide.background3",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(41,null)),e.editorBracketPairGuideBackground4=(0,y.registerColor)("editorBracketPairGuide.background4",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(42,null)),e.editorBracketPairGuideBackground5=(0,y.registerColor)("editorBracketPairGuide.background5",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(43,null)),e.editorBracketPairGuideBackground6=(0,y.registerColor)("editorBracketPairGuide.background6",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(44,null)),e.editorBracketPairGuideActiveBackground1=(0,y.registerColor)("editorBracketPairGuide.activeBackground1",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(45,null)),e.editorBracketPairGuideActiveBackground2=(0,y.registerColor)("editorBracketPairGuide.activeBackground2",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(46,null)),e.editorBracketPairGuideActiveBackground3=(0,y.registerColor)("editorBracketPairGuide.activeBackground3",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(47,null)),e.editorBracketPairGuideActiveBackground4=(0,y.registerColor)("editorBracketPairGuide.activeBackground4",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(48,null)),e.editorBracketPairGuideActiveBackground5=(0,y.registerColor)("editorBracketPairGuide.activeBackground5",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(49,null)),e.editorBracketPairGuideActiveBackground6=(0,y.registerColor)("editorBracketPairGuide.activeBackground6",{dark:"#00000000",light:"#00000000",hcDark:"#00000000",hcLight:"#00000000"},S.localize(50,null)),e.editorUnicodeHighlightBorder=(0,y.registerColor)("editorUnicodeHighlight.border",{dark:"#BD9B03",light:"#CEA33D",hcDark:"#ff0000",hcLight:"#CEA33D"},S.localize(51,null)),e.editorUnicodeHighlightBackground=(0,y.registerColor)("editorUnicodeHighlight.background",{dark:"#bd9b0326",light:"#cea33d14",hcDark:"#00000000",hcLight:"#cea33d14"},S.localize(52,null)),(0,D.registerThemingParticipant)((C,g)=>{const m=C.getColor(y.editorBackground),n=C.getColor(e.editorLineHighlight),t=n&&!n.isTransparent()?n:m;t&&g.addRule(`.monaco-editor .inputarea.ime-input { background-color: ${t}; }`)})}),define(X[798],J([1,0,106,73,16,24,23,91,389]),function(j,e,S,k,y,D,w,b){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.CurrentLineMarginHighlightOverlay=e.CurrentLineHighlightOverlay=e.AbstractLineHighlightOverlay=void 0;class C extends S.DynamicViewOverlay{constructor(t){super(),this._context=t;const i=this._context.configuration.options,s=i.get(139);this._lineHeight=i.get(64),this._renderLineHighlight=i.get(91),this._renderLineHighlightOnlyWhenFocus=i.get(92),this._contentLeft=s.contentLeft,this._contentWidth=s.contentWidth,this._selectionIsEmpty=!0,this._focused=!1,this._cursorLineNumbers=[1],this._selections=[new w.Selection(1,1,1,1)],this._renderData=null,this._context.addEventHandler(this)}dispose(){this._context.removeEventHandler(this),super.dispose()}_readFromSelections(){let t=!1;const i=this._selections.map(a=>a.positionLineNumber);i.sort((a,c)=>a-c),y.equals(this._cursorLineNumbers,i)||(this._cursorLineNumbers=i,t=!0);const s=this._selections.every(a=>a.isEmpty());return this._selectionIsEmpty!==s&&(this._selectionIsEmpty=s,t=!0),t}onThemeChanged(t){return this._readFromSelections()}onConfigurationChanged(t){const i=this._context.configuration.options,s=i.get(139);return this._lineHeight=i.get(64),this._renderLineHighlight=i.get(91),this._renderLineHighlightOnlyWhenFocus=i.get(92),this._contentLeft=s.contentLeft,this._contentWidth=s.contentWidth,!0}onCursorStateChanged(t){return this._selections=t.selections,this._readFromSelections()}onFlushed(t){return!0}onLinesDeleted(t){return!0}onLinesInserted(t){return!0}onScrollChanged(t){return t.scrollWidthChanged||t.scrollTopChanged}onZonesChanged(t){return!0}onFocusChanged(t){return this._renderLineHighlightOnlyWhenFocus?(this._focused=t.isFocused,!0):!1}prepareRender(t){if(!this._shouldRenderThis()){this._renderData=null;return}const i=this._renderOne(t),s=t.visibleRange.startLineNumber,a=t.visibleRange.endLineNumber,c=this._cursorLineNumbers.length;let h=0;const o=[];for(let l=s;l<=a;l++){const r=l-s;for(;h<c&&this._cursorLineNumbers[h]<l;)h++;h<c&&this._cursorLineNumbers[h]===l?o[r]=i:o[r]=""}this._renderData=o}render(t,i){if(!this._renderData)return"";const s=i-t;return s>=this._renderData.length?"":this._renderData[s]}_shouldRenderInMargin(){return(this._renderLineHighlight==="gutter"||this._renderLineHighlight==="all")&&(!this._renderLineHighlightOnlyWhenFocus||this._focused)}_shouldRenderInContent(){return(this._renderLineHighlight==="line"||this._renderLineHighlight==="all")&&this._selectionIsEmpty&&(!this._renderLineHighlightOnlyWhenFocus||this._focused)}}e.AbstractLineHighlightOverlay=C;class g extends C{_renderOne(t){return`<div class="${"current-line"+(this._shouldRenderOther()?" current-line-both":"")}" style="width:${Math.max(t.scrollWidth,this._contentWidth)}px; height:${this._lineHeight}px;"></div>`}_shouldRenderThis(){return this._shouldRenderInContent()}_shouldRenderOther(){return this._shouldRenderInMargin()}}e.CurrentLineHighlightOverlay=g;class m extends C{_renderOne(t){return`<div class="${"current-line"+(this._shouldRenderInMargin()?" current-line-margin":"")+(this._shouldRenderOther()?" current-line-margin-both":"")}" style="width:${this._contentLeft}px; height:${this._lineHeight}px;"></div>`}_shouldRenderThis(){return!0}_shouldRenderOther(){return this._shouldRenderInContent()}}e.CurrentLineMarginHighlightOverlay=m,(0,D.registerThemingParticipant)((n,t)=>{const i=n.getColor(k.editorLineHighlight);if(i&&(t.addRule(`.monaco-editor .view-overlays .current-line { background-color: ${i}; }`),t.addRule(`.monaco-editor .margin-view-overlays .current-line-margin { background-color: ${i}; border: none; }`)),!i||i.isTransparent()||n.defines(k.editorLineHighlightBorder)){const s=n.getColor(k.editorLineHighlightBorder);s&&(t.addRule(`.monaco-editor .view-overlays .current-line { border: 2px solid ${s}; }`),t.addRule(`.monaco-editor .margin-view-overlays .current-line-margin { border: 2px solid ${s}; }`),(0,b.isHighContrast)(n.type)&&(t.addRule(".monaco-editor .view-overlays .current-line { border-width: 1px; }"),t.addRule(".monaco-editor .margin-view-overlays .current-line-margin { border-width: 1px; }")))}})}),define(X[799],J([1,0,106,73,24,13,16,18,266,196,392]),function(j,e,S,k,y,D,w,b,C,g){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.IndentGuidesOverlay=void 0;class m extends S.DynamicViewOverlay{constructor(i){super(),this._context=i,this._primaryPosition=null;const s=this._context.configuration.options,a=s.get(140),c=s.get(48);this._lineHeight=s.get(64),this._spaceWidth=c.spaceWidth,this._maxIndentLeft=a.wrappingColumn===-1?-1:a.wrappingColumn*c.typicalHalfwidthCharacterWidth,this._bracketPairGuideOptions=s.get(14),this._renderResult=null,this._context.addEventHandler(this)}dispose(){this._context.removeEventHandler(this),this._renderResult=null,super.dispose()}onConfigurationChanged(i){const s=this._context.configuration.options,a=s.get(140),c=s.get(48);return this._lineHeight=s.get(64),this._spaceWidth=c.spaceWidth,this._maxIndentLeft=a.wrappingColumn===-1?-1:a.wrappingColumn*c.typicalHalfwidthCharacterWidth,this._bracketPairGuideOptions=s.get(14),!0}onCursorStateChanged(i){var s;const c=i.selections[0].getPosition();return!((s=this._primaryPosition)===null||s===void 0)&&s.equals(c)?!1:(this._primaryPosition=c,!0)}onDecorationsChanged(i){return!0}onFlushed(i){return!0}onLinesChanged(i){return!0}onLinesDeleted(i){return!0}onLinesInserted(i){return!0}onScrollChanged(i){return i.scrollTopChanged}onZonesChanged(i){return!0}onLanguageConfigurationChanged(i){return!0}prepareRender(i){var s,a,c,h;if(!this._bracketPairGuideOptions.indentation&&this._bracketPairGuideOptions.bracketPairs===!1){this._renderResult=null;return}const o=i.visibleRange.startLineNumber,l=i.visibleRange.endLineNumber,r=i.scrollWidth,d=this._lineHeight,u=this._primaryPosition,_=this.getGuidesByLine(o,Math.min(l+1,this._context.viewModel.getLineCount()),u),f=[];for(let v=o;v<=l;v++){const p=v-o,L=_[p];let E="";const I=(a=(s=i.visibleRangeForPosition(new D.Position(v,1)))===null||s===void 0?void 0:s.left)!==null&&a!==void 0?a:0;for(const T of L){const F=T.column===-1?I+(T.visibleColumn-1)*this._spaceWidth:i.visibleRangeForPosition(new D.Position(v,T.column)).left;if(F>r||this._maxIndentLeft>0&&F>this._maxIndentLeft)break;const R=T.horizontalLine?T.horizontalLine.top?"horizontal-top":"horizontal-bottom":"vertical",M=T.horizontalLine?((h=(c=i.visibleRangeForPosition(new D.Position(v,T.horizontalLine.endColumn)))===null||c===void 0?void 0:c.left)!==null&&h!==void 0?h:F+this._spaceWidth)-F:this._spaceWidth;E+=`<div class="core-guide ${T.className} ${R}" style="left:${F}px;height:${d}px;width:${M}px"></div>`}f[p]=E}this._renderResult=f}getGuidesByLine(i,s,a){const c=this._bracketPairGuideOptions.bracketPairs!==!1?this._context.viewModel.getBracketGuidesInRangeByLine(i,s,a,{highlightActive:this._bracketPairGuideOptions.highlightActiveBracketPair,horizontalGuides:this._bracketPairGuideOptions.bracketPairsHorizontal===!0?g.HorizontalGuidesState.Enabled:this._bracketPairGuideOptions.bracketPairsHorizontal==="active"?g.HorizontalGuidesState.EnabledForActive:g.HorizontalGuidesState.Disabled,includeInactive:this._bracketPairGuideOptions.bracketPairs===!0}):null,h=this._bracketPairGuideOptions.indentation?this._context.viewModel.getLinesIndentGuides(i,s):null;let o=0,l=0,r=0;if(this._bracketPairGuideOptions.highlightActiveIndentation!==!1&&a){const _=this._context.viewModel.getActiveIndentGuide(a.lineNumber,i,s);o=_.startLineNumber,l=_.endLineNumber,r=_.indent}const{indentSize:d}=this._context.viewModel.model.getOptions(),u=[];for(let _=i;_<=s;_++){const f=new Array;u.push(f);const v=c?c[_-i]:[],p=new w.ArrayQueue(v),L=h?h[_-i]:0;for(let E=1;E<=L;E++){const I=(E-1)*d+1,T=(this._bracketPairGuideOptions.highlightActiveIndentation==="always"||v.length===0)&&o<=_&&_<=l&&E===r;f.push(...p.takeWhile(R=>R.visibleColumn<I)||[]);const F=p.peek();(!F||F.visibleColumn!==I||F.horizontalLine)&&f.push(new g.IndentGuide(I,-1,T?"core-guide-indent-active":"core-guide-indent",null,-1,-1))}f.push(...p.takeWhile(E=>!0)||[])}return u}render(i,s){if(!this._renderResult)return"";const a=s-i;return a<0||a>=this._renderResult.length?"":this._renderResult[a]}}e.IndentGuidesOverlay=m;function n(t){if(!(t&&t.isTransparent()))return t}(0,y.registerThemingParticipant)((t,i)=>{const s=[{bracketColor:k.editorBracketHighlightingForeground1,guideColor:k.editorBracketPairGuideBackground1,guideColorActive:k.editorBracketPairGuideActiveBackground1},{bracketColor:k.editorBracketHighlightingForeground2,guideColor:k.editorBracketPairGuideBackground2,guideColorActive:k.editorBracketPairGuideActiveBackground2},{bracketColor:k.editorBracketHighlightingForeground3,guideColor:k.editorBracketPairGuideBackground3,guideColorActive:k.editorBracketPairGuideActiveBackground3},{bracketColor:k.editorBracketHighlightingForeground4,guideColor:k.editorBracketPairGuideBackground4,guideColorActive:k.editorBracketPairGuideActiveBackground4},{bracketColor:k.editorBracketHighlightingForeground5,guideColor:k.editorBracketPairGuideBackground5,guideColorActive:k.editorBracketPairGuideActiveBackground5},{bracketColor:k.editorBracketHighlightingForeground6,guideColor:k.editorBracketPairGuideBackground6,guideColorActive:k.editorBracketPairGuideActiveBackground6}],a=new C.BracketPairGuidesClassNames,c=s.map(h=>{var o,l;const r=t.getColor(h.bracketColor),d=t.getColor(h.guideColor),u=t.getColor(h.guideColorActive),_=n((o=n(d))!==null&&o!==void 0?o:r?.transparent(.3)),f=n((l=n(u))!==null&&l!==void 0?l:r);if(!(!_||!f))return{guideColor:_,guideColorActive:f}}).filter(b.isDefined);if(c.length>0){for(let h=0;h<30;h++){const o=c[h%c.length];i.addRule(`.monaco-editor .${a.getInlineClassNameOfLevel(h).replace(/ /g,".")} { --guide-color: ${o.guideColor}; --guide-color-active: ${o.guideColorActive}; }`)}i.addRule(".monaco-editor .vertical { box-shadow: 1px 0 0 0 var(--guide-color) inset; }"),i.addRule(".monaco-editor .horizontal-top { border-top: 1px solid var(--guide-color); }"),i.addRule(".monaco-editor .horizontal-bottom { border-bottom: 1px solid var(--guide-color); }"),i.addRule(`.monaco-editor .vertical.${a.activeClassName} { box-shadow: 1px 0 0 0 var(--guide-color-active) inset; }`),i.addRule(`.monaco-editor .horizontal-top.${a.activeClassName} { border-top: 1px solid var(--guide-color-active); }`),i.addRule(`.monaco-editor .horizontal-bottom.${a.activeClassName} { border-bottom: 1px solid var(--guide-color-active); }`)}})}),define(X[330],J([1,0,17,106,13,24,73,393]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.LineNumbersOverlay=void 0;class b extends k.DynamicViewOverlay{constructor(g){super(),this._context=g,this._readConfig(),this._lastCursorModelPosition=new y.Position(1,1),this._renderResult=null,this._activeLineNumber=1,this._context.addEventHandler(this)}_readConfig(){const g=this._context.configuration.options;this._lineHeight=g.get(64);const m=g.get(65);this._renderLineNumbers=m.renderType,this._renderCustomLineNumbers=m.renderFn,this._renderFinalNewline=g.get(90);const n=g.get(139);this._lineNumbersLeft=n.lineNumbersLeft,this._lineNumbersWidth=n.lineNumbersWidth}dispose(){this._context.removeEventHandler(this),this._renderResult=null,super.dispose()}onConfigurationChanged(g){return this._readConfig(),!0}onCursorStateChanged(g){const m=g.selections[0].getPosition();this._lastCursorModelPosition=this._context.viewModel.coordinatesConverter.convertViewPositionToModelPosition(m);let n=!1;return this._activeLineNumber!==m.lineNumber&&(this._activeLineNumber=m.lineNumber,n=!0),(this._renderLineNumbers===2||this._renderLineNumbers===3)&&(n=!0),n}onFlushed(g){return!0}onLinesChanged(g){return!0}onLinesDeleted(g){return!0}onLinesInserted(g){return!0}onScrollChanged(g){return g.scrollTopChanged}onZonesChanged(g){return!0}_getLineRenderLineNumber(g){const m=this._context.viewModel.coordinatesConverter.convertViewPositionToModelPosition(new y.Position(g,1));if(m.column!==1)return"";const n=m.lineNumber;if(this._renderCustomLineNumbers)return this._renderCustomLineNumbers(n);if(this._renderLineNumbers===2){const t=Math.abs(this._lastCursorModelPosition.lineNumber-n);return t===0?'<span class="relative-current-line-number">'+n+"</span>":String(t)}return this._renderLineNumbers===3?this._lastCursorModelPosition.lineNumber===n||n%10===0?String(n):"":String(n)}prepareRender(g){if(this._renderLineNumbers===0){this._renderResult=null;return}const m=S.isLinux?this._lineHeight%2===0?" lh-even":" lh-odd":"",n=g.visibleRange.startLineNumber,t=g.visibleRange.endLineNumber,i=this._context.viewModel.getLineCount(),s=[];for(let a=n;a<=t;a++){const c=a-n,h=this._getLineRenderLineNumber(a);if(!h){s[c]="";continue}let o="";if(a===i&&this._context.viewModel.getLineLength(a)===0){if(this._renderFinalNewline==="off"){s[c]="";continue}this._renderFinalNewline==="dimmed"&&(o=" dimmed-line-number")}a===this._activeLineNumber&&(o=" active-line-number"),s[c]=`<div class="${b.CLASS_NAME}${m}${o}" style="left:${this._lineNumbersLeft}px;width:${this._lineNumbersWidth}px;">${h}</div>`}this._renderResult=s}render(g,m){if(!this._renderResult)return"";const n=m-g;return n<0||n>=this._renderResult.length?"":this._renderResult[n]}}b.CLASS_NAME="line-numbers",e.LineNumbersOverlay=b,(0,D.registerThemingParticipant)((C,g)=>{const m=C.getColor(w.editorLineNumbers),n=C.getColor(w.editorDimmedLineNumber);n?g.addRule(`.monaco-editor .line-numbers.dimmed-line-number { color: ${n}; }`):m&&g.addRule(`.monaco-editor .line-numbers.dimmed-line-number { color: ${m.transparent(.4)}; }`)})}),define(X[800],J([1,0,574,46,35,17,9,74,217,254,52,330,268,40,135,13,5,23,161,26,37,281,387]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a,c,h,o,l,r,d){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.TextAreaHandler=void 0;class u{constructor(L,E,I,T,F){this._context=L,this.modelLineNumber=E,this.distanceToModelLineStart=I,this.widthOfHiddenLineTextBefore=T,this.distanceToModelLineEnd=F,this._visibleTextAreaBrand=void 0,this.startPosition=null,this.endPosition=null,this.visibleTextareaStart=null,this.visibleTextareaEnd=null,this._previousPresentation=null}prepareRender(L){const E=new a.Position(this.modelLineNumber,this.distanceToModelLineStart+1),I=new a.Position(this.modelLineNumber,this._context.viewModel.model.getLineMaxColumn(this.modelLineNumber)-this.distanceToModelLineEnd);this.startPosition=this._context.viewModel.coordinatesConverter.convertModelPositionToViewPosition(E),this.endPosition=this._context.viewModel.coordinatesConverter.convertModelPositionToViewPosition(I),this.startPosition.lineNumber===this.endPosition.lineNumber?(this.visibleTextareaStart=L.visibleRangeForPosition(this.startPosition),this.visibleTextareaEnd=L.visibleRangeForPosition(this.endPosition)):(this.visibleTextareaStart=null,this.visibleTextareaEnd=null)}definePresentation(L){return this._previousPresentation||(L?this._previousPresentation=L:this._previousPresentation={foreground:1,italic:!1,bold:!1,underline:!1,strikethrough:!1}),this._previousPresentation}}const _=k.isFirefox;class f extends m.ViewPart{constructor(L,E,I){super(L),this._primaryCursorPosition=new a.Position(1,1),this._primaryCursorVisibleRange=null,this._viewController=E,this._visibleRangeProvider=I,this._scrollLeft=0,this._scrollTop=0;const T=this._context.configuration.options,F=T.get(139);this._setAccessibilityOptions(T),this._contentLeft=F.contentLeft,this._contentWidth=F.contentWidth,this._contentHeight=F.height,this._fontInfo=T.get(48),this._lineHeight=T.get(64),this._emptySelectionClipboard=T.get(35),this._copyWithSyntaxHighlighting=T.get(23),this._visibleTextArea=null,this._selections=[new h.Selection(1,1,1,1)],this._modelSelections=[new h.Selection(1,1,1,1)],this._lastRenderPosition=null,this.textArea=(0,y.createFastDomNode)(document.createElement("textarea")),m.PartFingerprints.write(this.textArea,6),this.textArea.setClassName(`inputarea ${o.MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`),this.textArea.setAttribute("wrap",this._textAreaWrapping&&!this._visibleTextArea?"on":"off");const{tabSize:R}=this._context.viewModel.model.getOptions();this.textArea.domNode.style.tabSize=`${R*this._fontInfo.spaceWidth}px`,this.textArea.setAttribute("autocorrect","off"),this.textArea.setAttribute("autocapitalize","off"),this.textArea.setAttribute("autocomplete","off"),this.textArea.setAttribute("spellcheck","false"),this.textArea.setAttribute("aria-label",this._getAriaLabel(T)),this.textArea.setAttribute("tabindex",String(T.get(119))),this.textArea.setAttribute("role","textbox"),this.textArea.setAttribute("aria-roledescription",S.localize(0,null)),this.textArea.setAttribute("aria-multiline","true"),this.textArea.setAttribute("aria-haspopup","false"),this.textArea.setAttribute("aria-autocomplete","both"),this._ensureReadOnlyAttribute(),this.textAreaCover=(0,y.createFastDomNode)(document.createElement("div")),this.textAreaCover.setPosition("absolute");const M={getLineCount:()=>this._context.viewModel.getLineCount(),getLineMaxColumn:P=>this._context.viewModel.getLineMaxColumn(P),getValueInRange:(P,x)=>this._context.viewModel.getValueInRange(P,x),getValueLengthInRange:(P,x)=>this._context.viewModel.getValueLengthInRange(P,x),modifyPosition:(P,x)=>this._context.viewModel.modifyPosition(P,x)},N={getDataToCopy:()=>{const P=this._context.viewModel.getPlainTextToCopy(this._modelSelections,this._emptySelectionClipboard,D.isWindows),x=this._context.viewModel.model.getEOL(),W=this._emptySelectionClipboard&&this._modelSelections.length===1&&this._modelSelections[0].isEmpty(),U=Array.isArray(P)?P:null,O=Array.isArray(P)?P.join(x):P;let $,Q=null;if(C.CopyOptions.forceCopyWithSyntaxHighlighting||this._copyWithSyntaxHighlighting&&O.length<65536){const se=this._context.viewModel.getRichTextToCopy(this._modelSelections,this._emptySelectionClipboard);se&&($=se.html,Q=se.mode)}return{isFromEmptySelection:W,multicursorText:U,text:O,html:$,mode:Q}},getScreenReaderContent:()=>{if(this._accessibilitySupport===1){const P=this._selections[0];if(D.isMacintosh&&P.isEmpty()){const W=P.getStartPosition();let U=this._getWordBeforePosition(W);if(U.length===0&&(U=this._getCharacterBeforePosition(W)),U.length>0)return new g.TextAreaState(U,U.length,U.length,c.Range.fromPositions(W),0)}const x=500;if(D.isMacintosh&&!P.isEmpty()&&M.getValueLengthInRange(P,0)<x){const W=M.getValueInRange(P,0);return new g.TextAreaState(W,0,W.length,P,0)}if(k.isSafari&&!P.isEmpty()){const W="vscode-placeholder";return new g.TextAreaState(W,0,W.length,null,void 0)}return g.TextAreaState.EMPTY}if(k.isAndroid){const P=this._selections[0];if(P.isEmpty()){const x=P.getStartPosition(),[W,U]=this._getAndroidWordAtPosition(x);if(W.length>0)return new g.TextAreaState(W,U,U,c.Range.fromPositions(x),0)}return g.TextAreaState.EMPTY}return g.PagedScreenReaderStrategy.fromEditorSelection(M,this._selections[0],this._accessibilityPageSize,this._accessibilitySupport===0)},deduceModelPosition:(P,x,W)=>this._context.viewModel.deduceModelPositionRelativeToViewPosition(P,x,W)},A=this._register(new C.TextAreaWrapper(this.textArea.domNode));this._textAreaInput=this._register(new C.TextAreaInput(N,A,D.OS,k)),this._register(this._textAreaInput.onKeyDown(P=>{this._viewController.emitKeyDown(P)})),this._register(this._textAreaInput.onKeyUp(P=>{this._viewController.emitKeyUp(P)})),this._register(this._textAreaInput.onPaste(P=>{let x=!1,W=null,U=null;P.metadata&&(x=this._emptySelectionClipboard&&!!P.metadata.isFromEmptySelection,W=typeof P.metadata.multicursorText<"u"?P.metadata.multicursorText:null,U=P.metadata.mode),this._viewController.paste(P.text,x,W,U)})),this._register(this._textAreaInput.onCut(()=>{this._viewController.cut()})),this._register(this._textAreaInput.onType(P=>{P.replacePrevCharCnt||P.replaceNextCharCnt||P.positionDelta?(g._debugComposition&&console.log(` => compositionType: <<${P.text}>>, ${P.replacePrevCharCnt}, ${P.replaceNextCharCnt}, ${P.positionDelta}`),this._viewController.compositionType(P.text,P.replacePrevCharCnt,P.replaceNextCharCnt,P.positionDelta)):(g._debugComposition&&console.log(` => type: <<${P.text}>>`),this._viewController.type(P.text))})),this._register(this._textAreaInput.onSelectionChangeRequest(P=>{this._viewController.setSelection(P)})),this._register(this._textAreaInput.onCompositionStart(P=>{const x=this.textArea.domNode,W=this._modelSelections[0],{distanceToModelLineStart:U,widthOfHiddenTextBefore:O}=(()=>{const Q=x.value.substring(0,Math.min(x.selectionStart,x.selectionEnd)),se=Q.lastIndexOf(`
 `),le=Q.substring(se+1),te=le.lastIndexOf("	"),re=le.length-te-1,H=W.getStartPosition(),B=Math.min(H.column-1,re),q=H.column-1-B,G=le.substring(0,le.length-B),{tabSize:Y}=this._context.viewModel.model.getOptions(),ne=v(G,this._fontInfo,Y);return{distanceToModelLineStart:q,widthOfHiddenTextBefore:ne}})(),{distanceToModelLineEnd:$}=(()=>{const Q=x.value.substring(Math.max(x.selectionStart,x.selectionEnd)),se=Q.indexOf(`
 `),le=se===-1?Q:Q.substring(0,se),te=le.indexOf("	"),re=te===-1?le.length:le.length-te-1,H=W.getEndPosition(),B=Math.min(this._context.viewModel.model.getLineMaxColumn(H.lineNumber)-H.column,re);return{distanceToModelLineEnd:this._context.viewModel.model.getLineMaxColumn(H.lineNumber)-H.column-B}})();this._context.viewModel.revealRange("keyboard",!0,c.Range.fromPositions(this._selections[0].getStartPosition()),0,1),this._visibleTextArea=new u(this._context,W.startLineNumber,U,O,$),this.textArea.setAttribute("wrap",this._textAreaWrapping&&!this._visibleTextArea?"on":"off"),this._visibleTextArea.prepareRender(this._visibleRangeProvider),this._render(),this.textArea.setClassName(`inputarea ${o.MOUSE_CURSOR_TEXT_CSS_CLASS_NAME} ime-input`),this._viewController.compositionStart(),this._context.viewModel.onCompositionStart()})),this._register(this._textAreaInput.onCompositionUpdate(P=>{!this._visibleTextArea||(this._visibleTextArea.prepareRender(this._visibleRangeProvider),this._render())})),this._register(this._textAreaInput.onCompositionEnd(()=>{this._visibleTextArea=null,this.textArea.setAttribute("wrap",this._textAreaWrapping&&!this._visibleTextArea?"on":"off"),this._render(),this.textArea.setClassName(`inputarea ${o.MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`),this._viewController.compositionEnd(),this._context.viewModel.onCompositionEnd()})),this._register(this._textAreaInput.onFocus(()=>{this._context.viewModel.setHasFocus(!0)})),this._register(this._textAreaInput.onBlur(()=>{this._context.viewModel.setHasFocus(!1)})),this._register(d.IME.onDidChange(()=>{this._ensureReadOnlyAttribute()}))}writeScreenReaderContent(L){this._textAreaInput.writeScreenReaderContent(L)}dispose(){super.dispose()}_getAndroidWordAtPosition(L){const E='`~!@#$%^&*()-=+[{]}\\|;:",.<>/?',I=this._context.viewModel.getLineContent(L.lineNumber),T=(0,s.getMapForWordSeparators)(E);let F=!0,R=L.column,M=!0,N=L.column,A=0;for(;A<50&&(F||M);){if(F&&R<=1&&(F=!1),F){const P=I.charCodeAt(R-2);T.get(P)!==0?F=!1:R--}if(M&&N>I.length&&(M=!1),M){const P=I.charCodeAt(N-1);T.get(P)!==0?M=!1:N++}A++}return[I.substring(R-1,N-1),L.column-R]}_getWordBeforePosition(L){const E=this._context.viewModel.getLineContent(L.lineNumber),I=(0,s.getMapForWordSeparators)(this._context.configuration.options.get(125));let T=L.column,F=0;for(;T>1;){const R=E.charCodeAt(T-2);if(I.get(R)!==0||F>50)return E.substring(T-1,L.column-1);F++,T--}return E.substring(0,L.column-1)}_getCharacterBeforePosition(L){if(L.column>1){const I=this._context.viewModel.getLineContent(L.lineNumber).charAt(L.column-2);if(!w.isHighSurrogate(I.charCodeAt(0)))return I}return""}_getAriaLabel(L){return L.get(2)===1?S.localize(1,null,D.isLinux?"Shift+Alt+F1":"Alt+F1"):L.get(4)}_setAccessibilityOptions(L){this._accessibilitySupport=L.get(2);const E=L.get(3);this._accessibilitySupport===2&&E===i.EditorOptions.accessibilityPageSize.defaultValue?this._accessibilityPageSize=500:this._accessibilityPageSize=E;const T=L.get(139).wrappingColumn;if(T!==-1&&this._accessibilitySupport!==1){const F=L.get(48);this._textAreaWrapping=!0,this._textAreaWidth=Math.round(T*F.typicalHalfwidthCharacterWidth)}else this._textAreaWrapping=!1,this._textAreaWidth=_?0:1}onConfigurationChanged(L){const E=this._context.configuration.options,I=E.get(139);this._setAccessibilityOptions(E),this._contentLeft=I.contentLeft,this._contentWidth=I.contentWidth,this._contentHeight=I.height,this._fontInfo=E.get(48),this._lineHeight=E.get(64),this._emptySelectionClipboard=E.get(35),this._copyWithSyntaxHighlighting=E.get(23),this.textArea.setAttribute("wrap",this._textAreaWrapping&&!this._visibleTextArea?"on":"off");const{tabSize:T}=this._context.viewModel.model.getOptions();return this.textArea.domNode.style.tabSize=`${T*this._fontInfo.spaceWidth}px`,this.textArea.setAttribute("aria-label",this._getAriaLabel(E)),this.textArea.setAttribute("tabindex",String(E.get(119))),(L.hasChanged(32)||L.hasChanged(87))&&this._ensureReadOnlyAttribute(),L.hasChanged(2)&&this._textAreaInput.writeScreenReaderContent("strategy changed"),!0}onCursorStateChanged(L){return this._selections=L.selections.slice(0),this._modelSelections=L.modelSelections.slice(0),this._textAreaInput.writeScreenReaderContent("selection changed"),!0}onDecorationsChanged(L){return!0}onFlushed(L){return!0}onLinesChanged(L){return!0}onLinesDeleted(L){return!0}onLinesInserted(L){return!0}onScrollChanged(L){return this._scrollLeft=L.scrollLeft,this._scrollTop=L.scrollTop,!0}onZonesChanged(L){return!0}isFocused(){return this._textAreaInput.isFocused()}focusTextArea(){this._textAreaInput.focusTextArea()}getLastRenderData(){return this._lastRenderPosition}setAriaOptions(L){L.activeDescendant?(this.textArea.setAttribute("aria-haspopup","true"),this.textArea.setAttribute("aria-autocomplete","list"),this.textArea.setAttribute("aria-activedescendant",L.activeDescendant)):(this.textArea.setAttribute("aria-haspopup","false"),this.textArea.setAttribute("aria-autocomplete","both"),this.textArea.removeAttribute("aria-activedescendant")),L.role&&this.textArea.setAttribute("role",L.role)}_ensureReadOnlyAttribute(){const L=this._context.configuration.options;!d.IME.enabled||L.get(32)&&L.get(87)?this.textArea.setAttribute("readonly","true"):this.textArea.removeAttribute("readonly")}prepareRender(L){var E;this._primaryCursorPosition=new a.Position(this._selections[0].positionLineNumber,this._selections[0].positionColumn),this._primaryCursorVisibleRange=L.visibleRangeForPosition(this._primaryCursorPosition),(E=this._visibleTextArea)===null||E===void 0||E.prepareRender(L)}render(L){this._textAreaInput.writeScreenReaderContent("render"),this._render()}_render(){var L;if(this._visibleTextArea){const T=this._visibleTextArea.visibleTextareaStart,F=this._visibleTextArea.visibleTextareaEnd,R=this._visibleTextArea.startPosition,M=this._visibleTextArea.endPosition;if(R&&M&&T&&F&&F.left>=this._scrollLeft&&T.left<=this._scrollLeft+this._contentWidth){const N=this._context.viewLayout.getVerticalOffsetForLineNumber(this._primaryCursorPosition.lineNumber)-this._scrollTop,A=this._newlinecount(this.textArea.domNode.value.substr(0,this.textArea.domNode.selectionStart));let P=this._visibleTextArea.widthOfHiddenLineTextBefore,x=this._contentLeft+T.left-this._scrollLeft,W=F.left-T.left+1;if(x<this._contentLeft){const le=this._contentLeft-x;x+=le,P+=le,W-=le}W>this._contentWidth&&(W=this._contentWidth);const U=this._context.viewModel.getViewLineData(R.lineNumber),O=U.tokens.findTokenIndexAtOffset(R.column-1),$=U.tokens.findTokenIndexAtOffset(M.column-1),Q=O===$,se=this._visibleTextArea.definePresentation(Q?U.tokens.getPresentation(O):null);this.textArea.domNode.scrollTop=A*this._lineHeight,this.textArea.domNode.scrollLeft=P,this._doRender({lastRenderPosition:null,top:N,left:x,width:W,height:this._lineHeight,useCover:!1,color:(l.TokenizationRegistry.getColorMap()||[])[se.foreground],italic:se.italic,bold:se.bold,underline:se.underline,strikethrough:se.strikethrough})}return}if(!this._primaryCursorVisibleRange){this._renderAtTopLeft();return}const E=this._contentLeft+this._primaryCursorVisibleRange.left-this._scrollLeft;if(E<this._contentLeft||E>this._contentLeft+this._contentWidth){this._renderAtTopLeft();return}const I=this._context.viewLayout.getVerticalOffsetForLineNumber(this._selections[0].positionLineNumber)-this._scrollTop;if(I<0||I>this._contentHeight){this._renderAtTopLeft();return}if(D.isMacintosh){this._doRender({lastRenderPosition:this._primaryCursorPosition,top:I,left:this._textAreaWrapping?this._contentLeft:E,width:this._textAreaWidth,height:this._lineHeight,useCover:!1}),this.textArea.domNode.scrollLeft=this._primaryCursorVisibleRange.left;const T=(L=this._textAreaInput.textAreaState.newlineCountBeforeSelection)!==null&&L!==void 0?L:this._newlinecount(this.textArea.domNode.value.substr(0,this.textArea.domNode.selectionStart));this.textArea.domNode.scrollTop=T*this._lineHeight;return}this._doRender({lastRenderPosition:this._primaryCursorPosition,top:I,left:this._textAreaWrapping?this._contentLeft:E,width:this._textAreaWidth,height:_?0:1,useCover:!1})}_newlinecount(L){let E=0,I=-1;do{if(I=L.indexOf(`
-`,I+1),I===-1)break;E++}while(!0);return E}_renderAtTopLeft(){this._doRender({lastRenderPosition:null,top:0,left:0,width:this._textAreaWidth,height:_?0:1,useCover:!0})}_doRender(L){this._lastRenderPosition=L.lastRenderPosition;const E=this.textArea,I=this.textAreaCover;(0,b.applyFontInfo)(E,this._fontInfo),E.setTop(L.top),E.setLeft(L.left),E.setWidth(L.width),E.setHeight(L.height),E.setColor(L.color?r.Color.Format.CSS.formatHex(L.color):""),E.setFontStyle(L.italic?"italic":""),L.bold&&E.setFontWeight("bold"),E.setTextDecoration(`${L.underline?" underline":""}${L.strikethrough?" line-through":""}`),I.setTop(L.useCover?L.top:0),I.setLeft(L.useCover?L.left:0),I.setWidth(L.useCover?L.width:0),I.setHeight(L.useCover?L.height:0);const T=this._context.configuration.options;T.get(55)?I.setClassName("monaco-editor-background textAreaCover "+t.Margin.OUTER_CLASS_NAME):T.get(65).renderType!==0?I.setClassName("monaco-editor-background textAreaCover "+n.LineNumbersOverlay.CLASS_NAME):I.setClassName("monaco-editor-background textAreaCover")}}e.TextAreaHandler=f;function v(p,L,E){if(p.length===0)return 0;const I=document.createElement("div");I.style.position="absolute",I.style.top="-50000px",I.style.width="50000px";const T=document.createElement("span");(0,b.applyFontInfo)(T,L),T.style.whiteSpace="pre",T.style.tabSize=`${E*L.spaceWidth}px`,T.append(p),I.appendChild(T),document.body.appendChild(I);const F=T.offsetWidth;return document.body.removeChild(I),F}}),define(X[801],J([1,0,35,37,52,13,26,73,82]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.DecorationsOverviewRuler=void 0;class g{constructor(t,i){const s=t.options;this.lineHeight=s.get(64),this.pixelRatio=s.get(137),this.overviewRulerLanes=s.get(80),this.renderBorder=s.get(79);const a=i.getColor(b.editorOverviewRulerBorder);this.borderColor=a?a.toString():null,this.hideCursor=s.get(57);const c=i.getColor(b.editorCursorForeground);this.cursorColor=c?c.transparent(.7).toString():null,this.themeType=i.type;const h=s.get(70),o=h.enabled,l=h.side,r=i.getColor(b.editorOverviewRulerBackground),d=w.TokenizationRegistry.getDefaultBackground();r?this.backgroundColor=r:o&&l==="right"?this.backgroundColor=d:this.backgroundColor=null;const _=s.get(139).overviewRuler;this.top=_.top,this.right=_.right,this.domWidth=_.width,this.domHeight=_.height,this.overviewRulerLanes===0?(this.canvasWidth=0,this.canvasHeight=0):(this.canvasWidth=this.domWidth*this.pixelRatio|0,this.canvasHeight=this.domHeight*this.pixelRatio|0);const[f,v]=this._initLanes(1,this.canvasWidth,this.overviewRulerLanes);this.x=f,this.w=v}_initLanes(t,i,s){const a=i-t;if(s>=3){const c=Math.floor(a/3),h=Math.floor(a/3),o=a-c-h,l=t,r=l+c,d=l+c+o;return[[0,l,r,l,d,l,r,l],[0,c,o,c+o,h,c+o+h,o+h,c+o+h]]}else if(s===2){const c=Math.floor(a/2),h=a-c,o=t,l=o+c;return[[0,o,o,o,l,o,o,o],[0,c,c,c,h,c+h,c+h,c+h]]}else{const c=t,h=a;return[[0,c,c,c,c,c,c,c],[0,h,h,h,h,h,h,h]]}}equals(t){return this.lineHeight===t.lineHeight&&this.pixelRatio===t.pixelRatio&&this.overviewRulerLanes===t.overviewRulerLanes&&this.renderBorder===t.renderBorder&&this.borderColor===t.borderColor&&this.hideCursor===t.hideCursor&&this.cursorColor===t.cursorColor&&this.themeType===t.themeType&&k.Color.equals(this.backgroundColor,t.backgroundColor)&&this.top===t.top&&this.right===t.right&&this.domWidth===t.domWidth&&this.domHeight===t.domHeight&&this.canvasWidth===t.canvasWidth&&this.canvasHeight===t.canvasHeight}}class m extends y.ViewPart{constructor(t){super(t),this._domNode=(0,S.createFastDomNode)(document.createElement("canvas")),this._domNode.setClassName("decorationsOverviewRuler"),this._domNode.setPosition("absolute"),this._domNode.setLayerHinting(!0),this._domNode.setContain("strict"),this._domNode.setAttribute("aria-hidden","true"),this._updateSettings(!1),this._tokensColorTrackerListener=w.TokenizationRegistry.onDidChange(i=>{i.changedColorMap&&this._updateSettings(!0)}),this._cursorPositions=[]}dispose(){super.dispose(),this._tokensColorTrackerListener.dispose()}_updateSettings(t){const i=new g(this._context.configuration,this._context.theme);return this._settings&&this._settings.equals(i)?!1:(this._settings=i,this._domNode.setTop(this._settings.top),this._domNode.setRight(this._settings.right),this._domNode.setWidth(this._settings.domWidth),this._domNode.setHeight(this._settings.domHeight),this._domNode.domNode.width=this._settings.canvasWidth,this._domNode.domNode.height=this._settings.canvasHeight,t&&this._render(),!0)}onConfigurationChanged(t){return this._updateSettings(!1)}onCursorStateChanged(t){this._cursorPositions=[];for(let i=0,s=t.selections.length;i<s;i++)this._cursorPositions[i]=t.selections[i].getPosition();return this._cursorPositions.sort(D.Position.compare),!0}onDecorationsChanged(t){return!!t.affectsOverviewRuler}onFlushed(t){return!0}onScrollChanged(t){return t.scrollHeightChanged}onZonesChanged(t){return!0}onThemeChanged(t){return this._updateSettings(!1)}getDomNode(){return this._domNode.domNode}prepareRender(t){}render(t){this._render()}_render(){const t=this._settings.backgroundColor;if(this._settings.overviewRulerLanes===0){this._domNode.setBackgroundColor(t?k.Color.Format.CSS.formatHexA(t):""),this._domNode.setDisplay("none");return}this._domNode.setDisplay("block");const i=this._settings.canvasWidth,s=this._settings.canvasHeight,a=this._settings.lineHeight,c=this._context.viewLayout,h=this._context.viewLayout.getScrollHeight(),o=s/h,l=this._context.viewModel.getAllOverviewRulerDecorations(this._context.theme),r=6*this._settings.pixelRatio|0,d=r/2|0,u=this._domNode.domNode.getContext("2d");t?t.isOpaque()?(u.fillStyle=k.Color.Format.CSS.formatHexA(t),u.fillRect(0,0,i,s)):(u.clearRect(0,0,i,s),u.fillStyle=k.Color.Format.CSS.formatHexA(t),u.fillRect(0,0,i,s)):u.clearRect(0,0,i,s);const _=this._settings.x,f=this._settings.w;l.sort(C.OverviewRulerDecorationsGroup.cmp);for(const v of l){const p=v.color,L=v.data;u.fillStyle=p;let E=0,I=0,T=0;for(let F=0,R=L.length/3;F<R;F++){const M=L[3*F],N=L[3*F+1],A=L[3*F+2];let P=c.getVerticalOffsetForLineNumber(N)*o|0,x=(c.getVerticalOffsetForLineNumber(A)+a)*o|0;if(x-P<r){let U=(P+x)/2|0;U<d?U=d:U+d>s&&(U=s-d),P=U-d,x=U+d}P>T+1||M!==E?(F!==0&&u.fillRect(_[E],I,f[E],T-I),E=M,I=P,T=x):x>T&&(T=x)}u.fillRect(_[E],I,f[E],T-I)}if(!this._settings.hideCursor&&this._settings.cursorColor){const v=2*this._settings.pixelRatio|0,p=v/2|0,L=this._settings.x[7],E=this._settings.w[7];u.fillStyle=this._settings.cursorColor;let I=-100,T=-100;for(let F=0,R=this._cursorPositions.length;F<R;F++){const M=this._cursorPositions[F];let N=c.getVerticalOffsetForLineNumber(M.lineNumber)*o|0;N<p?N=p:N+p>s&&(N=s-p);const A=N-p,P=A+v;A>T+1?(F!==0&&u.fillRect(L,I,E,T-I),I=A,T=P):P>T&&(T=P)}u.fillRect(L,I,E,T-I)}this._settings.renderBorder&&this._settings.borderColor&&this._settings.overviewRulerLanes>0&&(u.beginPath(),u.lineWidth=1,u.strokeStyle=this._settings.borderColor,u.moveTo(0,0),u.lineTo(0,s),u.stroke(),u.moveTo(0,0),u.lineTo(i,0),u.stroke())}}e.DecorationsOverviewRuler=m}),define(X[802],J([1,0,35,12,52,584,40,73,24,91,403]),function(j,e,S,k,y,D,w,b,C,g){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ViewCursors=void 0;class m extends y.ViewPart{constructor(t){super(t);const i=this._context.configuration.options;this._readOnly=i.get(87),this._cursorBlinking=i.get(24),this._cursorStyle=i.get(26),this._cursorSmoothCaretAnimation=i.get(25),this._selectionIsEmpty=!0,this._isComposingInput=!1,this._isVisible=!1,this._primaryCursor=new D.ViewCursor(this._context),this._secondaryCursors=[],this._renderData=[],this._domNode=(0,S.createFastDomNode)(document.createElement("div")),this._domNode.setAttribute("role","presentation"),this._domNode.setAttribute("aria-hidden","true"),this._updateDomClassName(),this._domNode.appendChild(this._primaryCursor.getDomNode()),this._startCursorBlinkAnimation=new k.TimeoutTimer,this._cursorFlatBlinkInterval=new k.IntervalTimer,this._blinkingEnabled=!1,this._editorHasFocus=!1,this._updateBlinking()}dispose(){super.dispose(),this._startCursorBlinkAnimation.dispose(),this._cursorFlatBlinkInterval.dispose()}getDomNode(){return this._domNode}onCompositionStart(t){return this._isComposingInput=!0,this._updateBlinking(),!0}onCompositionEnd(t){return this._isComposingInput=!1,this._updateBlinking(),!0}onConfigurationChanged(t){const i=this._context.configuration.options;this._readOnly=i.get(87),this._cursorBlinking=i.get(24),this._cursorStyle=i.get(26),this._cursorSmoothCaretAnimation=i.get(25),this._updateBlinking(),this._updateDomClassName(),this._primaryCursor.onConfigurationChanged(t);for(let s=0,a=this._secondaryCursors.length;s<a;s++)this._secondaryCursors[s].onConfigurationChanged(t);return!0}_onCursorPositionChanged(t,i,s){const a=this._secondaryCursors.length!==i.length||this._cursorSmoothCaretAnimation==="explicit"&&s!==3;if(this._primaryCursor.onCursorPositionChanged(t,a),this._updateBlinking(),this._secondaryCursors.length<i.length){const c=i.length-this._secondaryCursors.length;for(let h=0;h<c;h++){const o=new D.ViewCursor(this._context);this._domNode.domNode.insertBefore(o.getDomNode().domNode,this._primaryCursor.getDomNode().domNode.nextSibling),this._secondaryCursors.push(o)}}else if(this._secondaryCursors.length>i.length){const c=this._secondaryCursors.length-i.length;for(let h=0;h<c;h++)this._domNode.removeChild(this._secondaryCursors[0].getDomNode()),this._secondaryCursors.splice(0,1)}for(let c=0;c<i.length;c++)this._secondaryCursors[c].onCursorPositionChanged(i[c],a)}onCursorStateChanged(t){const i=[];for(let a=0,c=t.selections.length;a<c;a++)i[a]=t.selections[a].getPosition();this._onCursorPositionChanged(i[0],i.slice(1),t.reason);const s=t.selections[0].isEmpty();return this._selectionIsEmpty!==s&&(this._selectionIsEmpty=s,this._updateDomClassName()),!0}onDecorationsChanged(t){return!0}onFlushed(t){return!0}onFocusChanged(t){return this._editorHasFocus=t.isFocused,this._updateBlinking(),!1}onLinesChanged(t){return!0}onLinesDeleted(t){return!0}onLinesInserted(t){return!0}onScrollChanged(t){return!0}onTokensChanged(t){const i=s=>{for(let a=0,c=t.ranges.length;a<c;a++)if(t.ranges[a].fromLineNumber<=s.lineNumber&&s.lineNumber<=t.ranges[a].toLineNumber)return!0;return!1};if(i(this._primaryCursor.getPosition()))return!0;for(const s of this._secondaryCursors)if(i(s.getPosition()))return!0;return!1}onZonesChanged(t){return!0}_getCursorBlinking(){return this._isComposingInput||!this._editorHasFocus?0:this._readOnly?5:this._cursorBlinking}_updateBlinking(){this._startCursorBlinkAnimation.cancel(),this._cursorFlatBlinkInterval.cancel();const t=this._getCursorBlinking(),i=t===0,s=t===5;i?this._hide():this._show(),this._blinkingEnabled=!1,this._updateDomClassName(),!i&&!s&&(t===1?this._cursorFlatBlinkInterval.cancelAndSet(()=>{this._isVisible?this._hide():this._show()},m.BLINK_INTERVAL):this._startCursorBlinkAnimation.setIfNotSet(()=>{this._blinkingEnabled=!0,this._updateDomClassName()},m.BLINK_INTERVAL))}_updateDomClassName(){this._domNode.setClassName(this._getClassName())}_getClassName(){let t="cursors-layer";switch(this._selectionIsEmpty||(t+=" has-selection"),this._cursorStyle){case w.TextEditorCursorStyle.Line:t+=" cursor-line-style";break;case w.TextEditorCursorStyle.Block:t+=" cursor-block-style";break;case w.TextEditorCursorStyle.Underline:t+=" cursor-underline-style";break;case w.TextEditorCursorStyle.LineThin:t+=" cursor-line-thin-style";break;case w.TextEditorCursorStyle.BlockOutline:t+=" cursor-block-outline-style";break;case w.TextEditorCursorStyle.UnderlineThin:t+=" cursor-underline-thin-style";break;default:t+=" cursor-line-style"}if(this._blinkingEnabled)switch(this._getCursorBlinking()){case 1:t+=" cursor-blink";break;case 2:t+=" cursor-smooth";break;case 3:t+=" cursor-phase";break;case 4:t+=" cursor-expand";break;case 5:t+=" cursor-solid";break;default:t+=" cursor-solid"}else t+=" cursor-solid";return(this._cursorSmoothCaretAnimation==="on"||this._cursorSmoothCaretAnimation==="explicit")&&(t+=" cursor-smooth-caret-animation"),t}_show(){this._primaryCursor.show();for(let t=0,i=this._secondaryCursors.length;t<i;t++)this._secondaryCursors[t].show();this._isVisible=!0}_hide(){this._primaryCursor.hide();for(let t=0,i=this._secondaryCursors.length;t<i;t++)this._secondaryCursors[t].hide();this._isVisible=!1}prepareRender(t){this._primaryCursor.prepareRender(t);for(let i=0,s=this._secondaryCursors.length;i<s;i++)this._secondaryCursors[i].prepareRender(t)}render(t){const i=[];let s=0;const a=this._primaryCursor.render(t);a&&(i[s++]=a);for(let c=0,h=this._secondaryCursors.length;c<h;c++){const o=this._secondaryCursors[c].render(t);o&&(i[s++]=o)}this._renderData=i}getLastRenderData(){return this._renderData}}m.BLINK_INTERVAL=500,e.ViewCursors=m,(0,C.registerThemingParticipant)((n,t)=>{const i=n.getColor(b.editorCursorForeground);if(i){let s=n.getColor(b.editorCursorBackground);s||(s=i.opposite()),t.addRule(`.monaco-editor .cursors-layer .cursor { background-color: ${i}; border-color: ${i}; color: ${s}; }`),(0,g.isHighContrast)(n.type)&&t.addRule(`.monaco-editor .cursors-layer.has-selection .cursor { border-left: 1px solid ${s}; border-right: 1px solid ${s}; }`)}})}),define(X[803],J([1,0,106,9,109,13,73,404]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.WhitespaceOverlay=void 0;class b extends S.DynamicViewOverlay{constructor(m){super(),this._context=m,this._options=new C(this._context.configuration),this._selection=[],this._renderResult=null,this._context.addEventHandler(this)}dispose(){this._context.removeEventHandler(this),this._renderResult=null,super.dispose()}onConfigurationChanged(m){const n=new C(this._context.configuration);return this._options.equals(n)?m.hasChanged(139):(this._options=n,!0)}onCursorStateChanged(m){return this._selection=m.selections,this._options.renderWhitespace==="selection"}onDecorationsChanged(m){return!0}onFlushed(m){return!0}onLinesChanged(m){return!0}onLinesDeleted(m){return!0}onLinesInserted(m){return!0}onScrollChanged(m){return m.scrollTopChanged}onZonesChanged(m){return!0}prepareRender(m){if(this._options.renderWhitespace==="none"){this._renderResult=null;return}const n=m.visibleRange.startLineNumber,i=m.visibleRange.endLineNumber-n+1,s=new Array(i);for(let c=0;c<i;c++)s[c]=!0;const a=this._context.viewModel.getMinimapLinesRenderingData(m.viewportData.startLineNumber,m.viewportData.endLineNumber,s);this._renderResult=[];for(let c=m.viewportData.startLineNumber;c<=m.viewportData.endLineNumber;c++){const h=c-m.viewportData.startLineNumber,o=a.data[h];let l=null;if(this._options.renderWhitespace==="selection"){const r=this._selection;for(const d of r){if(d.endLineNumber<c||d.startLineNumber>c)continue;const u=d.startLineNumber===c?d.startColumn:o.minColumn,_=d.endLineNumber===c?d.endColumn:o.maxColumn;u<_&&(l||(l=[]),l.push(new y.LineRange(u-1,_-1)))}}this._renderResult[h]=this._applyRenderWhitespace(m,c,l,o)}}_applyRenderWhitespace(m,n,t,i){if(this._options.renderWhitespace==="selection"&&!t||this._options.renderWhitespace==="trailing"&&i.continuesWithWrappedLine)return"";const s=this._context.theme.getColor(w.editorWhitespaces),a=this._options.renderWithSVG,c=i.content,h=this._options.stopRenderingLineAfter===-1?c.length:Math.min(this._options.stopRenderingLineAfter,c.length),o=i.continuesWithWrappedLine,l=i.minColumn-1,r=this._options.renderWhitespace==="boundary",d=this._options.renderWhitespace==="trailing",u=this._options.lineHeight,_=this._options.middotWidth,f=this._options.wsmiddotWidth,v=this._options.spaceWidth,p=Math.abs(f-v),L=Math.abs(_-v),E=p<L?11825:183,I=this._options.canUseHalfwidthRightwardsArrow;let T="",F=!1,R=k.firstNonWhitespaceIndex(c),M;R===-1?(F=!0,R=h,M=h):M=k.lastNonWhitespaceIndex(c);let N=0,A=t&&t[N],P=0;for(let x=l;x<h;x++){const W=c.charCodeAt(x);if(A&&x>=A.endOffset&&(N++,A=t&&t[N]),W!==9&&W!==32||d&&!F&&x<=M)continue;if(r&&x>=R&&x<=M&&W===32){const O=x-1>=0?c.charCodeAt(x-1):0,$=x+1<h?c.charCodeAt(x+1):0;if(O!==32&&$!==32)continue}if(r&&o&&x===h-1){const O=x-1>=0?c.charCodeAt(x-1):0;if(W===32&&O!==32&&O!==9)continue}if(t&&(!A||A.startOffset>x||A.endOffset<=x))continue;const U=m.visibleRangeForPosition(new D.Position(n,x+1));!U||(a?(P=Math.max(P,U.left),W===9?T+=this._renderArrow(u,v,U.left):T+=`<circle cx="${(U.left+v/2).toFixed(2)}" cy="${(u/2).toFixed(2)}" r="${(v/7).toFixed(2)}" />`):W===9?T+=`<div class="mwh" style="left:${U.left}px;height:${u}px;">${I?String.fromCharCode(65515):String.fromCharCode(8594)}</div>`:T+=`<div class="mwh" style="left:${U.left}px;height:${u}px;">${String.fromCharCode(E)}</div>`)}return a?(P=Math.round(P+v),`<svg style="position:absolute;width:${P}px;height:${u}px" viewBox="0 0 ${P} ${u}" xmlns="http://www.w3.org/2000/svg" fill="${s}">`+T+"</svg>"):T}_renderArrow(m,n,t){const i=n/7,s=n,a=m/2,c=t,h={x:0,y:i/2},o={x:100/125*s,y:h.y},l={x:o.x-.2*o.x,y:o.y+.2*o.x},r={x:l.x+.1*o.x,y:l.y+.1*o.x},d={x:r.x+.35*o.x,y:r.y-.35*o.x},u={x:d.x,y:-d.y},_={x:r.x,y:-r.y},f={x:l.x,y:-l.y},v={x:o.x,y:-o.y},p={x:h.x,y:-h.y};return`<path d="M ${[h,o,l,r,d,u,_,f,v,p].map(I=>`${(c+I.x).toFixed(2)} ${(a+I.y).toFixed(2)}`).join(" L ")}" />`}render(m,n){if(!this._renderResult)return"";const t=n-m;return t<0||t>=this._renderResult.length?"":this._renderResult[t]}}e.WhitespaceOverlay=b;class C{constructor(m){const n=m.options,t=n.get(48),i=n.get(36);i==="off"?(this.renderWhitespace="none",this.renderWithSVG=!1):i==="svg"?(this.renderWhitespace=n.get(94),this.renderWithSVG=!0):(this.renderWhitespace=n.get(94),this.renderWithSVG=!1),this.spaceWidth=t.spaceWidth,this.middotWidth=t.middotWidth,this.wsmiddotWidth=t.wsmiddotWidth,this.canUseHalfwidthRightwardsArrow=t.canUseHalfwidthRightwardsArrow,this.lineHeight=n.get(64),this.stopRenderingLineAfter=n.get(112)}equals(m){return this.renderWhitespace===m.renderWhitespace&&this.renderWithSVG===m.renderWithSVG&&this.spaceWidth===m.spaceWidth&&this.middotWidth===m.middotWidth&&this.wsmiddotWidth===m.wsmiddotWidth&&this.canUseHalfwidthRightwardsArrow===m.canUseHalfwidthRightwardsArrow&&this.lineHeight===m.lineHeight&&this.stopRenderingLineAfter===m.stopRenderingLineAfter}}}),define(X[804],J([1,0,7,23,35,11,793,800,745,252,558,52,555,798,491,796,197,799,330,794,492,268,493,777,494,801,503,495,496,797,802,497,13,134,504,500,137,24,329,490,242,803]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a,c,h,o,l,r,d,u,_,f,v,p,L,E,I,T,F,R,M,N,A,P,x,W,U,O,$){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.View=void 0;class Q extends P.ViewEventHandler{constructor(te,re,H,B,q,G){super(),this._selections=[new k.Selection(1,1,1,1)],this._renderAnimationFrame=null;const Y=new C.ViewController(re,B,q,te);this._context=new N.ViewContext(re,H,B),this._context.addEventHandler(this),this._viewParts=[],this._textAreaHandler=new b.TextAreaHandler(this._context,Y,this._createTextAreaHandlerHelper()),this._viewParts.push(this._textAreaHandler),this._linesContent=(0,y.createFastDomNode)(document.createElement("div")),this._linesContent.setClassName("lines-content monaco-editor-background"),this._linesContent.setPosition("absolute"),this.domNode=(0,y.createFastDomNode)(document.createElement("div")),this.domNode.setClassName(this._getEditorClassName()),this.domNode.setAttribute("role","code"),this._overflowGuardContainer=(0,y.createFastDomNode)(document.createElement("div")),n.PartFingerprints.write(this._overflowGuardContainer,3),this._overflowGuardContainer.setClassName("overflow-guard"),this._scrollbar=new a.EditorScrollbar(this._context,this._linesContent,this.domNode,this._overflowGuardContainer),this._viewParts.push(this._scrollbar),this._viewLines=new l.ViewLines(this._context,this._linesContent),this._viewZones=new F.ViewZones(this._context),this._viewParts.push(this._viewZones);const ne=new v.DecorationsOverviewRuler(this._context);this._viewParts.push(ne);const de=new E.ScrollDecorationViewPart(this._context);this._viewParts.push(de);const he=new m.ContentViewOverlays(this._context);this._viewParts.push(he),he.addDynamicOverlay(new i.CurrentLineHighlightOverlay(this._context)),he.addDynamicOverlay(new I.SelectionsOverlay(this._context)),he.addDynamicOverlay(new h.IndentGuidesOverlay(this._context)),he.addDynamicOverlay(new s.DecorationsOverlay(this._context)),he.addDynamicOverlay(new $.WhitespaceOverlay(this._context));const oe=new m.MarginViewOverlays(this._context);this._viewParts.push(oe),oe.addDynamicOverlay(new i.CurrentLineMarginHighlightOverlay(this._context)),oe.addDynamicOverlay(new c.GlyphMarginOverlay(this._context)),oe.addDynamicOverlay(new u.MarginViewLineDecorationsOverlay(this._context)),oe.addDynamicOverlay(new r.LinesDecorationsOverlay(this._context)),oe.addDynamicOverlay(new o.LineNumbersOverlay(this._context));const ce=new d.Margin(this._context);ce.getDomNode().appendChild(this._viewZones.marginDomNode),ce.getDomNode().appendChild(oe.getDomNode()),this._viewParts.push(ce),this._contentWidgets=new t.ViewContentWidgets(this._context,this.domNode),this._viewParts.push(this._contentWidgets),this._viewCursors=new T.ViewCursors(this._context),this._viewParts.push(this._viewCursors),this._overlayWidgets=new f.ViewOverlayWidgets(this._context),this._viewParts.push(this._overlayWidgets);const z=new L.Rulers(this._context);this._viewParts.push(z);const V=new U.BlockDecorations(this._context);this._viewParts.push(V);const K=new _.Minimap(this._context);if(this._viewParts.push(K),ne){const ie=this._scrollbar.getOverviewRulerLayoutInfo();ie.parent.insertBefore(ne.getDomNode(),ie.insertBefore)}this._linesContent.appendChild(he.getDomNode()),this._linesContent.appendChild(z.domNode),this._linesContent.appendChild(this._viewZones.domNode),this._linesContent.appendChild(this._viewLines.getDomNode()),this._linesContent.appendChild(this._contentWidgets.domNode),this._linesContent.appendChild(this._viewCursors.getDomNode()),this._overflowGuardContainer.appendChild(ce.getDomNode()),this._overflowGuardContainer.appendChild(this._scrollbar.getDomNode()),this._overflowGuardContainer.appendChild(de.getDomNode()),this._overflowGuardContainer.appendChild(this._textAreaHandler.textArea),this._overflowGuardContainer.appendChild(this._textAreaHandler.textAreaCover),this._overflowGuardContainer.appendChild(this._overlayWidgets.getDomNode()),this._overflowGuardContainer.appendChild(K.getDomNode()),this._overflowGuardContainer.appendChild(V.domNode),this.domNode.appendChild(this._overflowGuardContainer),G?G.appendChild(this._contentWidgets.overflowingContentWidgetsDomNode.domNode):this.domNode.appendChild(this._contentWidgets.overflowingContentWidgetsDomNode),this._applyLayout(),this._pointerHandler=this._register(new w.PointerHandler(this._context,Y,this._createPointerHandlerHelper()))}_flushAccumulatedAndRenderNow(){O.inputLatency.onRenderStart(),this._renderNow()}_createPointerHandlerHelper(){return{viewDomNode:this.domNode.domNode,linesContentDomNode:this._linesContent.domNode,viewLinesDomNode:this._viewLines.getDomNode().domNode,focusTextArea:()=>{this.focus()},dispatchTextAreaEvent:te=>{this._textAreaHandler.textArea.domNode.dispatchEvent(te)},getLastRenderData:()=>{const te=this._viewCursors.getLastRenderData()||[],re=this._textAreaHandler.getLastRenderData();return new W.PointerHandlerLastRenderData(te,re)},renderNow:()=>{this.render(!0,!1)},shouldSuppressMouseDownOnViewZone:te=>this._viewZones.shouldSuppressMouseDownOnViewZone(te),shouldSuppressMouseDownOnWidget:te=>this._contentWidgets.shouldSuppressMouseDownOnWidget(te),getPositionFromDOMInfo:(te,re)=>(this._flushAccumulatedAndRenderNow(),this._viewLines.getPositionFromDOMInfo(te,re)),visibleRangeForPosition:(te,re)=>(this._flushAccumulatedAndRenderNow(),this._viewLines.visibleRangeForPosition(new R.Position(te,re))),getLineWidth:te=>(this._flushAccumulatedAndRenderNow(),this._viewLines.getLineWidth(te))}}_createTextAreaHandlerHelper(){return{visibleRangeForPosition:te=>(this._flushAccumulatedAndRenderNow(),this._viewLines.visibleRangeForPosition(te))}}_applyLayout(){const re=this._context.configuration.options.get(139);this.domNode.setWidth(re.width),this.domNode.setHeight(re.height),this._overflowGuardContainer.setWidth(re.width),this._overflowGuardContainer.setHeight(re.height),this._linesContent.setWidth(1e6),this._linesContent.setHeight(1e6)}_getEditorClassName(){const te=this._textAreaHandler.isFocused()?" focused":"";return this._context.configuration.options.get(136)+" "+(0,x.getThemeTypeSelector)(this._context.theme.type)+te}handleEvents(te){super.handleEvents(te),this._scheduleRender()}onConfigurationChanged(te){return this.domNode.setClassName(this._getEditorClassName()),this._applyLayout(),!1}onCursorStateChanged(te){return this._selections=te.selections,!1}onFocusChanged(te){return this.domNode.setClassName(this._getEditorClassName()),!1}onThemeChanged(te){return this._context.theme.update(te.theme),this.domNode.setClassName(this._getEditorClassName()),!1}dispose(){this._renderAnimationFrame!==null&&(this._renderAnimationFrame.dispose(),this._renderAnimationFrame=null),this._contentWidgets.overflowingContentWidgetsDomNode.domNode.remove(),this._context.removeEventHandler(this),this._viewLines.dispose();for(const te of this._viewParts)te.dispose();super.dispose()}_scheduleRender(){this._renderAnimationFrame===null&&(this._renderAnimationFrame=S.runAtThisOrScheduleAtNextAnimationFrame(this._onRenderScheduled.bind(this),100))}_onRenderScheduled(){this._renderAnimationFrame=null,this._flushAccumulatedAndRenderNow()}_renderNow(){se(()=>this._actualRender())}_getViewPartsToRender(){const te=[];let re=0;for(const H of this._viewParts)H.shouldRender()&&(te[re++]=H);return te}_actualRender(){if(!S.isInDOM(this.domNode.domNode))return;let te=this._getViewPartsToRender();if(!this._viewLines.shouldRender()&&te.length===0)return;const re=this._context.viewLayout.getLinesViewportData();this._context.viewModel.setViewport(re.startLineNumber,re.endLineNumber,re.centeredLineNumber);const H=new A.ViewportData(this._selections,re,this._context.viewLayout.getWhitespaceViewportData(),this._context.viewModel);this._contentWidgets.shouldRender()&&this._contentWidgets.onBeforeRender(H),this._viewLines.shouldRender()&&(this._viewLines.renderText(H),this._viewLines.onDidRender(),te=this._getViewPartsToRender());const B=new M.RenderingContext(this._context.viewLayout,H,this._viewLines);for(const q of te)q.prepareRender(B);for(const q of te)q.render(B),q.onDidRender()}delegateVerticalScrollbarPointerDown(te){this._scrollbar.delegateVerticalScrollbarPointerDown(te)}delegateScrollFromMouseWheelEvent(te){this._scrollbar.delegateScrollFromMouseWheelEvent(te)}restoreState(te){this._context.viewModel.viewLayout.setScrollPosition({scrollTop:te.scrollTop,scrollLeft:te.scrollLeft},1),this._context.viewModel.visibleLinesStabilized()}getOffsetForColumn(te,re){const H=this._context.viewModel.model.validatePosition({lineNumber:te,column:re}),B=this._context.viewModel.coordinatesConverter.convertModelPositionToViewPosition(H);this._flushAccumulatedAndRenderNow();const q=this._viewLines.visibleRangeForPosition(new R.Position(B.lineNumber,B.column));return q?q.left:-1}getTargetAtClientPoint(te,re){const H=this._pointerHandler.getTargetAtClientPoint(te,re);return H?g.ViewUserInputEvents.convertViewToModelMouseTarget(H,this._context.viewModel.coordinatesConverter):null}createOverviewRuler(te){return new p.OverviewRuler(this._context,te)}change(te){this._viewZones.changeViewZones(te),this._scheduleRender()}render(te,re){if(re){this._viewLines.forceShouldRender();for(const H of this._viewParts)H.forceShouldRender()}te?this._flushAccumulatedAndRenderNow():this._scheduleRender()}writeScreenReaderContent(te){this._textAreaHandler.writeScreenReaderContent(te)}focus(){this._textAreaHandler.focusTextArea()}isFocused(){return this._textAreaHandler.isFocused()}setAriaOptions(te){this._textAreaHandler.setAriaOptions(te)}addContentWidget(te){this._contentWidgets.addWidget(te.widget),this.layoutContentWidget(te),this._scheduleRender()}layoutContentWidget(te){var re,H,B,q,G,Y,ne,de;this._contentWidgets.setWidgetPosition(te.widget,(H=(re=te.position)===null||re===void 0?void 0:re.position)!==null&&H!==void 0?H:null,(q=(B=te.position)===null||B===void 0?void 0:B.secondaryPosition)!==null&&q!==void 0?q:null,(Y=(G=te.position)===null||G===void 0?void 0:G.preference)!==null&&Y!==void 0?Y:null,(de=(ne=te.position)===null||ne===void 0?void 0:ne.positionAffinity)!==null&&de!==void 0?de:null),this._scheduleRender()}removeContentWidget(te){this._contentWidgets.removeWidget(te.widget),this._scheduleRender()}addOverlayWidget(te){this._overlayWidgets.addWidget(te.widget),this.layoutOverlayWidget(te),this._scheduleRender()}layoutOverlayWidget(te){const re=te.position?te.position.preference:null;this._overlayWidgets.setWidgetPosition(te.widget,re)&&this._scheduleRender()}removeOverlayWidget(te){this._overlayWidgets.removeWidget(te.widget),this._scheduleRender()}}e.View=Q;function se(le){try{return le()}catch(te){(0,D.onUnexpectedError)(te)}}}),define(X[805],J([1,0,6,2,5,73,24]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ColorizedBracketPairsDecorationProvider=void 0;class b extends k.Disposable{constructor(m){super(),this.textModel=m,this.colorProvider=new C,this.onDidChangeEmitter=new S.Emitter,this.onDidChange=this.onDidChangeEmitter.event,this.colorizationOptions=m.getOptions().bracketPairColorizationOptions,this._register(m.bracketPairs.onDidChange(n=>{this.onDidChangeEmitter.fire()}))}handleDidChangeOptions(m){this.colorizationOptions=this.textModel.getOptions().bracketPairColorizationOptions}getDecorationsInRange(m,n,t,i){return i?[]:n===void 0?[]:this.colorizationOptions.enabled?this.textModel.bracketPairs.getBracketsInRange(m,!0).map(a=>({id:`bracket${a.range.toString()}-${a.nestingLevel}`,options:{description:"BracketPairColorization",inlineClassName:this.colorProvider.getInlineClassName(a,this.colorizationOptions.independentColorPoolPerBracketType)},ownerId:0,range:a.range})).toArray():[]}getAllDecorations(m,n){return m===void 0?[]:this.colorizationOptions.enabled?this.getDecorationsInRange(new y.Range(1,1,this.textModel.getLineCount(),1),m,n):[]}}e.ColorizedBracketPairsDecorationProvider=b;class C{constructor(){this.unexpectedClosingBracketClassName="unexpected-closing-bracket"}getInlineClassName(m,n){return m.isInvalid?this.unexpectedClosingBracketClassName:this.getInlineClassNameOfLevel(n?m.nestingLevelOfEqualBracketType:m.nestingLevel)}getInlineClassNameOfLevel(m){return`bracket-highlighting-${m%30}`}}(0,w.registerThemingParticipant)((g,m)=>{const n=[D.editorBracketHighlightingForeground1,D.editorBracketHighlightingForeground2,D.editorBracketHighlightingForeground3,D.editorBracketHighlightingForeground4,D.editorBracketHighlightingForeground5,D.editorBracketHighlightingForeground6],t=new C;m.addRule(`.monaco-editor .${t.unexpectedClosingBracketClassName} { color: ${g.getColor(D.editorBracketHighlightingUnexpectedBracketForeground)}; }`);const i=n.map(s=>g.getColor(s)).filter(s=>!!s).filter(s=>!s.isTransparent());for(let s=0;s<30;s++){const a=i[s%i.length];m.addRule(`.monaco-editor .${t.getInlineClassNameOfLevel(s)} { color: ${a}; }`)}})}),define(X[806],J([1,0,89,2,48,24,73,53,5,49,6,31,55]),function(j,e,S,k,y,D,w,b,C,g,m,n,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MarkerDecorationsService=void 0;class i extends k.Disposable{constructor(c){super(),this.model=c,this._markersData=new Map,this._register((0,k.toDisposable)(()=>{this.model.deltaDecorations([...this._markersData.keys()],[]),this._markersData.clear()}))}update(c,h){const o=[...this._markersData.keys()];this._markersData.clear();const l=this.model.deltaDecorations(o,h);for(let r=0;r<l.length;r++)this._markersData.set(l[r],c[r]);return o.length!==0||l.length!==0}getMarker(c){return this._markersData.get(c.id)}}let s=class extends k.Disposable{constructor(c,h){super(),this._markerService=h,this._onDidChangeMarker=this._register(new m.Emitter),this._markerDecorations=new t.ResourceMap,c.getModels().forEach(o=>this._onModelAdded(o)),this._register(c.onModelAdded(this._onModelAdded,this)),this._register(c.onModelRemoved(this._onModelRemoved,this)),this._register(this._markerService.onMarkerChanged(this._handleMarkerChange,this))}dispose(){super.dispose(),this._markerDecorations.forEach(c=>c.dispose()),this._markerDecorations.clear()}getMarker(c,h){const o=this._markerDecorations.get(c);return o&&o.getMarker(h)||null}_handleMarkerChange(c){c.forEach(h=>{const o=this._markerDecorations.get(h);o&&this._updateDecorations(o)})}_onModelAdded(c){const h=new i(c);this._markerDecorations.set(c.uri,h),this._updateDecorations(h)}_onModelRemoved(c){var h;const o=this._markerDecorations.get(c.uri);o&&(o.dispose(),this._markerDecorations.delete(c.uri)),(c.uri.scheme===g.Schemas.inMemory||c.uri.scheme===g.Schemas.internal||c.uri.scheme===g.Schemas.vscode)&&((h=this._markerService)===null||h===void 0||h.read({resource:c.uri}).map(l=>l.owner).forEach(l=>this._markerService.remove(l,[c.uri])))}_updateDecorations(c){const h=this._markerService.read({resource:c.model.uri,take:500}),o=h.map(l=>({range:this._createDecorationRange(c.model,l),options:this._createDecorationOption(l)}));c.update(h,o)&&this._onDidChangeMarker.fire(c.model)}_createDecorationRange(c,h){let o=C.Range.lift(h);if(h.severity===S.MarkerSeverity.Hint&&!this._hasMarkerTag(h,1)&&!this._hasMarkerTag(h,2)&&(o=o.setEndPosition(o.startLineNumber,o.startColumn+2)),o=c.validateRange(o),o.isEmpty()){const l=c.getLineLastNonWhitespaceColumn(o.startLineNumber)||c.getLineMaxColumn(o.startLineNumber);if(l===1||o.endColumn>=l)return o;const r=c.getWordAtPosition(o.getStartPosition());r&&(o=new C.Range(o.startLineNumber,r.startColumn,o.endLineNumber,r.endColumn))}else if(h.endColumn===Number.MAX_VALUE&&h.startColumn===1&&o.startLineNumber===o.endLineNumber){const l=c.getLineFirstNonWhitespaceColumn(h.startLineNumber);l<o.endColumn&&(o=new C.Range(o.startLineNumber,l,o.endLineNumber,o.endColumn),h.startColumn=l)}return o}_createDecorationOption(c){let h,o,l,r,d;switch(c.severity){case S.MarkerSeverity.Hint:this._hasMarkerTag(c,2)?h=void 0:this._hasMarkerTag(c,1)?h="squiggly-unnecessary":h="squiggly-hint",l=0;break;case S.MarkerSeverity.Warning:h="squiggly-warning",o=(0,D.themeColorFromId)(w.overviewRulerWarning),l=20,d={color:(0,D.themeColorFromId)(n.minimapWarning),position:y.MinimapPosition.Inline};break;case S.MarkerSeverity.Info:h="squiggly-info",o=(0,D.themeColorFromId)(w.overviewRulerInfo),l=10;break;case S.MarkerSeverity.Error:default:h="squiggly-error",o=(0,D.themeColorFromId)(w.overviewRulerError),l=30,d={color:(0,D.themeColorFromId)(n.minimapError),position:y.MinimapPosition.Inline};break}return c.tags&&(c.tags.indexOf(1)!==-1&&(r="squiggly-inline-unnecessary"),c.tags.indexOf(2)!==-1&&(r="squiggly-inline-deprecated")),{description:"marker-decoration",stickiness:1,className:h,showIfCollapsed:!0,overviewRuler:{color:o,position:y.OverviewRulerLane.Right},minimap:d,zIndex:l,inlineClassName:r}}_hasMarkerTag(c,h){return c.tags?c.tags.indexOf(h)>=0:!1}};s=Ne([fe(0,b.IModelService),fe(1,S.IMarkerService)],s),e.MarkerDecorationsService=s}),define(X[237],J([1,0,119,24,62,488,38]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.toMultilineTokens2=e.SemanticTokensProviderStyling=void 0;let b=class{constructor(t,i,s,a){this._legend=t,this._themeService=i,this._languageService=s,this._logService=a,this._hasWarnedOverlappingTokens=!1,this._hasWarnedInvalidLengthTokens=!1,this._hasWarnedInvalidEditStart=!1,this._hashTable=new m}getMetadata(t,i,s){const a=this._languageService.languageIdCodec.encodeLanguageId(s),c=this._hashTable.get(t,i,a);let h;if(c)h=c.metadata,this._logService.getLevel()===y.LogLevel.Trace&&this._logService.trace(`SemanticTokensProviderStyling [CACHED] ${t} / ${i}: foreground ${S.TokenMetadata.getForeground(h)}, fontStyle ${S.TokenMetadata.getFontStyle(h).toString(2)}`);else{let o=this._legend.tokenTypes[t];const l=[];if(o){let r=i;for(let u=0;r>0&&u<this._legend.tokenModifiers.length;u++)r&1&&l.push(this._legend.tokenModifiers[u]),r=r>>1;r>0&&this._logService.getLevel()===y.LogLevel.Trace&&(this._logService.trace(`SemanticTokensProviderStyling: unknown token modifier index: ${i.toString(2)} for legend: ${JSON.stringify(this._legend.tokenModifiers)}`),l.push("not-in-legend"));const d=this._themeService.getColorTheme().getTokenStyleMetadata(o,l,s);typeof d>"u"?h=2147483647:(h=0,typeof d.italic<"u"&&(h|=(d.italic?1:0)<<11|1),typeof d.bold<"u"&&(h|=(d.bold?2:0)<<11|2),typeof d.underline<"u"&&(h|=(d.underline?4:0)<<11|4),typeof d.strikethrough<"u"&&(h|=(d.strikethrough?8:0)<<11|8),d.foreground&&(h|=d.foreground<<15|16),h===0&&(h=2147483647))}else this._logService.getLevel()===y.LogLevel.Trace&&this._logService.trace(`SemanticTokensProviderStyling: unknown token type index: ${t} for legend: ${JSON.stringify(this._legend.tokenTypes)}`),h=2147483647,o="not-in-legend";this._hashTable.add(t,i,a,h),this._logService.getLevel()===y.LogLevel.Trace&&this._logService.trace(`SemanticTokensProviderStyling ${t} (${o}) / ${i} (${l.join(" ")}): foreground ${S.TokenMetadata.getForeground(h)}, fontStyle ${S.TokenMetadata.getFontStyle(h).toString(2)}`)}return h}warnOverlappingSemanticTokens(t,i){this._hasWarnedOverlappingTokens||(this._hasWarnedOverlappingTokens=!0,console.warn(`Overlapping semantic tokens detected at lineNumber ${t}, column ${i}`))}warnInvalidLengthSemanticTokens(t,i){this._hasWarnedInvalidLengthTokens||(this._hasWarnedInvalidLengthTokens=!0,console.warn(`Semantic token with invalid length detected at lineNumber ${t}, column ${i}`))}warnInvalidEditStart(t,i,s,a,c){this._hasWarnedInvalidEditStart||(this._hasWarnedInvalidEditStart=!0,console.warn(`Invalid semantic tokens edit detected (previousResultId: ${t}, resultId: ${i}) at edit #${s}: The provided start offset ${a} is outside the previous data (length ${c}).`))}};b=Ne([fe(1,k.IThemeService),fe(2,w.ILanguageService),fe(3,y.ILogService)],b),e.SemanticTokensProviderStyling=b;function C(n,t,i){const s=n.data,a=n.data.length/5|0,c=Math.max(Math.ceil(a/1024),400),h=[];let o=0,l=1,r=0;for(;o<a;){const d=o;let u=Math.min(d+c,a);if(u<a){let I=u;for(;I-1>d&&s[5*I]===0;)I--;if(I-1===d){let T=u;for(;T+1<a&&s[5*T]===0;)T++;u=T}else u=I}let _=new Uint32Array((u-d)*4),f=0,v=0,p=0,L=0;for(;o<u;){const I=5*o,T=s[I],F=s[I+1],R=l+T|0,M=T===0?r+F|0:F,N=s[I+2],A=M+N|0,P=s[I+3],x=s[I+4];if(A<=M)t.warnInvalidLengthSemanticTokens(R,M+1);else if(p===R&&L>M)t.warnOverlappingSemanticTokens(R,M+1);else{const W=t.getMetadata(P,x,i);W!==2147483647&&(v===0&&(v=R),_[f]=R-v,_[f+1]=M,_[f+2]=A,_[f+3]=W,f+=4,p=R,L=A)}l=R,r=M,o++}f!==_.length&&(_=_.subarray(0,f));const E=D.SparseMultilineTokens.create(v,_);h.push(E)}return h}e.toMultilineTokens2=C;class g{constructor(t,i,s,a){this.tokenTypeIndex=t,this.tokenModifierSet=i,this.languageId=s,this.metadata=a,this.next=null}}class m{constructor(){this._elementsCount=0,this._currentLengthIndex=0,this._currentLength=m._SIZES[this._currentLengthIndex],this._growCount=Math.round(this._currentLengthIndex+1<m._SIZES.length?2/3*this._currentLength:0),this._elements=[],m._nullOutEntries(this._elements,this._currentLength)}static _nullOutEntries(t,i){for(let s=0;s<i;s++)t[s]=null}_hash2(t,i){return(t<<5)-t+i|0}_hashFunc(t,i,s){return this._hash2(this._hash2(t,i),s)%this._currentLength}get(t,i,s){const a=this._hashFunc(t,i,s);let c=this._elements[a];for(;c;){if(c.tokenTypeIndex===t&&c.tokenModifierSet===i&&c.languageId===s)return c;c=c.next}return null}add(t,i,s,a){if(this._elementsCount++,this._growCount!==0&&this._elementsCount>=this._growCount){const c=this._elements;this._currentLengthIndex++,this._currentLength=m._SIZES[this._currentLengthIndex],this._growCount=Math.round(this._currentLengthIndex+1<m._SIZES.length?2/3*this._currentLength:0),this._elements=[],m._nullOutEntries(this._elements,this._currentLength);for(const h of c){let o=h;for(;o;){const l=o.next;o.next=null,this._add(o),o=l}}}this._add(new g(t,i,s,a))}_add(t){const i=this._hashFunc(t.tokenTypeIndex,t.tokenModifierSet,t.languageId);t.next=this._elements[i],this._elements[i]=t}}m._SIZES=[3,7,13,31,61,127,251,509,1021,2039,4093,8191,16381,32749,65521,131071,262139,524287,1048573,2097143]}),define(X[807],J([1,0,2,38,24,62,237,225,51]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.SemanticTokensStylingService=void 0;let g=class extends S.Disposable{constructor(n,t,i){super(),this._themeService=n,this._logService=t,this._languageService=i,this._caches=new WeakMap,this._register(this._themeService.onDidColorThemeChange(()=>{this._caches=new WeakMap}))}getStyling(n){return this._caches.has(n)||this._caches.set(n,new w.SemanticTokensProviderStyling(n.getLegend(),this._themeService,this._languageService,this._logService)),this._caches.get(n)}};g=Ne([fe(0,y.IThemeService),fe(1,D.ILogService),fe(2,k.ILanguageService)],g),e.SemanticTokensStylingService=g,(0,C.registerSingleton)(b.ISemanticTokensStylingService,g,1)}),define(X[331],J([1,0,92,2,18,167,48,73,24]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.AbstractEditorNavigationQuickAccessProvider=void 0;class g{constructor(n){this.options=n,this.rangeHighlightDecorationId=void 0}provide(n,t){var i;const s=new k.DisposableStore;n.canAcceptInBackground=!!(!((i=this.options)===null||i===void 0)&&i.canAcceptInBackground),n.matchOnLabel=n.matchOnDescription=n.matchOnDetail=n.sortByLabel=!1;const a=s.add(new k.MutableDisposable);return a.value=this.doProvide(n,t),s.add(this.onDidActiveTextEditorControlChange(()=>{a.value=void 0,a.value=this.doProvide(n,t)})),s}doProvide(n,t){const i=new k.DisposableStore,s=this.activeTextEditorControl;if(s&&this.canProvideWithTextEditor(s)){const a={editor:s},c=(0,D.getCodeEditor)(s);if(c){let h=(0,y.withNullAsUndefined)(s.saveViewState());i.add(c.onDidChangeCursorPosition(()=>{h=(0,y.withNullAsUndefined)(s.saveViewState())})),a.restoreViewState=()=>{h&&s===this.activeTextEditorControl&&s.restoreViewState(h)},i.add((0,S.once)(t.onCancellationRequested)(()=>{var o;return(o=a.restoreViewState)===null||o===void 0?void 0:o.call(a)}))}i.add((0,k.toDisposable)(()=>this.clearDecorations(s))),i.add(this.provideWithTextEditor(a,n,t))}else i.add(this.provideWithoutTextEditor(n,t));return i}canProvideWithTextEditor(n){return!0}gotoLocation({editor:n},t){n.setSelection(t.range),n.revealRangeInCenter(t.range,0),t.preserveFocus||n.focus()}getModel(n){var t;return(0,D.isDiffEditor)(n)?(t=n.getModel())===null||t===void 0?void 0:t.modified:n.getModel()}addDecorations(n,t){n.changeDecorations(i=>{const s=[];this.rangeHighlightDecorationId&&(s.push(this.rangeHighlightDecorationId.overviewRulerDecorationId),s.push(this.rangeHighlightDecorationId.rangeHighlightId),this.rangeHighlightDecorationId=void 0);const a=[{range:t,options:{description:"quick-access-range-highlight",className:"rangeHighlight",isWholeLine:!0}},{range:t,options:{description:"quick-access-range-highlight-overview",overviewRuler:{color:(0,C.themeColorFromId)(b.overviewRulerRangeHighlight),position:w.OverviewRulerLane.Full}}}],[c,h]=i.deltaDecorations(s,a);this.rangeHighlightDecorationId={rangeHighlightId:c,overviewRulerDecorationId:h}})}clearDecorations(n){const t=this.rangeHighlightDecorationId;t&&(n.changeDecorations(i=>{i.deltaDecorations([t.overviewRulerDecorationId,t.rangeHighlightId],[])}),this.rangeHighlightDecorationId=void 0)}}e.AbstractEditorNavigationQuickAccessProvider=g}),define(X[808],J([1,0,2,167,331,645]),function(j,e,S,k,y,D){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.AbstractGotoLineQuickAccessProvider=void 0;class w extends y.AbstractEditorNavigationQuickAccessProvider{constructor(){super({canAcceptInBackground:!0})}provideWithoutTextEditor(C){const g=(0,D.localize)(0,null);return C.items=[{label:g}],C.ariaLabel=g,S.Disposable.None}provideWithTextEditor(C,g,m){const n=C.editor,t=new S.DisposableStore;t.add(g.onDidAccept(a=>{const[c]=g.selectedItems;if(c){if(!this.isValidLineNumber(n,c.lineNumber))return;this.gotoLocation(C,{range:this.toRange(c.lineNumber,c.column),keyMods:g.keyMods,preserveFocus:a.inBackground}),a.inBackground||g.hide()}}));const i=()=>{const a=this.parsePosition(n,g.value.trim().substr(w.PREFIX.length)),c=this.getPickLabel(n,a.lineNumber,a.column);if(g.items=[{lineNumber:a.lineNumber,column:a.column,label:c}],g.ariaLabel=c,!this.isValidLineNumber(n,a.lineNumber)){this.clearDecorations(n);return}const h=this.toRange(a.lineNumber,a.column);n.revealRangeInCenter(h,0),this.addDecorations(n,h)};i(),t.add(g.onDidChangeValue(()=>i()));const s=(0,k.getCodeEditor)(n);return s&&s.getOptions().get(65).renderType===2&&(s.updateOptions({lineNumbers:"on"}),t.add((0,S.toDisposable)(()=>s.updateOptions({lineNumbers:"relative"})))),t}toRange(C=1,g=1){return{startLineNumber:C,startColumn:g,endLineNumber:C,endColumn:g}}parsePosition(C,g){const m=g.split(/,|:|#/).map(t=>parseInt(t,10)).filter(t=>!isNaN(t)),n=this.lineCount(C)+1;return{lineNumber:m[0]>0?m[0]:n+m[0],column:m[1]}}getPickLabel(C,g,m){if(this.isValidLineNumber(C,g))return this.isValidColumn(C,g,m)?(0,D.localize)(1,null,g,m):(0,D.localize)(2,null,g);const n=C.getPosition()||{lineNumber:1,column:1},t=this.lineCount(C);return t>1?(0,D.localize)(3,null,n.lineNumber,n.column,t):(0,D.localize)(4,null,n.lineNumber,n.column)}isValidLineNumber(C,g){return!g||typeof g!="number"?!1:g>0&&g<=this.lineCount(C)}isValidColumn(C,g,m){if(!m||typeof m!="number")return!1;const n=this.getModel(C);if(!n)return!1;const t={lineNumber:g,column:m};return n.validatePosition(t).equals(t)}lineCount(C){var g,m;return(m=(g=this.getModel(C))===null||g===void 0?void 0:g.getLineCount())!==null&&m!==void 0?m:0}}w.PREFIX=":",e.AbstractGotoLineQuickAccessProvider=w}),define(X[809],J([1,0,12,21,29,32,533,2,9,5,26,179,331,646,19,16]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.AbstractGotoSymbolQuickAccessProvider=void 0;let c=class ui extends t.AbstractEditorNavigationQuickAccessProvider{constructor(r,d,u=Object.create(null)){super(u),this._languageFeaturesService=r,this._outlineModelService=d,this.options=u,this.options.canAcceptInBackground=!0}provideWithoutTextEditor(r){return this.provideLabelPick(r,(0,i.localize)(0,null)),b.Disposable.None}provideWithTextEditor(r,d,u){const _=r.editor,f=this.getModel(_);return f?this._languageFeaturesService.documentSymbolProvider.has(f)?this.doProvideWithEditorSymbols(r,f,d,u):this.doProvideWithoutEditorSymbols(r,f,d,u):b.Disposable.None}doProvideWithoutEditorSymbols(r,d,u,_){const f=new b.DisposableStore;return this.provideLabelPick(u,(0,i.localize)(1,null)),Ee(this,void 0,void 0,function*(){!(yield this.waitForLanguageSymbolRegistry(d,f))||_.isCancellationRequested||f.add(this.doProvideWithEditorSymbols(r,d,u,_))}),f}provideLabelPick(r,d){r.items=[{label:d,index:0,kind:14}],r.ariaLabel=d}waitForLanguageSymbolRegistry(r,d){return Ee(this,void 0,void 0,function*(){if(this._languageFeaturesService.documentSymbolProvider.has(r))return!0;const u=new S.DeferredPromise,_=d.add(this._languageFeaturesService.documentSymbolProvider.onDidChange(()=>{this._languageFeaturesService.documentSymbolProvider.has(r)&&(_.dispose(),u.complete(!0))}));return d.add((0,b.toDisposable)(()=>u.complete(!1))),u.p})}doProvideWithEditorSymbols(r,d,u,_){var f;const v=r.editor,p=new b.DisposableStore;p.add(u.onDidAccept(T=>{const[F]=u.selectedItems;F&&F.range&&(this.gotoLocation(r,{range:F.range.selection,keyMods:u.keyMods,preserveFocus:T.inBackground}),T.inBackground||u.hide())})),p.add(u.onDidTriggerItemButton(({item:T})=>{T&&T.range&&(this.gotoLocation(r,{range:T.range.selection,keyMods:u.keyMods,forceSideBySide:!0}),u.hide())}));const L=this.getDocumentSymbols(d,_);let E;const I=T=>Ee(this,void 0,void 0,function*(){E?.dispose(!0),u.busy=!1,E=new k.CancellationTokenSource(_),u.busy=!0;try{const F=(0,w.prepareQuery)(u.value.substr(ui.PREFIX.length).trim()),R=yield this.doGetSymbolPicks(L,F,void 0,E.token);if(_.isCancellationRequested)return;if(R.length>0){if(u.items=R,T&&F.original.length===0){const M=(0,a.findLast)(R,N=>Boolean(N.type!=="separator"&&N.range&&g.Range.containsPosition(N.range.decoration,T)));M&&(u.activeItems=[M])}}else F.original.length>0?this.provideLabelPick(u,(0,i.localize)(2,null)):this.provideLabelPick(u,(0,i.localize)(3,null))}finally{_.isCancellationRequested||(u.busy=!1)}});return p.add(u.onDidChangeValue(()=>I(void 0))),I((f=v.getSelection())===null||f===void 0?void 0:f.getPosition()),p.add(u.onDidChangeActive(()=>{const[T]=u.activeItems;T&&T.range&&(v.revealRangeInCenter(T.range.selection,0),this.addDecorations(v,T.range.decoration))})),p}doGetSymbolPicks(r,d,u,_){var f,v;return Ee(this,void 0,void 0,function*(){const p=yield r;if(_.isCancellationRequested)return[];const L=d.original.indexOf(ui.SCOPE_PREFIX)===0,E=L?1:0;let I,T;d.values&&d.values.length>1?(I=(0,w.pieceToQuery)(d.values[0]),T=(0,w.pieceToQuery)(d.values.slice(1))):I=d;let F;const R=(v=(f=this.options)===null||f===void 0?void 0:f.openSideBySideDirection)===null||v===void 0?void 0:v.call(f);R&&(F=[{iconClass:R==="right"?D.ThemeIcon.asClassName(y.Codicon.splitHorizontal):D.ThemeIcon.asClassName(y.Codicon.splitVertical),tooltip:R==="right"?(0,i.localize)(4,null):(0,i.localize)(5,null)}]);const M=[];for(let P=0;P<p.length;P++){const x=p[P],W=(0,C.trim)(x.name),U=`$(${m.SymbolKinds.toIcon(x.kind).id}) ${W}`,O=U.length-W.length;let $=x.containerName;u?.extraContainerLabel&&($?$=`${u.extraContainerLabel} \u2022 ${$}`:$=u.extraContainerLabel);let Q,se,le,te;if(d.original.length>E){let H=!1;if(I!==d&&([Q,se]=(0,w.scoreFuzzy2)(U,Object.assign(Object.assign({},d),{values:void 0}),E,O),typeof Q=="number"&&(H=!0)),typeof Q!="number"&&([Q,se]=(0,w.scoreFuzzy2)(U,I,E,O),typeof Q!="number"))continue;if(!H&&T){if($&&T.original.length>0&&([le,te]=(0,w.scoreFuzzy2)($,T)),typeof le!="number")continue;typeof Q=="number"&&(Q+=le)}}const re=x.tags&&x.tags.indexOf(1)>=0;M.push({index:P,kind:x.kind,score:Q,label:U,ariaLabel:W,description:$,highlights:re?void 0:{label:se,description:te},range:{selection:g.Range.collapseToStart(x.selectionRange),decoration:x.range},strikethrough:re,buttons:F})}const N=M.sort((P,x)=>L?this.compareByKindAndScore(P,x):this.compareByScore(P,x));let A=[];if(L){let U=function(){x&&typeof P=="number"&&W>0&&(x.label=(0,C.format)(o[P]||h,W))},P,x,W=0;for(const O of N)P!==O.kind?(U(),P=O.kind,W=1,x={type:"separator"},A.push(x)):W++,A.push(O);U()}else N.length>0&&(A=[{label:(0,i.localize)(6,null,M.length),type:"separator"},...N]);return A})}compareByScore(r,d){if(typeof r.score!="number"&&typeof d.score=="number")return 1;if(typeof r.score=="number"&&typeof d.score!="number")return-1;if(typeof r.score=="number"&&typeof d.score=="number"){if(r.score>d.score)return-1;if(r.score<d.score)return 1}return r.index<d.index?-1:r.index>d.index?1:0}compareByKindAndScore(r,d){const u=o[r.kind]||h,_=o[d.kind]||h,f=u.localeCompare(_);return f===0?this.compareByScore(r,d):f}getDocumentSymbols(r,d){return Ee(this,void 0,void 0,function*(){const u=yield this._outlineModelService.getOrCreate(r,d);return d.isCancellationRequested?[]:u.asListOfDocumentSymbols()})}};c.PREFIX="@",c.SCOPE_PREFIX=":",c.PREFIX_BY_CATEGORY=`${c.PREFIX}${c.SCOPE_PREFIX}`,c=Ne([fe(0,s.ILanguageFeaturesService),fe(1,n.IOutlineModelService)],c),e.AbstractGotoSymbolQuickAccessProvider=c;const h=(0,i.localize)(7,null),o={[5]:(0,i.localize)(8,null),[11]:(0,i.localize)(9,null),[8]:(0,i.localize)(10,null),[12]:(0,i.localize)(11,null),[4]:(0,i.localize)(12,null),[22]:(0,i.localize)(13,null),[23]:(0,i.localize)(14,null),[24]:(0,i.localize)(15,null),[10]:(0,i.localize)(16,null),[2]:(0,i.localize)(17,null),[3]:(0,i.localize)(18,null),[25]:(0,i.localize)(19,null),[1]:(0,i.localize)(20,null),[6]:(0,i.localize)(21,null),[9]:(0,i.localize)(22,null),[21]:(0,i.localize)(23,null),[14]:(0,i.localize)(24,null),[0]:(0,i.localize)(25,null),[17]:(0,i.localize)(26,null),[15]:(0,i.localize)(27,null),[16]:(0,i.localize)(28,null),[18]:(0,i.localize)(29,null),[19]:(0,i.localize)(30,null),[7]:(0,i.localize)(31,null),[13]:(0,i.localize)(32,null)}}),define(X[810],J([1,0,2,13,649,14,36,31,24,430]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.RenameInputField=e.CONTEXT_RENAME_INPUT_VISIBLE=void 0,e.CONTEXT_RENAME_INPUT_VISIBLE=new D.RawContextKey("renameInputVisible",!1,(0,y.localize)(0,null));let g=class{constructor(n,t,i,s,a){this._editor=n,this._acceptKeybindings=t,this._themeService=i,this._keybindingService=s,this._disposables=new S.DisposableStore,this.allowEditorOverflow=!0,this._visibleContextKey=e.CONTEXT_RENAME_INPUT_VISIBLE.bindTo(a),this._editor.addContentWidget(this),this._disposables.add(this._editor.onDidChangeConfiguration(c=>{c.hasChanged(48)&&this._updateFont()})),this._disposables.add(i.onDidColorThemeChange(this._updateStyles,this))}dispose(){this._disposables.dispose(),this._editor.removeContentWidget(this)}getId(){return"__renameInputWidget"}getDomNode(){return this._domNode||(this._domNode=document.createElement("div"),this._domNode.className="monaco-editor rename-box",this._input=document.createElement("input"),this._input.className="rename-input",this._input.type="text",this._input.setAttribute("aria-label",(0,y.localize)(1,null)),this._domNode.appendChild(this._input),this._label=document.createElement("div"),this._label.className="rename-label",this._domNode.appendChild(this._label),this._updateFont(),this._updateStyles(this._themeService.getColorTheme())),this._domNode}_updateStyles(n){var t,i,s,a;if(!this._input||!this._domNode)return;const c=n.getColor(b.widgetShadow),h=n.getColor(b.widgetBorder);this._domNode.style.backgroundColor=String((t=n.getColor(b.editorWidgetBackground))!==null&&t!==void 0?t:""),this._domNode.style.boxShadow=c?` 0 0 8px 2px ${c}`:"",this._domNode.style.border=h?`1px solid ${h}`:"",this._domNode.style.color=String((i=n.getColor(b.inputForeground))!==null&&i!==void 0?i:""),this._input.style.backgroundColor=String((s=n.getColor(b.inputBackground))!==null&&s!==void 0?s:"");const o=n.getColor(b.inputBorder);this._input.style.borderWidth=o?"1px":"0px",this._input.style.borderStyle=o?"solid":"none",this._input.style.borderColor=(a=o?.toString())!==null&&a!==void 0?a:"none"}_updateFont(){if(!this._input||!this._label)return;const n=this._editor.getOption(48);this._input.style.fontFamily=n.fontFamily,this._input.style.fontWeight=n.fontWeight,this._input.style.fontSize=`${n.fontSize}px`,this._label.style.fontSize=`${n.fontSize*.8}px`}getPosition(){return this._visible?{position:this._position,preference:[2,1]}:null}beforeRender(){var n,t;const[i,s]=this._acceptKeybindings;return this._label.innerText=(0,y.localize)(2,null,(n=this._keybindingService.lookupKeybinding(i))===null||n===void 0?void 0:n.getLabel(),(t=this._keybindingService.lookupKeybinding(s))===null||t===void 0?void 0:t.getLabel()),null}afterRender(n){n||this.cancelInput(!0)}acceptInput(n){var t;(t=this._currentAcceptInput)===null||t===void 0||t.call(this,n)}cancelInput(n){var t;(t=this._currentCancelInput)===null||t===void 0||t.call(this,n)}getInput(n,t,i,s,a,c){this._domNode.classList.toggle("preview",a),this._position=new k.Position(n.startLineNumber,n.startColumn),this._input.value=t,this._input.setAttribute("selectionStart",i.toString()),this._input.setAttribute("selectionEnd",s.toString()),this._input.size=Math.max((n.endColumn-n.startColumn)*1.1,20);const h=new S.DisposableStore;return new Promise(o=>{this._currentCancelInput=l=>(this._currentAcceptInput=void 0,this._currentCancelInput=void 0,o(l),!0),this._currentAcceptInput=l=>{if(this._input.value.trim().length===0||this._input.value===t){this.cancelInput(!0);return}this._currentAcceptInput=void 0,this._currentCancelInput=void 0,o({newName:this._input.value,wantsPreview:a&&l})},h.add(c.onCancellationRequested(()=>this.cancelInput(!0))),h.add(this._editor.onDidBlurEditorWidget(()=>this.cancelInput(!document.hasFocus()))),this._show()}).finally(()=>{h.dispose(),this._hide()})}_show(){this._editor.revealLineInCenterIfOutsideViewport(this._position.lineNumber,0),this._visible=!0,this._visibleContextKey.set(!0),this._editor.layoutContentWidget(this),setTimeout(()=>{this._input.focus(),this._input.setSelectionRange(parseInt(this._input.getAttribute("selectionStart")),parseInt(this._input.getAttribute("selectionEnd")))},100)}_hide(){this._visible=!1,this._visibleContextKey.reset(),this._editor.layoutContentWidget(this)}};g=Ne([fe(2,C.IThemeService),fe(3,w.IKeybindingService),fe(4,D.IContextKeyService)],g),e.RenameInputField=g}),define(X[811],J([1,0,50,12,21,11,2,18,20,97,15,147,30,13,5,22,176,150,648,90,14,8,62,43,71,34,810,19]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a,c,h,o,l,r,d,u,_,f,v,p,L){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.RenameAction=e.rename=void 0;class E{constructor(N,A,P){this.model=N,this.position=A,this._providerRenameIdx=0,this._providers=P.ordered(N)}hasProvider(){return this._providers.length>0}resolveRenameLocation(N){return Ee(this,void 0,void 0,function*(){const A=[];for(this._providerRenameIdx=0;this._providerRenameIdx<this._providers.length;this._providerRenameIdx++){const x=this._providers[this._providerRenameIdx];if(!x.resolveRenameLocation)break;const W=yield x.resolveRenameLocation(this.model,this.position,N);if(!!W){if(W.rejectReason){A.push(W.rejectReason);continue}return W}}const P=this.model.getWordAtPosition(this.position);return P?{range:new s.Range(this.position.lineNumber,P.startColumn,this.position.lineNumber,P.endColumn),text:P.word,rejectReason:A.length>0?A.join(`
+`,I+1),I===-1)break;E++}while(!0);return E}_renderAtTopLeft(){this._doRender({lastRenderPosition:null,top:0,left:0,width:this._textAreaWidth,height:_?0:1,useCover:!0})}_doRender(L){this._lastRenderPosition=L.lastRenderPosition;const E=this.textArea,I=this.textAreaCover;(0,b.applyFontInfo)(E,this._fontInfo),E.setTop(L.top),E.setLeft(L.left),E.setWidth(L.width),E.setHeight(L.height),E.setColor(L.color?r.Color.Format.CSS.formatHex(L.color):""),E.setFontStyle(L.italic?"italic":""),L.bold&&E.setFontWeight("bold"),E.setTextDecoration(`${L.underline?" underline":""}${L.strikethrough?" line-through":""}`),I.setTop(L.useCover?L.top:0),I.setLeft(L.useCover?L.left:0),I.setWidth(L.useCover?L.width:0),I.setHeight(L.useCover?L.height:0);const T=this._context.configuration.options;T.get(55)?I.setClassName("monaco-editor-background textAreaCover "+t.Margin.OUTER_CLASS_NAME):T.get(65).renderType!==0?I.setClassName("monaco-editor-background textAreaCover "+n.LineNumbersOverlay.CLASS_NAME):I.setClassName("monaco-editor-background textAreaCover")}}e.TextAreaHandler=f;function v(p,L,E){if(p.length===0)return 0;const I=document.createElement("div");I.style.position="absolute",I.style.top="-50000px",I.style.width="50000px";const T=document.createElement("span");(0,b.applyFontInfo)(T,L),T.style.whiteSpace="pre",T.style.tabSize=`${E*L.spaceWidth}px`,T.append(p),I.appendChild(T),document.body.appendChild(I);const F=T.offsetWidth;return document.body.removeChild(I),F}}),define(X[801],J([1,0,35,37,52,13,26,73,82]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.DecorationsOverviewRuler=void 0;class g{constructor(t,i){const s=t.options;this.lineHeight=s.get(64),this.pixelRatio=s.get(137),this.overviewRulerLanes=s.get(80),this.renderBorder=s.get(79);const a=i.getColor(b.editorOverviewRulerBorder);this.borderColor=a?a.toString():null,this.hideCursor=s.get(57);const c=i.getColor(b.editorCursorForeground);this.cursorColor=c?c.transparent(.7).toString():null,this.themeType=i.type;const h=s.get(70),o=h.enabled,l=h.side,r=i.getColor(b.editorOverviewRulerBackground),d=w.TokenizationRegistry.getDefaultBackground();r?this.backgroundColor=r:o&&l==="right"?this.backgroundColor=d:this.backgroundColor=null;const _=s.get(139).overviewRuler;this.top=_.top,this.right=_.right,this.domWidth=_.width,this.domHeight=_.height,this.overviewRulerLanes===0?(this.canvasWidth=0,this.canvasHeight=0):(this.canvasWidth=this.domWidth*this.pixelRatio|0,this.canvasHeight=this.domHeight*this.pixelRatio|0);const[f,v]=this._initLanes(1,this.canvasWidth,this.overviewRulerLanes);this.x=f,this.w=v}_initLanes(t,i,s){const a=i-t;if(s>=3){const c=Math.floor(a/3),h=Math.floor(a/3),o=a-c-h,l=t,r=l+c,d=l+c+o;return[[0,l,r,l,d,l,r,l],[0,c,o,c+o,h,c+o+h,o+h,c+o+h]]}else if(s===2){const c=Math.floor(a/2),h=a-c,o=t,l=o+c;return[[0,o,o,o,l,o,o,o],[0,c,c,c,h,c+h,c+h,c+h]]}else{const c=t,h=a;return[[0,c,c,c,c,c,c,c],[0,h,h,h,h,h,h,h]]}}equals(t){return this.lineHeight===t.lineHeight&&this.pixelRatio===t.pixelRatio&&this.overviewRulerLanes===t.overviewRulerLanes&&this.renderBorder===t.renderBorder&&this.borderColor===t.borderColor&&this.hideCursor===t.hideCursor&&this.cursorColor===t.cursorColor&&this.themeType===t.themeType&&k.Color.equals(this.backgroundColor,t.backgroundColor)&&this.top===t.top&&this.right===t.right&&this.domWidth===t.domWidth&&this.domHeight===t.domHeight&&this.canvasWidth===t.canvasWidth&&this.canvasHeight===t.canvasHeight}}class m extends y.ViewPart{constructor(t){super(t),this._domNode=(0,S.createFastDomNode)(document.createElement("canvas")),this._domNode.setClassName("decorationsOverviewRuler"),this._domNode.setPosition("absolute"),this._domNode.setLayerHinting(!0),this._domNode.setContain("strict"),this._domNode.setAttribute("aria-hidden","true"),this._updateSettings(!1),this._tokensColorTrackerListener=w.TokenizationRegistry.onDidChange(i=>{i.changedColorMap&&this._updateSettings(!0)}),this._cursorPositions=[]}dispose(){super.dispose(),this._tokensColorTrackerListener.dispose()}_updateSettings(t){const i=new g(this._context.configuration,this._context.theme);return this._settings&&this._settings.equals(i)?!1:(this._settings=i,this._domNode.setTop(this._settings.top),this._domNode.setRight(this._settings.right),this._domNode.setWidth(this._settings.domWidth),this._domNode.setHeight(this._settings.domHeight),this._domNode.domNode.width=this._settings.canvasWidth,this._domNode.domNode.height=this._settings.canvasHeight,t&&this._render(),!0)}onConfigurationChanged(t){return this._updateSettings(!1)}onCursorStateChanged(t){this._cursorPositions=[];for(let i=0,s=t.selections.length;i<s;i++)this._cursorPositions[i]=t.selections[i].getPosition();return this._cursorPositions.sort(D.Position.compare),!0}onDecorationsChanged(t){return!!t.affectsOverviewRuler}onFlushed(t){return!0}onScrollChanged(t){return t.scrollHeightChanged}onZonesChanged(t){return!0}onThemeChanged(t){return this._updateSettings(!1)}getDomNode(){return this._domNode.domNode}prepareRender(t){}render(t){this._render()}_render(){const t=this._settings.backgroundColor;if(this._settings.overviewRulerLanes===0){this._domNode.setBackgroundColor(t?k.Color.Format.CSS.formatHexA(t):""),this._domNode.setDisplay("none");return}this._domNode.setDisplay("block");const i=this._settings.canvasWidth,s=this._settings.canvasHeight,a=this._settings.lineHeight,c=this._context.viewLayout,h=this._context.viewLayout.getScrollHeight(),o=s/h,l=this._context.viewModel.getAllOverviewRulerDecorations(this._context.theme),r=6*this._settings.pixelRatio|0,d=r/2|0,u=this._domNode.domNode.getContext("2d");t?t.isOpaque()?(u.fillStyle=k.Color.Format.CSS.formatHexA(t),u.fillRect(0,0,i,s)):(u.clearRect(0,0,i,s),u.fillStyle=k.Color.Format.CSS.formatHexA(t),u.fillRect(0,0,i,s)):u.clearRect(0,0,i,s);const _=this._settings.x,f=this._settings.w;l.sort(C.OverviewRulerDecorationsGroup.cmp);for(const v of l){const p=v.color,L=v.data;u.fillStyle=p;let E=0,I=0,T=0;for(let F=0,R=L.length/3;F<R;F++){const M=L[3*F],N=L[3*F+1],A=L[3*F+2];let P=c.getVerticalOffsetForLineNumber(N)*o|0,x=(c.getVerticalOffsetForLineNumber(A)+a)*o|0;if(x-P<r){let U=(P+x)/2|0;U<d?U=d:U+d>s&&(U=s-d),P=U-d,x=U+d}P>T+1||M!==E?(F!==0&&u.fillRect(_[E],I,f[E],T-I),E=M,I=P,T=x):x>T&&(T=x)}u.fillRect(_[E],I,f[E],T-I)}if(!this._settings.hideCursor&&this._settings.cursorColor){const v=2*this._settings.pixelRatio|0,p=v/2|0,L=this._settings.x[7],E=this._settings.w[7];u.fillStyle=this._settings.cursorColor;let I=-100,T=-100;for(let F=0,R=this._cursorPositions.length;F<R;F++){const M=this._cursorPositions[F];let N=c.getVerticalOffsetForLineNumber(M.lineNumber)*o|0;N<p?N=p:N+p>s&&(N=s-p);const A=N-p,P=A+v;A>T+1?(F!==0&&u.fillRect(L,I,E,T-I),I=A,T=P):P>T&&(T=P)}u.fillRect(L,I,E,T-I)}this._settings.renderBorder&&this._settings.borderColor&&this._settings.overviewRulerLanes>0&&(u.beginPath(),u.lineWidth=1,u.strokeStyle=this._settings.borderColor,u.moveTo(0,0),u.lineTo(0,s),u.stroke(),u.moveTo(0,0),u.lineTo(i,0),u.stroke())}}e.DecorationsOverviewRuler=m}),define(X[802],J([1,0,35,12,52,584,40,73,24,91,403]),function(j,e,S,k,y,D,w,b,C,g){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ViewCursors=void 0;class m extends y.ViewPart{constructor(t){super(t);const i=this._context.configuration.options;this._readOnly=i.get(87),this._cursorBlinking=i.get(24),this._cursorStyle=i.get(26),this._cursorSmoothCaretAnimation=i.get(25),this._selectionIsEmpty=!0,this._isComposingInput=!1,this._isVisible=!1,this._primaryCursor=new D.ViewCursor(this._context),this._secondaryCursors=[],this._renderData=[],this._domNode=(0,S.createFastDomNode)(document.createElement("div")),this._domNode.setAttribute("role","presentation"),this._domNode.setAttribute("aria-hidden","true"),this._updateDomClassName(),this._domNode.appendChild(this._primaryCursor.getDomNode()),this._startCursorBlinkAnimation=new k.TimeoutTimer,this._cursorFlatBlinkInterval=new k.IntervalTimer,this._blinkingEnabled=!1,this._editorHasFocus=!1,this._updateBlinking()}dispose(){super.dispose(),this._startCursorBlinkAnimation.dispose(),this._cursorFlatBlinkInterval.dispose()}getDomNode(){return this._domNode}onCompositionStart(t){return this._isComposingInput=!0,this._updateBlinking(),!0}onCompositionEnd(t){return this._isComposingInput=!1,this._updateBlinking(),!0}onConfigurationChanged(t){const i=this._context.configuration.options;this._readOnly=i.get(87),this._cursorBlinking=i.get(24),this._cursorStyle=i.get(26),this._cursorSmoothCaretAnimation=i.get(25),this._updateBlinking(),this._updateDomClassName(),this._primaryCursor.onConfigurationChanged(t);for(let s=0,a=this._secondaryCursors.length;s<a;s++)this._secondaryCursors[s].onConfigurationChanged(t);return!0}_onCursorPositionChanged(t,i,s){const a=this._secondaryCursors.length!==i.length||this._cursorSmoothCaretAnimation==="explicit"&&s!==3;if(this._primaryCursor.onCursorPositionChanged(t,a),this._updateBlinking(),this._secondaryCursors.length<i.length){const c=i.length-this._secondaryCursors.length;for(let h=0;h<c;h++){const o=new D.ViewCursor(this._context);this._domNode.domNode.insertBefore(o.getDomNode().domNode,this._primaryCursor.getDomNode().domNode.nextSibling),this._secondaryCursors.push(o)}}else if(this._secondaryCursors.length>i.length){const c=this._secondaryCursors.length-i.length;for(let h=0;h<c;h++)this._domNode.removeChild(this._secondaryCursors[0].getDomNode()),this._secondaryCursors.splice(0,1)}for(let c=0;c<i.length;c++)this._secondaryCursors[c].onCursorPositionChanged(i[c],a)}onCursorStateChanged(t){const i=[];for(let a=0,c=t.selections.length;a<c;a++)i[a]=t.selections[a].getPosition();this._onCursorPositionChanged(i[0],i.slice(1),t.reason);const s=t.selections[0].isEmpty();return this._selectionIsEmpty!==s&&(this._selectionIsEmpty=s,this._updateDomClassName()),!0}onDecorationsChanged(t){return!0}onFlushed(t){return!0}onFocusChanged(t){return this._editorHasFocus=t.isFocused,this._updateBlinking(),!1}onLinesChanged(t){return!0}onLinesDeleted(t){return!0}onLinesInserted(t){return!0}onScrollChanged(t){return!0}onTokensChanged(t){const i=s=>{for(let a=0,c=t.ranges.length;a<c;a++)if(t.ranges[a].fromLineNumber<=s.lineNumber&&s.lineNumber<=t.ranges[a].toLineNumber)return!0;return!1};if(i(this._primaryCursor.getPosition()))return!0;for(const s of this._secondaryCursors)if(i(s.getPosition()))return!0;return!1}onZonesChanged(t){return!0}_getCursorBlinking(){return this._isComposingInput||!this._editorHasFocus?0:this._readOnly?5:this._cursorBlinking}_updateBlinking(){this._startCursorBlinkAnimation.cancel(),this._cursorFlatBlinkInterval.cancel();const t=this._getCursorBlinking(),i=t===0,s=t===5;i?this._hide():this._show(),this._blinkingEnabled=!1,this._updateDomClassName(),!i&&!s&&(t===1?this._cursorFlatBlinkInterval.cancelAndSet(()=>{this._isVisible?this._hide():this._show()},m.BLINK_INTERVAL):this._startCursorBlinkAnimation.setIfNotSet(()=>{this._blinkingEnabled=!0,this._updateDomClassName()},m.BLINK_INTERVAL))}_updateDomClassName(){this._domNode.setClassName(this._getClassName())}_getClassName(){let t="cursors-layer";switch(this._selectionIsEmpty||(t+=" has-selection"),this._cursorStyle){case w.TextEditorCursorStyle.Line:t+=" cursor-line-style";break;case w.TextEditorCursorStyle.Block:t+=" cursor-block-style";break;case w.TextEditorCursorStyle.Underline:t+=" cursor-underline-style";break;case w.TextEditorCursorStyle.LineThin:t+=" cursor-line-thin-style";break;case w.TextEditorCursorStyle.BlockOutline:t+=" cursor-block-outline-style";break;case w.TextEditorCursorStyle.UnderlineThin:t+=" cursor-underline-thin-style";break;default:t+=" cursor-line-style"}if(this._blinkingEnabled)switch(this._getCursorBlinking()){case 1:t+=" cursor-blink";break;case 2:t+=" cursor-smooth";break;case 3:t+=" cursor-phase";break;case 4:t+=" cursor-expand";break;case 5:t+=" cursor-solid";break;default:t+=" cursor-solid"}else t+=" cursor-solid";return(this._cursorSmoothCaretAnimation==="on"||this._cursorSmoothCaretAnimation==="explicit")&&(t+=" cursor-smooth-caret-animation"),t}_show(){this._primaryCursor.show();for(let t=0,i=this._secondaryCursors.length;t<i;t++)this._secondaryCursors[t].show();this._isVisible=!0}_hide(){this._primaryCursor.hide();for(let t=0,i=this._secondaryCursors.length;t<i;t++)this._secondaryCursors[t].hide();this._isVisible=!1}prepareRender(t){this._primaryCursor.prepareRender(t);for(let i=0,s=this._secondaryCursors.length;i<s;i++)this._secondaryCursors[i].prepareRender(t)}render(t){const i=[];let s=0;const a=this._primaryCursor.render(t);a&&(i[s++]=a);for(let c=0,h=this._secondaryCursors.length;c<h;c++){const o=this._secondaryCursors[c].render(t);o&&(i[s++]=o)}this._renderData=i}getLastRenderData(){return this._renderData}}m.BLINK_INTERVAL=500,e.ViewCursors=m,(0,C.registerThemingParticipant)((n,t)=>{const i=n.getColor(b.editorCursorForeground);if(i){let s=n.getColor(b.editorCursorBackground);s||(s=i.opposite()),t.addRule(`.monaco-editor .cursors-layer .cursor { background-color: ${i}; border-color: ${i}; color: ${s}; }`),(0,g.isHighContrast)(n.type)&&t.addRule(`.monaco-editor .cursors-layer.has-selection .cursor { border-left: 1px solid ${s}; border-right: 1px solid ${s}; }`)}})}),define(X[803],J([1,0,106,9,109,13,73,404]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.WhitespaceOverlay=void 0;class b extends S.DynamicViewOverlay{constructor(m){super(),this._context=m,this._options=new C(this._context.configuration),this._selection=[],this._renderResult=null,this._context.addEventHandler(this)}dispose(){this._context.removeEventHandler(this),this._renderResult=null,super.dispose()}onConfigurationChanged(m){const n=new C(this._context.configuration);return this._options.equals(n)?m.hasChanged(139):(this._options=n,!0)}onCursorStateChanged(m){return this._selection=m.selections,this._options.renderWhitespace==="selection"}onDecorationsChanged(m){return!0}onFlushed(m){return!0}onLinesChanged(m){return!0}onLinesDeleted(m){return!0}onLinesInserted(m){return!0}onScrollChanged(m){return m.scrollTopChanged}onZonesChanged(m){return!0}prepareRender(m){if(this._options.renderWhitespace==="none"){this._renderResult=null;return}const n=m.visibleRange.startLineNumber,i=m.visibleRange.endLineNumber-n+1,s=new Array(i);for(let c=0;c<i;c++)s[c]=!0;const a=this._context.viewModel.getMinimapLinesRenderingData(m.viewportData.startLineNumber,m.viewportData.endLineNumber,s);this._renderResult=[];for(let c=m.viewportData.startLineNumber;c<=m.viewportData.endLineNumber;c++){const h=c-m.viewportData.startLineNumber,o=a.data[h];let l=null;if(this._options.renderWhitespace==="selection"){const r=this._selection;for(const d of r){if(d.endLineNumber<c||d.startLineNumber>c)continue;const u=d.startLineNumber===c?d.startColumn:o.minColumn,_=d.endLineNumber===c?d.endColumn:o.maxColumn;u<_&&(l||(l=[]),l.push(new y.LineRange(u-1,_-1)))}}this._renderResult[h]=this._applyRenderWhitespace(m,c,l,o)}}_applyRenderWhitespace(m,n,t,i){if(this._options.renderWhitespace==="selection"&&!t||this._options.renderWhitespace==="trailing"&&i.continuesWithWrappedLine)return"";const s=this._context.theme.getColor(w.editorWhitespaces),a=this._options.renderWithSVG,c=i.content,h=this._options.stopRenderingLineAfter===-1?c.length:Math.min(this._options.stopRenderingLineAfter,c.length),o=i.continuesWithWrappedLine,l=i.minColumn-1,r=this._options.renderWhitespace==="boundary",d=this._options.renderWhitespace==="trailing",u=this._options.lineHeight,_=this._options.middotWidth,f=this._options.wsmiddotWidth,v=this._options.spaceWidth,p=Math.abs(f-v),L=Math.abs(_-v),E=p<L?11825:183,I=this._options.canUseHalfwidthRightwardsArrow;let T="",F=!1,R=k.firstNonWhitespaceIndex(c),M;R===-1?(F=!0,R=h,M=h):M=k.lastNonWhitespaceIndex(c);let N=0,A=t&&t[N],P=0;for(let x=l;x<h;x++){const W=c.charCodeAt(x);if(A&&x>=A.endOffset&&(N++,A=t&&t[N]),W!==9&&W!==32||d&&!F&&x<=M)continue;if(r&&x>=R&&x<=M&&W===32){const O=x-1>=0?c.charCodeAt(x-1):0,$=x+1<h?c.charCodeAt(x+1):0;if(O!==32&&$!==32)continue}if(r&&o&&x===h-1){const O=x-1>=0?c.charCodeAt(x-1):0;if(W===32&&O!==32&&O!==9)continue}if(t&&(!A||A.startOffset>x||A.endOffset<=x))continue;const U=m.visibleRangeForPosition(new D.Position(n,x+1));!U||(a?(P=Math.max(P,U.left),W===9?T+=this._renderArrow(u,v,U.left):T+=`<circle cx="${(U.left+v/2).toFixed(2)}" cy="${(u/2).toFixed(2)}" r="${(v/7).toFixed(2)}" />`):W===9?T+=`<div class="mwh" style="left:${U.left}px;height:${u}px;">${I?String.fromCharCode(65515):String.fromCharCode(8594)}</div>`:T+=`<div class="mwh" style="left:${U.left}px;height:${u}px;">${String.fromCharCode(E)}</div>`)}return a?(P=Math.round(P+v),`<svg style="position:absolute;width:${P}px;height:${u}px" viewBox="0 0 ${P} ${u}" xmlns="http://www.w3.org/2000/svg" fill="${s}">`+T+"</svg>"):T}_renderArrow(m,n,t){const i=n/7,s=n,a=m/2,c=t,h={x:0,y:i/2},o={x:100/125*s,y:h.y},l={x:o.x-.2*o.x,y:o.y+.2*o.x},r={x:l.x+.1*o.x,y:l.y+.1*o.x},d={x:r.x+.35*o.x,y:r.y-.35*o.x},u={x:d.x,y:-d.y},_={x:r.x,y:-r.y},f={x:l.x,y:-l.y},v={x:o.x,y:-o.y},p={x:h.x,y:-h.y};return`<path d="M ${[h,o,l,r,d,u,_,f,v,p].map(I=>`${(c+I.x).toFixed(2)} ${(a+I.y).toFixed(2)}`).join(" L ")}" />`}render(m,n){if(!this._renderResult)return"";const t=n-m;return t<0||t>=this._renderResult.length?"":this._renderResult[t]}}e.WhitespaceOverlay=b;class C{constructor(m){const n=m.options,t=n.get(48),i=n.get(36);i==="off"?(this.renderWhitespace="none",this.renderWithSVG=!1):i==="svg"?(this.renderWhitespace=n.get(94),this.renderWithSVG=!0):(this.renderWhitespace=n.get(94),this.renderWithSVG=!1),this.spaceWidth=t.spaceWidth,this.middotWidth=t.middotWidth,this.wsmiddotWidth=t.wsmiddotWidth,this.canUseHalfwidthRightwardsArrow=t.canUseHalfwidthRightwardsArrow,this.lineHeight=n.get(64),this.stopRenderingLineAfter=n.get(112)}equals(m){return this.renderWhitespace===m.renderWhitespace&&this.renderWithSVG===m.renderWithSVG&&this.spaceWidth===m.spaceWidth&&this.middotWidth===m.middotWidth&&this.wsmiddotWidth===m.wsmiddotWidth&&this.canUseHalfwidthRightwardsArrow===m.canUseHalfwidthRightwardsArrow&&this.lineHeight===m.lineHeight&&this.stopRenderingLineAfter===m.stopRenderingLineAfter}}}),define(X[804],J([1,0,7,23,35,11,793,800,745,252,558,52,555,798,491,796,197,799,330,794,492,268,493,777,494,801,503,495,496,797,802,497,13,134,504,500,137,24,329,490,242,803]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a,c,h,o,l,r,d,u,_,f,v,p,L,E,I,T,F,R,M,N,A,P,x,W,U,O,$){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.View=void 0;class Q extends P.ViewEventHandler{constructor(te,re,H,B,q,G){super(),this._selections=[new k.Selection(1,1,1,1)],this._renderAnimationFrame=null;const Y=new C.ViewController(re,B,q,te);this._context=new N.ViewContext(re,H,B),this._context.addEventHandler(this),this._viewParts=[],this._textAreaHandler=new b.TextAreaHandler(this._context,Y,this._createTextAreaHandlerHelper()),this._viewParts.push(this._textAreaHandler),this._linesContent=(0,y.createFastDomNode)(document.createElement("div")),this._linesContent.setClassName("lines-content monaco-editor-background"),this._linesContent.setPosition("absolute"),this.domNode=(0,y.createFastDomNode)(document.createElement("div")),this.domNode.setClassName(this._getEditorClassName()),this.domNode.setAttribute("role","code"),this._overflowGuardContainer=(0,y.createFastDomNode)(document.createElement("div")),n.PartFingerprints.write(this._overflowGuardContainer,3),this._overflowGuardContainer.setClassName("overflow-guard"),this._scrollbar=new a.EditorScrollbar(this._context,this._linesContent,this.domNode,this._overflowGuardContainer),this._viewParts.push(this._scrollbar),this._viewLines=new l.ViewLines(this._context,this._linesContent),this._viewZones=new F.ViewZones(this._context),this._viewParts.push(this._viewZones);const ne=new v.DecorationsOverviewRuler(this._context);this._viewParts.push(ne);const de=new E.ScrollDecorationViewPart(this._context);this._viewParts.push(de);const he=new m.ContentViewOverlays(this._context);this._viewParts.push(he),he.addDynamicOverlay(new i.CurrentLineHighlightOverlay(this._context)),he.addDynamicOverlay(new I.SelectionsOverlay(this._context)),he.addDynamicOverlay(new h.IndentGuidesOverlay(this._context)),he.addDynamicOverlay(new s.DecorationsOverlay(this._context)),he.addDynamicOverlay(new $.WhitespaceOverlay(this._context));const oe=new m.MarginViewOverlays(this._context);this._viewParts.push(oe),oe.addDynamicOverlay(new i.CurrentLineMarginHighlightOverlay(this._context)),oe.addDynamicOverlay(new c.GlyphMarginOverlay(this._context)),oe.addDynamicOverlay(new u.MarginViewLineDecorationsOverlay(this._context)),oe.addDynamicOverlay(new r.LinesDecorationsOverlay(this._context)),oe.addDynamicOverlay(new o.LineNumbersOverlay(this._context));const ce=new d.Margin(this._context);ce.getDomNode().appendChild(this._viewZones.marginDomNode),ce.getDomNode().appendChild(oe.getDomNode()),this._viewParts.push(ce),this._contentWidgets=new t.ViewContentWidgets(this._context,this.domNode),this._viewParts.push(this._contentWidgets),this._viewCursors=new T.ViewCursors(this._context),this._viewParts.push(this._viewCursors),this._overlayWidgets=new f.ViewOverlayWidgets(this._context),this._viewParts.push(this._overlayWidgets);const z=new L.Rulers(this._context);this._viewParts.push(z);const V=new U.BlockDecorations(this._context);this._viewParts.push(V);const K=new _.Minimap(this._context);if(this._viewParts.push(K),ne){const ie=this._scrollbar.getOverviewRulerLayoutInfo();ie.parent.insertBefore(ne.getDomNode(),ie.insertBefore)}this._linesContent.appendChild(he.getDomNode()),this._linesContent.appendChild(z.domNode),this._linesContent.appendChild(this._viewZones.domNode),this._linesContent.appendChild(this._viewLines.getDomNode()),this._linesContent.appendChild(this._contentWidgets.domNode),this._linesContent.appendChild(this._viewCursors.getDomNode()),this._overflowGuardContainer.appendChild(ce.getDomNode()),this._overflowGuardContainer.appendChild(this._scrollbar.getDomNode()),this._overflowGuardContainer.appendChild(de.getDomNode()),this._overflowGuardContainer.appendChild(this._textAreaHandler.textArea),this._overflowGuardContainer.appendChild(this._textAreaHandler.textAreaCover),this._overflowGuardContainer.appendChild(this._overlayWidgets.getDomNode()),this._overflowGuardContainer.appendChild(K.getDomNode()),this._overflowGuardContainer.appendChild(V.domNode),this.domNode.appendChild(this._overflowGuardContainer),G?G.appendChild(this._contentWidgets.overflowingContentWidgetsDomNode.domNode):this.domNode.appendChild(this._contentWidgets.overflowingContentWidgetsDomNode),this._applyLayout(),this._pointerHandler=this._register(new w.PointerHandler(this._context,Y,this._createPointerHandlerHelper()))}_flushAccumulatedAndRenderNow(){O.inputLatency.onRenderStart(),this._renderNow()}_createPointerHandlerHelper(){return{viewDomNode:this.domNode.domNode,linesContentDomNode:this._linesContent.domNode,viewLinesDomNode:this._viewLines.getDomNode().domNode,focusTextArea:()=>{this.focus()},dispatchTextAreaEvent:te=>{this._textAreaHandler.textArea.domNode.dispatchEvent(te)},getLastRenderData:()=>{const te=this._viewCursors.getLastRenderData()||[],re=this._textAreaHandler.getLastRenderData();return new W.PointerHandlerLastRenderData(te,re)},renderNow:()=>{this.render(!0,!1)},shouldSuppressMouseDownOnViewZone:te=>this._viewZones.shouldSuppressMouseDownOnViewZone(te),shouldSuppressMouseDownOnWidget:te=>this._contentWidgets.shouldSuppressMouseDownOnWidget(te),getPositionFromDOMInfo:(te,re)=>(this._flushAccumulatedAndRenderNow(),this._viewLines.getPositionFromDOMInfo(te,re)),visibleRangeForPosition:(te,re)=>(this._flushAccumulatedAndRenderNow(),this._viewLines.visibleRangeForPosition(new R.Position(te,re))),getLineWidth:te=>(this._flushAccumulatedAndRenderNow(),this._viewLines.getLineWidth(te))}}_createTextAreaHandlerHelper(){return{visibleRangeForPosition:te=>(this._flushAccumulatedAndRenderNow(),this._viewLines.visibleRangeForPosition(te))}}_applyLayout(){const re=this._context.configuration.options.get(139);this.domNode.setWidth(re.width),this.domNode.setHeight(re.height),this._overflowGuardContainer.setWidth(re.width),this._overflowGuardContainer.setHeight(re.height),this._linesContent.setWidth(1e6),this._linesContent.setHeight(1e6)}_getEditorClassName(){const te=this._textAreaHandler.isFocused()?" focused":"";return this._context.configuration.options.get(136)+" "+(0,x.getThemeTypeSelector)(this._context.theme.type)+te}handleEvents(te){super.handleEvents(te),this._scheduleRender()}onConfigurationChanged(te){return this.domNode.setClassName(this._getEditorClassName()),this._applyLayout(),!1}onCursorStateChanged(te){return this._selections=te.selections,!1}onFocusChanged(te){return this.domNode.setClassName(this._getEditorClassName()),!1}onThemeChanged(te){return this._context.theme.update(te.theme),this.domNode.setClassName(this._getEditorClassName()),!1}dispose(){this._renderAnimationFrame!==null&&(this._renderAnimationFrame.dispose(),this._renderAnimationFrame=null),this._contentWidgets.overflowingContentWidgetsDomNode.domNode.remove(),this._context.removeEventHandler(this),this._viewLines.dispose();for(const te of this._viewParts)te.dispose();super.dispose()}_scheduleRender(){this._renderAnimationFrame===null&&(this._renderAnimationFrame=S.runAtThisOrScheduleAtNextAnimationFrame(this._onRenderScheduled.bind(this),100))}_onRenderScheduled(){this._renderAnimationFrame=null,this._flushAccumulatedAndRenderNow()}_renderNow(){se(()=>this._actualRender())}_getViewPartsToRender(){const te=[];let re=0;for(const H of this._viewParts)H.shouldRender()&&(te[re++]=H);return te}_actualRender(){if(!S.isInDOM(this.domNode.domNode))return;let te=this._getViewPartsToRender();if(!this._viewLines.shouldRender()&&te.length===0)return;const re=this._context.viewLayout.getLinesViewportData();this._context.viewModel.setViewport(re.startLineNumber,re.endLineNumber,re.centeredLineNumber);const H=new A.ViewportData(this._selections,re,this._context.viewLayout.getWhitespaceViewportData(),this._context.viewModel);this._contentWidgets.shouldRender()&&this._contentWidgets.onBeforeRender(H),this._viewLines.shouldRender()&&(this._viewLines.renderText(H),this._viewLines.onDidRender(),te=this._getViewPartsToRender());const B=new M.RenderingContext(this._context.viewLayout,H,this._viewLines);for(const q of te)q.prepareRender(B);for(const q of te)q.render(B),q.onDidRender()}delegateVerticalScrollbarPointerDown(te){this._scrollbar.delegateVerticalScrollbarPointerDown(te)}delegateScrollFromMouseWheelEvent(te){this._scrollbar.delegateScrollFromMouseWheelEvent(te)}restoreState(te){this._context.viewModel.viewLayout.setScrollPosition({scrollTop:te.scrollTop,scrollLeft:te.scrollLeft},1),this._context.viewModel.visibleLinesStabilized()}getOffsetForColumn(te,re){const H=this._context.viewModel.model.validatePosition({lineNumber:te,column:re}),B=this._context.viewModel.coordinatesConverter.convertModelPositionToViewPosition(H);this._flushAccumulatedAndRenderNow();const q=this._viewLines.visibleRangeForPosition(new R.Position(B.lineNumber,B.column));return q?q.left:-1}getTargetAtClientPoint(te,re){const H=this._pointerHandler.getTargetAtClientPoint(te,re);return H?g.ViewUserInputEvents.convertViewToModelMouseTarget(H,this._context.viewModel.coordinatesConverter):null}createOverviewRuler(te){return new p.OverviewRuler(this._context,te)}change(te){this._viewZones.changeViewZones(te),this._scheduleRender()}render(te,re){if(re){this._viewLines.forceShouldRender();for(const H of this._viewParts)H.forceShouldRender()}te?this._flushAccumulatedAndRenderNow():this._scheduleRender()}writeScreenReaderContent(te){this._textAreaHandler.writeScreenReaderContent(te)}focus(){this._textAreaHandler.focusTextArea()}isFocused(){return this._textAreaHandler.isFocused()}setAriaOptions(te){this._textAreaHandler.setAriaOptions(te)}addContentWidget(te){this._contentWidgets.addWidget(te.widget),this.layoutContentWidget(te),this._scheduleRender()}layoutContentWidget(te){var re,H,B,q,G,Y,ne,de;this._contentWidgets.setWidgetPosition(te.widget,(H=(re=te.position)===null||re===void 0?void 0:re.position)!==null&&H!==void 0?H:null,(q=(B=te.position)===null||B===void 0?void 0:B.secondaryPosition)!==null&&q!==void 0?q:null,(Y=(G=te.position)===null||G===void 0?void 0:G.preference)!==null&&Y!==void 0?Y:null,(de=(ne=te.position)===null||ne===void 0?void 0:ne.positionAffinity)!==null&&de!==void 0?de:null),this._scheduleRender()}removeContentWidget(te){this._contentWidgets.removeWidget(te.widget),this._scheduleRender()}addOverlayWidget(te){this._overlayWidgets.addWidget(te.widget),this.layoutOverlayWidget(te),this._scheduleRender()}layoutOverlayWidget(te){const re=te.position?te.position.preference:null;this._overlayWidgets.setWidgetPosition(te.widget,re)&&this._scheduleRender()}removeOverlayWidget(te){this._overlayWidgets.removeWidget(te.widget),this._scheduleRender()}}e.View=Q;function se(le){try{return le()}catch(te){(0,D.onUnexpectedError)(te)}}}),define(X[805],J([1,0,6,2,5,73,24]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ColorizedBracketPairsDecorationProvider=void 0;class b extends k.Disposable{constructor(m){super(),this.textModel=m,this.colorProvider=new C,this.onDidChangeEmitter=new S.Emitter,this.onDidChange=this.onDidChangeEmitter.event,this.colorizationOptions=m.getOptions().bracketPairColorizationOptions,this._register(m.bracketPairs.onDidChange(n=>{this.onDidChangeEmitter.fire()}))}handleDidChangeOptions(m){this.colorizationOptions=this.textModel.getOptions().bracketPairColorizationOptions}getDecorationsInRange(m,n,t,i){return i?[]:n===void 0?[]:this.colorizationOptions.enabled?this.textModel.bracketPairs.getBracketsInRange(m,!0).map(a=>({id:`bracket${a.range.toString()}-${a.nestingLevel}`,options:{description:"BracketPairColorization",inlineClassName:this.colorProvider.getInlineClassName(a,this.colorizationOptions.independentColorPoolPerBracketType)},ownerId:0,range:a.range})).toArray():[]}getAllDecorations(m,n){return m===void 0?[]:this.colorizationOptions.enabled?this.getDecorationsInRange(new y.Range(1,1,this.textModel.getLineCount(),1),m,n):[]}}e.ColorizedBracketPairsDecorationProvider=b;class C{constructor(){this.unexpectedClosingBracketClassName="unexpected-closing-bracket"}getInlineClassName(m,n){return m.isInvalid?this.unexpectedClosingBracketClassName:this.getInlineClassNameOfLevel(n?m.nestingLevelOfEqualBracketType:m.nestingLevel)}getInlineClassNameOfLevel(m){return`bracket-highlighting-${m%30}`}}(0,w.registerThemingParticipant)((g,m)=>{const n=[D.editorBracketHighlightingForeground1,D.editorBracketHighlightingForeground2,D.editorBracketHighlightingForeground3,D.editorBracketHighlightingForeground4,D.editorBracketHighlightingForeground5,D.editorBracketHighlightingForeground6],t=new C;m.addRule(`.monaco-editor .${t.unexpectedClosingBracketClassName} { color: ${g.getColor(D.editorBracketHighlightingUnexpectedBracketForeground)}; }`);const i=n.map(s=>g.getColor(s)).filter(s=>!!s).filter(s=>!s.isTransparent());for(let s=0;s<30;s++){const a=i[s%i.length];m.addRule(`.monaco-editor .${t.getInlineClassNameOfLevel(s)} { color: ${a}; }`)}})}),define(X[806],J([1,0,89,2,48,24,73,53,5,49,6,31,55]),function(j,e,S,k,y,D,w,b,C,g,m,n,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MarkerDecorationsService=void 0;class i extends k.Disposable{constructor(c){super(),this.model=c,this._markersData=new Map,this._register((0,k.toDisposable)(()=>{this.model.deltaDecorations([...this._markersData.keys()],[]),this._markersData.clear()}))}update(c,h){const o=[...this._markersData.keys()];this._markersData.clear();const l=this.model.deltaDecorations(o,h);for(let r=0;r<l.length;r++)this._markersData.set(l[r],c[r]);return o.length!==0||l.length!==0}getMarker(c){return this._markersData.get(c.id)}}let s=class extends k.Disposable{constructor(c,h){super(),this._markerService=h,this._onDidChangeMarker=this._register(new m.Emitter),this._markerDecorations=new t.ResourceMap,c.getModels().forEach(o=>this._onModelAdded(o)),this._register(c.onModelAdded(this._onModelAdded,this)),this._register(c.onModelRemoved(this._onModelRemoved,this)),this._register(this._markerService.onMarkerChanged(this._handleMarkerChange,this))}dispose(){super.dispose(),this._markerDecorations.forEach(c=>c.dispose()),this._markerDecorations.clear()}getMarker(c,h){const o=this._markerDecorations.get(c);return o&&o.getMarker(h)||null}_handleMarkerChange(c){c.forEach(h=>{const o=this._markerDecorations.get(h);o&&this._updateDecorations(o)})}_onModelAdded(c){const h=new i(c);this._markerDecorations.set(c.uri,h),this._updateDecorations(h)}_onModelRemoved(c){var h;const o=this._markerDecorations.get(c.uri);o&&(o.dispose(),this._markerDecorations.delete(c.uri)),(c.uri.scheme===g.Schemas.inMemory||c.uri.scheme===g.Schemas.internal||c.uri.scheme===g.Schemas.vscode)&&((h=this._markerService)===null||h===void 0||h.read({resource:c.uri}).map(l=>l.owner).forEach(l=>this._markerService.remove(l,[c.uri])))}_updateDecorations(c){const h=this._markerService.read({resource:c.model.uri,take:500}),o=h.map(l=>({range:this._createDecorationRange(c.model,l),options:this._createDecorationOption(l)}));c.update(h,o)&&this._onDidChangeMarker.fire(c.model)}_createDecorationRange(c,h){let o=C.Range.lift(h);if(h.severity===S.MarkerSeverity.Hint&&!this._hasMarkerTag(h,1)&&!this._hasMarkerTag(h,2)&&(o=o.setEndPosition(o.startLineNumber,o.startColumn+2)),o=c.validateRange(o),o.isEmpty()){const l=c.getLineLastNonWhitespaceColumn(o.startLineNumber)||c.getLineMaxColumn(o.startLineNumber);if(l===1||o.endColumn>=l)return o;const r=c.getWordAtPosition(o.getStartPosition());r&&(o=new C.Range(o.startLineNumber,r.startColumn,o.endLineNumber,r.endColumn))}else if(h.endColumn===Number.MAX_VALUE&&h.startColumn===1&&o.startLineNumber===o.endLineNumber){const l=c.getLineFirstNonWhitespaceColumn(h.startLineNumber);l<o.endColumn&&(o=new C.Range(o.startLineNumber,l,o.endLineNumber,o.endColumn),h.startColumn=l)}return o}_createDecorationOption(c){let h,o,l,r,d;switch(c.severity){case S.MarkerSeverity.Hint:this._hasMarkerTag(c,2)?h=void 0:this._hasMarkerTag(c,1)?h="squiggly-unnecessary":h="squiggly-hint",l=0;break;case S.MarkerSeverity.Warning:h="squiggly-warning",o=(0,D.themeColorFromId)(w.overviewRulerWarning),l=20,d={color:(0,D.themeColorFromId)(n.minimapWarning),position:y.MinimapPosition.Inline};break;case S.MarkerSeverity.Info:h="squiggly-info",o=(0,D.themeColorFromId)(w.overviewRulerInfo),l=10;break;case S.MarkerSeverity.Error:default:h="squiggly-error",o=(0,D.themeColorFromId)(w.overviewRulerError),l=30,d={color:(0,D.themeColorFromId)(n.minimapError),position:y.MinimapPosition.Inline};break}return c.tags&&(c.tags.indexOf(1)!==-1&&(r="squiggly-inline-unnecessary"),c.tags.indexOf(2)!==-1&&(r="squiggly-inline-deprecated")),{description:"marker-decoration",stickiness:1,className:h,showIfCollapsed:!0,overviewRuler:{color:o,position:y.OverviewRulerLane.Right},minimap:d,zIndex:l,inlineClassName:r}}_hasMarkerTag(c,h){return c.tags?c.tags.indexOf(h)>=0:!1}};s=Ne([fe(0,b.IModelService),fe(1,S.IMarkerService)],s),e.MarkerDecorationsService=s}),define(X[237],J([1,0,119,24,62,488,38]),function(j,e,S,k,y,D,w){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.toMultilineTokens2=e.SemanticTokensProviderStyling=void 0;let b=class{constructor(t,i,s,a){this._legend=t,this._themeService=i,this._languageService=s,this._logService=a,this._hasWarnedOverlappingTokens=!1,this._hasWarnedInvalidLengthTokens=!1,this._hasWarnedInvalidEditStart=!1,this._hashTable=new m}getMetadata(t,i,s){const a=this._languageService.languageIdCodec.encodeLanguageId(s),c=this._hashTable.get(t,i,a);let h;if(c)h=c.metadata,this._logService.getLevel()===y.LogLevel.Trace&&this._logService.trace(`SemanticTokensProviderStyling [CACHED] ${t} / ${i}: foreground ${S.TokenMetadata.getForeground(h)}, fontStyle ${S.TokenMetadata.getFontStyle(h).toString(2)}`);else{let o=this._legend.tokenTypes[t];const l=[];if(o){let r=i;for(let u=0;r>0&&u<this._legend.tokenModifiers.length;u++)r&1&&l.push(this._legend.tokenModifiers[u]),r=r>>1;r>0&&this._logService.getLevel()===y.LogLevel.Trace&&(this._logService.trace(`SemanticTokensProviderStyling: unknown token modifier index: ${i.toString(2)} for legend: ${JSON.stringify(this._legend.tokenModifiers)}`),l.push("not-in-legend"));const d=this._themeService.getColorTheme().getTokenStyleMetadata(o,l,s);typeof d>"u"?h=2147483647:(h=0,typeof d.italic<"u"&&(h|=(d.italic?1:0)<<11|1),typeof d.bold<"u"&&(h|=(d.bold?2:0)<<11|2),typeof d.underline<"u"&&(h|=(d.underline?4:0)<<11|4),typeof d.strikethrough<"u"&&(h|=(d.strikethrough?8:0)<<11|8),d.foreground&&(h|=d.foreground<<15|16),h===0&&(h=2147483647))}else this._logService.getLevel()===y.LogLevel.Trace&&this._logService.trace(`SemanticTokensProviderStyling: unknown token type index: ${t} for legend: ${JSON.stringify(this._legend.tokenTypes)}`),h=2147483647,o="not-in-legend";this._hashTable.add(t,i,a,h),this._logService.getLevel()===y.LogLevel.Trace&&this._logService.trace(`SemanticTokensProviderStyling ${t} (${o}) / ${i} (${l.join(" ")}): foreground ${S.TokenMetadata.getForeground(h)}, fontStyle ${S.TokenMetadata.getFontStyle(h).toString(2)}`)}return h}warnOverlappingSemanticTokens(t,i){this._hasWarnedOverlappingTokens||(this._hasWarnedOverlappingTokens=!0,console.warn(`Overlapping semantic tokens detected at lineNumber ${t}, column ${i}`))}warnInvalidLengthSemanticTokens(t,i){this._hasWarnedInvalidLengthTokens||(this._hasWarnedInvalidLengthTokens=!0,console.warn(`Semantic token with invalid length detected at lineNumber ${t}, column ${i}`))}warnInvalidEditStart(t,i,s,a,c){this._hasWarnedInvalidEditStart||(this._hasWarnedInvalidEditStart=!0,console.warn(`Invalid semantic tokens edit detected (previousResultId: ${t}, resultId: ${i}) at edit #${s}: The provided start offset ${a} is outside the previous data (length ${c}).`))}};b=Ne([fe(1,k.IThemeService),fe(2,w.ILanguageService),fe(3,y.ILogService)],b),e.SemanticTokensProviderStyling=b;function C(n,t,i){const s=n.data,a=n.data.length/5|0,c=Math.max(Math.ceil(a/1024),400),h=[];let o=0,l=1,r=0;for(;o<a;){const d=o;let u=Math.min(d+c,a);if(u<a){let I=u;for(;I-1>d&&s[5*I]===0;)I--;if(I-1===d){let T=u;for(;T+1<a&&s[5*T]===0;)T++;u=T}else u=I}let _=new Uint32Array((u-d)*4),f=0,v=0,p=0,L=0;for(;o<u;){const I=5*o,T=s[I],F=s[I+1],R=l+T|0,M=T===0?r+F|0:F,N=s[I+2],A=M+N|0,P=s[I+3],x=s[I+4];if(A<=M)t.warnInvalidLengthSemanticTokens(R,M+1);else if(p===R&&L>M)t.warnOverlappingSemanticTokens(R,M+1);else{const W=t.getMetadata(P,x,i);W!==2147483647&&(v===0&&(v=R),_[f]=R-v,_[f+1]=M,_[f+2]=A,_[f+3]=W,f+=4,p=R,L=A)}l=R,r=M,o++}f!==_.length&&(_=_.subarray(0,f));const E=D.SparseMultilineTokens.create(v,_);h.push(E)}return h}e.toMultilineTokens2=C;class g{constructor(t,i,s,a){this.tokenTypeIndex=t,this.tokenModifierSet=i,this.languageId=s,this.metadata=a,this.next=null}}class m{constructor(){this._elementsCount=0,this._currentLengthIndex=0,this._currentLength=m._SIZES[this._currentLengthIndex],this._growCount=Math.round(this._currentLengthIndex+1<m._SIZES.length?2/3*this._currentLength:0),this._elements=[],m._nullOutEntries(this._elements,this._currentLength)}static _nullOutEntries(t,i){for(let s=0;s<i;s++)t[s]=null}_hash2(t,i){return(t<<5)-t+i|0}_hashFunc(t,i,s){return this._hash2(this._hash2(t,i),s)%this._currentLength}get(t,i,s){const a=this._hashFunc(t,i,s);let c=this._elements[a];for(;c;){if(c.tokenTypeIndex===t&&c.tokenModifierSet===i&&c.languageId===s)return c;c=c.next}return null}add(t,i,s,a){if(this._elementsCount++,this._growCount!==0&&this._elementsCount>=this._growCount){const c=this._elements;this._currentLengthIndex++,this._currentLength=m._SIZES[this._currentLengthIndex],this._growCount=Math.round(this._currentLengthIndex+1<m._SIZES.length?2/3*this._currentLength:0),this._elements=[],m._nullOutEntries(this._elements,this._currentLength);for(const h of c){let o=h;for(;o;){const l=o.next;o.next=null,this._add(o),o=l}}}this._add(new g(t,i,s,a))}_add(t){const i=this._hashFunc(t.tokenTypeIndex,t.tokenModifierSet,t.languageId);t.next=this._elements[i],this._elements[i]=t}}m._SIZES=[3,7,13,31,61,127,251,509,1021,2039,4093,8191,16381,32749,65521,131071,262139,524287,1048573,2097143]}),define(X[807],J([1,0,2,38,24,62,237,225,51]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.SemanticTokensStylingService=void 0;let g=class extends S.Disposable{constructor(n,t,i){super(),this._themeService=n,this._logService=t,this._languageService=i,this._caches=new WeakMap,this._register(this._themeService.onDidColorThemeChange(()=>{this._caches=new WeakMap}))}getStyling(n){return this._caches.has(n)||this._caches.set(n,new w.SemanticTokensProviderStyling(n.getLegend(),this._themeService,this._languageService,this._logService)),this._caches.get(n)}};g=Ne([fe(0,y.IThemeService),fe(1,D.ILogService),fe(2,k.ILanguageService)],g),e.SemanticTokensStylingService=g,(0,C.registerSingleton)(b.ISemanticTokensStylingService,g,1)}),define(X[331],J([1,0,92,2,18,167,48,73,24]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.AbstractEditorNavigationQuickAccessProvider=void 0;class g{constructor(n){this.options=n,this.rangeHighlightDecorationId=void 0}provide(n,t){var i;const s=new k.DisposableStore;n.canAcceptInBackground=!!(!((i=this.options)===null||i===void 0)&&i.canAcceptInBackground),n.matchOnLabel=n.matchOnDescription=n.matchOnDetail=n.sortByLabel=!1;const a=s.add(new k.MutableDisposable);return a.value=this.doProvide(n,t),s.add(this.onDidActiveTextEditorControlChange(()=>{a.value=void 0,a.value=this.doProvide(n,t)})),s}doProvide(n,t){const i=new k.DisposableStore,s=this.activeTextEditorControl;if(s&&this.canProvideWithTextEditor(s)){const a={editor:s},c=(0,D.getCodeEditor)(s);if(c){let h=(0,y.withNullAsUndefined)(s.saveViewState());i.add(c.onDidChangeCursorPosition(()=>{h=(0,y.withNullAsUndefined)(s.saveViewState())})),a.restoreViewState=()=>{h&&s===this.activeTextEditorControl&&s.restoreViewState(h)},i.add((0,S.once)(t.onCancellationRequested)(()=>{var o;return(o=a.restoreViewState)===null||o===void 0?void 0:o.call(a)}))}i.add((0,k.toDisposable)(()=>this.clearDecorations(s))),i.add(this.provideWithTextEditor(a,n,t))}else i.add(this.provideWithoutTextEditor(n,t));return i}canProvideWithTextEditor(n){return!0}gotoLocation({editor:n},t){n.setSelection(t.range),n.revealRangeInCenter(t.range,0),t.preserveFocus||n.focus()}getModel(n){var t;return(0,D.isDiffEditor)(n)?(t=n.getModel())===null||t===void 0?void 0:t.modified:n.getModel()}addDecorations(n,t){n.changeDecorations(i=>{const s=[];this.rangeHighlightDecorationId&&(s.push(this.rangeHighlightDecorationId.overviewRulerDecorationId),s.push(this.rangeHighlightDecorationId.rangeHighlightId),this.rangeHighlightDecorationId=void 0);const a=[{range:t,options:{description:"quick-access-range-highlight",className:"rangeHighlight",isWholeLine:!0}},{range:t,options:{description:"quick-access-range-highlight-overview",overviewRuler:{color:(0,C.themeColorFromId)(b.overviewRulerRangeHighlight),position:w.OverviewRulerLane.Full}}}],[c,h]=i.deltaDecorations(s,a);this.rangeHighlightDecorationId={rangeHighlightId:c,overviewRulerDecorationId:h}})}clearDecorations(n){const t=this.rangeHighlightDecorationId;t&&(n.changeDecorations(i=>{i.deltaDecorations([t.overviewRulerDecorationId,t.rangeHighlightId],[])}),this.rangeHighlightDecorationId=void 0)}}e.AbstractEditorNavigationQuickAccessProvider=g}),define(X[808],J([1,0,2,167,331,645]),function(j,e,S,k,y,D){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.AbstractGotoLineQuickAccessProvider=void 0;class w extends y.AbstractEditorNavigationQuickAccessProvider{constructor(){super({canAcceptInBackground:!0})}provideWithoutTextEditor(C){const g=(0,D.localize)(0,null);return C.items=[{label:g}],C.ariaLabel=g,S.Disposable.None}provideWithTextEditor(C,g,m){const n=C.editor,t=new S.DisposableStore;t.add(g.onDidAccept(a=>{const[c]=g.selectedItems;if(c){if(!this.isValidLineNumber(n,c.lineNumber))return;this.gotoLocation(C,{range:this.toRange(c.lineNumber,c.column),keyMods:g.keyMods,preserveFocus:a.inBackground}),a.inBackground||g.hide()}}));const i=()=>{const a=this.parsePosition(n,g.value.trim().substr(w.PREFIX.length)),c=this.getPickLabel(n,a.lineNumber,a.column);if(g.items=[{lineNumber:a.lineNumber,column:a.column,label:c}],g.ariaLabel=c,!this.isValidLineNumber(n,a.lineNumber)){this.clearDecorations(n);return}const h=this.toRange(a.lineNumber,a.column);n.revealRangeInCenter(h,0),this.addDecorations(n,h)};i(),t.add(g.onDidChangeValue(()=>i()));const s=(0,k.getCodeEditor)(n);return s&&s.getOptions().get(65).renderType===2&&(s.updateOptions({lineNumbers:"on"}),t.add((0,S.toDisposable)(()=>s.updateOptions({lineNumbers:"relative"})))),t}toRange(C=1,g=1){return{startLineNumber:C,startColumn:g,endLineNumber:C,endColumn:g}}parsePosition(C,g){const m=g.split(/,|:|#/).map(t=>parseInt(t,10)).filter(t=>!isNaN(t)),n=this.lineCount(C)+1;return{lineNumber:m[0]>0?m[0]:n+m[0],column:m[1]}}getPickLabel(C,g,m){if(this.isValidLineNumber(C,g))return this.isValidColumn(C,g,m)?(0,D.localize)(1,null,g,m):(0,D.localize)(2,null,g);const n=C.getPosition()||{lineNumber:1,column:1},t=this.lineCount(C);return t>1?(0,D.localize)(3,null,n.lineNumber,n.column,t):(0,D.localize)(4,null,n.lineNumber,n.column)}isValidLineNumber(C,g){return!g||typeof g!="number"?!1:g>0&&g<=this.lineCount(C)}isValidColumn(C,g,m){if(!m||typeof m!="number")return!1;const n=this.getModel(C);if(!n)return!1;const t={lineNumber:g,column:m};return n.validatePosition(t).equals(t)}lineCount(C){var g,m;return(m=(g=this.getModel(C))===null||g===void 0?void 0:g.getLineCount())!==null&&m!==void 0?m:0}}w.PREFIX=":",e.AbstractGotoLineQuickAccessProvider=w}),define(X[809],J([1,0,12,21,29,32,533,2,9,5,26,179,331,646,19,16]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.AbstractGotoSymbolQuickAccessProvider=void 0;let c=class ui extends t.AbstractEditorNavigationQuickAccessProvider{constructor(r,d,u=Object.create(null)){super(u),this._languageFeaturesService=r,this._outlineModelService=d,this.options=u,this.options.canAcceptInBackground=!0}provideWithoutTextEditor(r){return this.provideLabelPick(r,(0,i.localize)(0,null)),b.Disposable.None}provideWithTextEditor(r,d,u){const _=r.editor,f=this.getModel(_);return f?this._languageFeaturesService.documentSymbolProvider.has(f)?this.doProvideWithEditorSymbols(r,f,d,u):this.doProvideWithoutEditorSymbols(r,f,d,u):b.Disposable.None}doProvideWithoutEditorSymbols(r,d,u,_){const f=new b.DisposableStore;return this.provideLabelPick(u,(0,i.localize)(1,null)),Ee(this,void 0,void 0,function*(){!(yield this.waitForLanguageSymbolRegistry(d,f))||_.isCancellationRequested||f.add(this.doProvideWithEditorSymbols(r,d,u,_))}),f}provideLabelPick(r,d){r.items=[{label:d,index:0,kind:14}],r.ariaLabel=d}waitForLanguageSymbolRegistry(r,d){return Ee(this,void 0,void 0,function*(){if(this._languageFeaturesService.documentSymbolProvider.has(r))return!0;const u=new S.DeferredPromise,_=d.add(this._languageFeaturesService.documentSymbolProvider.onDidChange(()=>{this._languageFeaturesService.documentSymbolProvider.has(r)&&(_.dispose(),u.complete(!0))}));return d.add((0,b.toDisposable)(()=>u.complete(!1))),u.p})}doProvideWithEditorSymbols(r,d,u,_){var f;const v=r.editor,p=new b.DisposableStore;p.add(u.onDidAccept(T=>{const[F]=u.selectedItems;F&&F.range&&(this.gotoLocation(r,{range:F.range.selection,keyMods:u.keyMods,preserveFocus:T.inBackground}),T.inBackground||u.hide())})),p.add(u.onDidTriggerItemButton(({item:T})=>{T&&T.range&&(this.gotoLocation(r,{range:T.range.selection,keyMods:u.keyMods,forceSideBySide:!0}),u.hide())}));const L=this.getDocumentSymbols(d,_);let E;const I=T=>Ee(this,void 0,void 0,function*(){E?.dispose(!0),u.busy=!1,E=new k.CancellationTokenSource(_),u.busy=!0;try{const F=(0,w.prepareQuery)(u.value.substr(ui.PREFIX.length).trim()),R=yield this.doGetSymbolPicks(L,F,void 0,E.token);if(_.isCancellationRequested)return;if(R.length>0){if(u.items=R,T&&F.original.length===0){const M=(0,a.findLast)(R,N=>Boolean(N.type!=="separator"&&N.range&&g.Range.containsPosition(N.range.decoration,T)));M&&(u.activeItems=[M])}}else F.original.length>0?this.provideLabelPick(u,(0,i.localize)(2,null)):this.provideLabelPick(u,(0,i.localize)(3,null))}finally{_.isCancellationRequested||(u.busy=!1)}});return p.add(u.onDidChangeValue(()=>I(void 0))),I((f=v.getSelection())===null||f===void 0?void 0:f.getPosition()),p.add(u.onDidChangeActive(()=>{const[T]=u.activeItems;T&&T.range&&(v.revealRangeInCenter(T.range.selection,0),this.addDecorations(v,T.range.decoration))})),p}doGetSymbolPicks(r,d,u,_){var f,v;return Ee(this,void 0,void 0,function*(){const p=yield r;if(_.isCancellationRequested)return[];const L=d.original.indexOf(ui.SCOPE_PREFIX)===0,E=L?1:0;let I,T;d.values&&d.values.length>1?(I=(0,w.pieceToQuery)(d.values[0]),T=(0,w.pieceToQuery)(d.values.slice(1))):I=d;let F;const R=(v=(f=this.options)===null||f===void 0?void 0:f.openSideBySideDirection)===null||v===void 0?void 0:v.call(f);R&&(F=[{iconClass:R==="right"?D.ThemeIcon.asClassName(y.Codicon.splitHorizontal):D.ThemeIcon.asClassName(y.Codicon.splitVertical),tooltip:R==="right"?(0,i.localize)(4,null):(0,i.localize)(5,null)}]);const M=[];for(let P=0;P<p.length;P++){const x=p[P],W=(0,C.trim)(x.name),U=`$(${m.SymbolKinds.toIcon(x.kind).id}) ${W}`,O=U.length-W.length;let $=x.containerName;u?.extraContainerLabel&&($?$=`${u.extraContainerLabel} \u2022 ${$}`:$=u.extraContainerLabel);let Q,se,le,te;if(d.original.length>E){let H=!1;if(I!==d&&([Q,se]=(0,w.scoreFuzzy2)(U,Object.assign(Object.assign({},d),{values:void 0}),E,O),typeof Q=="number"&&(H=!0)),typeof Q!="number"&&([Q,se]=(0,w.scoreFuzzy2)(U,I,E,O),typeof Q!="number"))continue;if(!H&&T){if($&&T.original.length>0&&([le,te]=(0,w.scoreFuzzy2)($,T)),typeof le!="number")continue;typeof Q=="number"&&(Q+=le)}}const re=x.tags&&x.tags.indexOf(1)>=0;M.push({index:P,kind:x.kind,score:Q,label:U,ariaLabel:W,description:$,highlights:re?void 0:{label:se,description:te},range:{selection:g.Range.collapseToStart(x.selectionRange),decoration:x.range},strikethrough:re,buttons:F})}const N=M.sort((P,x)=>L?this.compareByKindAndScore(P,x):this.compareByScore(P,x));let A=[];if(L){let U=function(){x&&typeof P=="number"&&W>0&&(x.label=(0,C.format)(o[P]||h,W))},P,x,W=0;for(const O of N)P!==O.kind?(U(),P=O.kind,W=1,x={type:"separator"},A.push(x)):W++,A.push(O);U()}else N.length>0&&(A=[{label:(0,i.localize)(6,null,M.length),type:"separator"},...N]);return A})}compareByScore(r,d){if(typeof r.score!="number"&&typeof d.score=="number")return 1;if(typeof r.score=="number"&&typeof d.score!="number")return-1;if(typeof r.score=="number"&&typeof d.score=="number"){if(r.score>d.score)return-1;if(r.score<d.score)return 1}return r.index<d.index?-1:r.index>d.index?1:0}compareByKindAndScore(r,d){const u=o[r.kind]||h,_=o[d.kind]||h,f=u.localeCompare(_);return f===0?this.compareByScore(r,d):f}getDocumentSymbols(r,d){return Ee(this,void 0,void 0,function*(){const u=yield this._outlineModelService.getOrCreate(r,d);return d.isCancellationRequested?[]:u.asListOfDocumentSymbols()})}};c.PREFIX="@",c.SCOPE_PREFIX=":",c.PREFIX_BY_CATEGORY=`${c.PREFIX}${c.SCOPE_PREFIX}`,c=Ne([fe(0,s.ILanguageFeaturesService),fe(1,n.IOutlineModelService)],c),e.AbstractGotoSymbolQuickAccessProvider=c;const h=(0,i.localize)(7,null),o={[5]:(0,i.localize)(8,null),[11]:(0,i.localize)(9,null),[8]:(0,i.localize)(10,null),[12]:(0,i.localize)(11,null),[4]:(0,i.localize)(12,null),[22]:(0,i.localize)(13,null),[23]:(0,i.localize)(14,null),[24]:(0,i.localize)(15,null),[10]:(0,i.localize)(16,null),[2]:(0,i.localize)(17,null),[3]:(0,i.localize)(18,null),[25]:(0,i.localize)(19,null),[1]:(0,i.localize)(20,null),[6]:(0,i.localize)(21,null),[9]:(0,i.localize)(22,null),[21]:(0,i.localize)(23,null),[14]:(0,i.localize)(24,null),[0]:(0,i.localize)(25,null),[17]:(0,i.localize)(26,null),[15]:(0,i.localize)(27,null),[16]:(0,i.localize)(28,null),[18]:(0,i.localize)(29,null),[19]:(0,i.localize)(30,null),[7]:(0,i.localize)(31,null),[13]:(0,i.localize)(32,null)}}),define(X[810],J([1,0,2,13,649,14,36,31,24,430]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.RenameInputField=e.CONTEXT_RENAME_INPUT_VISIBLE=void 0,e.CONTEXT_RENAME_INPUT_VISIBLE=new D.RawContextKey("renameInputVisible",!1,(0,y.localize)(0,null));let g=class{constructor(n,t,i,s,a){this._editor=n,this._acceptKeybindings=t,this._themeService=i,this._keybindingService=s,this._disposables=new S.DisposableStore,this.allowEditorOverflow=!0,this._visibleContextKey=e.CONTEXT_RENAME_INPUT_VISIBLE.bindTo(a),this._editor.addContentWidget(this),this._disposables.add(this._editor.onDidChangeConfiguration(c=>{c.hasChanged(48)&&this._updateFont()})),this._disposables.add(i.onDidColorThemeChange(this._updateStyles,this))}dispose(){this._disposables.dispose(),this._editor.removeContentWidget(this)}getId(){return"__renameInputWidget"}getDomNode(){return this._domNode||(this._domNode=document.createElement("div"),this._domNode.className="monaco-editor rename-box",this._input=document.createElement("input"),this._input.className="rename-input",this._input.variant="text",this._input.setAttribute("aria-label",(0,y.localize)(1,null)),this._domNode.appendChild(this._input),this._label=document.createElement("div"),this._label.className="rename-label",this._domNode.appendChild(this._label),this._updateFont(),this._updateStyles(this._themeService.getColorTheme())),this._domNode}_updateStyles(n){var t,i,s,a;if(!this._input||!this._domNode)return;const c=n.getColor(b.widgetShadow),h=n.getColor(b.widgetBorder);this._domNode.style.backgroundColor=String((t=n.getColor(b.editorWidgetBackground))!==null&&t!==void 0?t:""),this._domNode.style.boxShadow=c?` 0 0 8px 2px ${c}`:"",this._domNode.style.border=h?`1px solid ${h}`:"",this._domNode.style.color=String((i=n.getColor(b.inputForeground))!==null&&i!==void 0?i:""),this._input.style.backgroundColor=String((s=n.getColor(b.inputBackground))!==null&&s!==void 0?s:"");const o=n.getColor(b.inputBorder);this._input.style.borderWidth=o?"1px":"0px",this._input.style.borderStyle=o?"solid":"none",this._input.style.borderColor=(a=o?.toString())!==null&&a!==void 0?a:"none"}_updateFont(){if(!this._input||!this._label)return;const n=this._editor.getOption(48);this._input.style.fontFamily=n.fontFamily,this._input.style.fontWeight=n.fontWeight,this._input.style.fontSize=`${n.fontSize}px`,this._label.style.fontSize=`${n.fontSize*.8}px`}getPosition(){return this._visible?{position:this._position,preference:[2,1]}:null}beforeRender(){var n,t;const[i,s]=this._acceptKeybindings;return this._label.innerText=(0,y.localize)(2,null,(n=this._keybindingService.lookupKeybinding(i))===null||n===void 0?void 0:n.getLabel(),(t=this._keybindingService.lookupKeybinding(s))===null||t===void 0?void 0:t.getLabel()),null}afterRender(n){n||this.cancelInput(!0)}acceptInput(n){var t;(t=this._currentAcceptInput)===null||t===void 0||t.call(this,n)}cancelInput(n){var t;(t=this._currentCancelInput)===null||t===void 0||t.call(this,n)}getInput(n,t,i,s,a,c){this._domNode.classList.toggle("preview",a),this._position=new k.Position(n.startLineNumber,n.startColumn),this._input.value=t,this._input.setAttribute("selectionStart",i.toString()),this._input.setAttribute("selectionEnd",s.toString()),this._input.size=Math.max((n.endColumn-n.startColumn)*1.1,20);const h=new S.DisposableStore;return new Promise(o=>{this._currentCancelInput=l=>(this._currentAcceptInput=void 0,this._currentCancelInput=void 0,o(l),!0),this._currentAcceptInput=l=>{if(this._input.value.trim().length===0||this._input.value===t){this.cancelInput(!0);return}this._currentAcceptInput=void 0,this._currentCancelInput=void 0,o({newName:this._input.value,wantsPreview:a&&l})},h.add(c.onCancellationRequested(()=>this.cancelInput(!0))),h.add(this._editor.onDidBlurEditorWidget(()=>this.cancelInput(!document.hasFocus()))),this._show()}).finally(()=>{h.dispose(),this._hide()})}_show(){this._editor.revealLineInCenterIfOutsideViewport(this._position.lineNumber,0),this._visible=!0,this._visibleContextKey.set(!0),this._editor.layoutContentWidget(this),setTimeout(()=>{this._input.focus(),this._input.setSelectionRange(parseInt(this._input.getAttribute("selectionStart")),parseInt(this._input.getAttribute("selectionEnd")))},100)}_hide(){this._visible=!1,this._visibleContextKey.reset(),this._editor.layoutContentWidget(this)}};g=Ne([fe(2,C.IThemeService),fe(3,w.IKeybindingService),fe(4,D.IContextKeyService)],g),e.RenameInputField=g}),define(X[811],J([1,0,50,12,21,11,2,18,20,97,15,147,30,13,5,22,176,150,648,90,14,8,62,43,71,34,810,19]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a,c,h,o,l,r,d,u,_,f,v,p,L){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.RenameAction=e.rename=void 0;class E{constructor(N,A,P){this.model=N,this.position=A,this._providerRenameIdx=0,this._providers=P.ordered(N)}hasProvider(){return this._providers.length>0}resolveRenameLocation(N){return Ee(this,void 0,void 0,function*(){const A=[];for(this._providerRenameIdx=0;this._providerRenameIdx<this._providers.length;this._providerRenameIdx++){const x=this._providers[this._providerRenameIdx];if(!x.resolveRenameLocation)break;const W=yield x.resolveRenameLocation(this.model,this.position,N);if(!!W){if(W.rejectReason){A.push(W.rejectReason);continue}return W}}const P=this.model.getWordAtPosition(this.position);return P?{range:new s.Range(this.position.lineNumber,P.startColumn,this.position.lineNumber,P.endColumn),text:P.word,rejectReason:A.length>0?A.join(`
 `):void 0}:{range:s.Range.fromPositions(this.position),text:"",rejectReason:A.length>0?A.join(`
 `):void 0}})}provideRenameEdits(N,A){return Ee(this,void 0,void 0,function*(){return this._provideRenameEdits(N,this._providerRenameIdx,[],A)})}_provideRenameEdits(N,A,P,x){return Ee(this,void 0,void 0,function*(){const W=this._providers[A];if(!W)return{edits:[],rejectReason:P.join(`
 `)};const U=yield W.provideRenameEdits(this.model,this.position,N,x);if(U){if(U.rejectReason)return this._provideRenameEdits(N,A+1,P.concat(U.rejectReason),x)}else return this._provideRenameEdits(N,A+1,P.concat(o.localize(0,null)),x);return U})}}function I(M,N,A,P){return Ee(this,void 0,void 0,function*(){const x=new E(N,A,M),W=yield x.resolveRenameLocation(y.CancellationToken.None);return W?.rejectReason?{edits:[],rejectReason:W.rejectReason}:x.provideRenameEdits(P,y.CancellationToken.None)})}e.rename=I;let T=class $i{static get(N){return N.getContribution($i.ID)}constructor(N,A,P,x,W,U,O,$){this.editor=N,this._instaService=A,this._notificationService=P,this._bulkEditService=x,this._progressService=W,this._logService=U,this._configService=O,this._languageFeaturesService=$,this._disposableStore=new w.DisposableStore,this._cts=new y.CancellationTokenSource,this._renameInputField=this._disposableStore.add(this._instaService.createInstance(p.RenameInputField,this.editor,["acceptRenameInput","acceptRenameInputWithPreview"]))}dispose(){this._disposableStore.dispose(),this._cts.dispose(!0)}run(){var N,A;return Ee(this,void 0,void 0,function*(){if(this._cts.dispose(!0),!this.editor.hasModel())return;const P=this.editor.getPosition(),x=new E(this.editor.getModel(),P,this._languageFeaturesService.renameProvider);if(!x.hasProvider())return;this._cts=new g.EditorStateCancellationTokenSource(this.editor,5);let W;try{const te=x.resolveRenameLocation(this._cts.token);this._progressService.showWhile(te,250),W=yield te}catch(te){(N=h.MessageController.get(this.editor))===null||N===void 0||N.showMessage(te||o.localize(1,null),P);return}if(!W)return;if(W.rejectReason){(A=h.MessageController.get(this.editor))===null||A===void 0||A.showMessage(W.rejectReason,P);return}if(this._cts.token.isCancellationRequested){this._cts.dispose();return}this._cts.dispose(),this._cts=new g.EditorStateCancellationTokenSource(this.editor,5,W.range);const U=this.editor.getSelection();let O=0,$=W.text.length;!s.Range.isEmpty(U)&&!s.Range.spansMultipleLines(U)&&s.Range.containsRange(W.range,U)&&(O=Math.max(0,U.startColumn-W.range.startColumn),$=Math.min(W.range.endColumn,U.endColumn)-W.range.startColumn);const Q=this._bulkEditService.hasPreviewHandler()&&this._configService.getValue(this.editor.getModel().uri,"editor.rename.enablePreview"),se=yield this._renameInputField.getInput(W.range,W.text,O,$,Q,this._cts.token);if(typeof se=="boolean"){se&&this.editor.focus();return}this.editor.focus();const le=(0,k.raceCancellation)(x.provideRenameEdits(se.newName,this._cts.token),this._cts.token).then(te=>Ee(this,void 0,void 0,function*(){if(!(!te||!this.editor.hasModel())){if(te.rejectReason){this._notificationService.info(te.rejectReason);return}this.editor.setSelection(s.Range.fromPositions(this.editor.getSelection().getPosition())),this._bulkEditService.apply(te,{editor:this.editor,showPreview:se.wantsPreview,label:o.localize(2,null,W?.text,se.newName),code:"undoredo.rename",quotableLabel:o.localize(3,null,W?.text,se.newName),respectAutoSaveConfig:!0}).then(re=>{re.ariaSummary&&(0,S.alert)(o.localize(4,null,W.text,se.newName,re.ariaSummary))}).catch(re=>{this._notificationService.error(o.localize(5,null)),this._logService.error(re)})}}),te=>{this._notificationService.error(o.localize(6,null)),this._logService.error(te)});return this._progressService.showWhile(le,250),le})}acceptRenameInput(N){this._renameInputField.acceptInput(N)}cancelRenameInput(){this._renameInputField.cancelInput(!0)}};T.ID="editor.contrib.renameController",T=Ne([fe(1,d.IInstantiationService),fe(2,_.INotificationService),fe(3,n.IBulkEditService),fe(4,f.IEditorProgressService),fe(5,u.ILogService),fe(6,c.ITextResourceConfigurationService),fe(7,L.ILanguageFeaturesService)],T);class F extends m.EditorAction{constructor(){super({id:"editor.action.rename",label:o.localize(7,null),alias:"Rename Symbol",precondition:r.ContextKeyExpr.and(a.EditorContextKeys.writable,a.EditorContextKeys.hasRenameProvider),kbOpts:{kbExpr:a.EditorContextKeys.editorTextFocus,primary:60,weight:100},contextMenuOpts:{group:"1_modification",order:1.1}})}runCommand(N,A){const P=N.get(t.ICodeEditorService),[x,W]=Array.isArray(A)&&A||[void 0,void 0];return C.URI.isUri(x)&&i.Position.isIPosition(W)?P.openCodeEditor({resource:x},P.getActiveCodeEditor()).then(U=>{!U||(U.setPosition(W),U.invokeWithinContext(O=>(this.reportTelemetry(O,U),this.run(O,U))))},D.onUnexpectedError):super.runCommand(N,A)}run(N,A){const P=T.get(A);return P?P.run():Promise.resolve()}}e.RenameAction=F,(0,m.registerEditorContribution)(T.ID,T,4),(0,m.registerEditorAction)(F);const R=m.EditorCommand.bindToContribution(T.get);(0,m.registerEditorCommand)(new R({id:"acceptRenameInput",precondition:p.CONTEXT_RENAME_INPUT_VISIBLE,handler:M=>M.acceptRenameInput(!1),kbOpts:{weight:100+99,kbExpr:r.ContextKeyExpr.and(a.EditorContextKeys.focus,r.ContextKeyExpr.not("isComposing")),primary:3}})),(0,m.registerEditorCommand)(new R({id:"acceptRenameInputWithPreview",precondition:r.ContextKeyExpr.and(p.CONTEXT_RENAME_INPUT_VISIBLE,r.ContextKeyExpr.has("config.editor.rename.enablePreview")),handler:M=>M.acceptRenameInput(!0),kbOpts:{weight:100+99,kbExpr:r.ContextKeyExpr.and(a.EditorContextKeys.focus,r.ContextKeyExpr.not("isComposing")),primary:1024+3}})),(0,m.registerEditorCommand)(new R({id:"cancelRenameInput",precondition:p.CONTEXT_RENAME_INPUT_VISIBLE,handler:M=>M.cancelRenameInput(),kbOpts:{weight:100+99,kbExpr:a.EditorContextKeys.focus,primary:9,secondary:[1033]}})),(0,m.registerModelAndPositionCommand)("_executeDocumentRenameProvider",function(M,N,A,...P){const[x]=P;(0,b.assertType)(typeof x=="string");const{renameProvider:W}=M.get(L.ILanguageFeaturesService);return I(W,N,A,x)}),(0,m.registerModelAndPositionCommand)("_executePrepareRename",function(M,N,A){return Ee(this,void 0,void 0,function*(){const{renameProvider:P}=M.get(L.ILanguageFeaturesService),W=yield new E(N,A,P).resolveRenameLocation(y.CancellationToken.None);if(W?.rejectReason)throw new Error(W.rejectReason);return W})}),v.Registry.as(l.Extensions.Configuration).registerConfiguration({id:"editor",properties:{"editor.rename.enablePreview":{scope:5,description:o.localize(8,null),default:!0,type:"boolean"}}})}),define(X[812],J([1,0,2,11,53,27,12,21,24,237,309,70,60,19,225,258,275]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a,c){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.DocumentSemanticTokensFeature=void 0;let h=class extends S.Disposable{constructor(d,u,_,f,v,p){super(),this._watchers=Object.create(null);const L=T=>{this._watchers[T.uri.toString()]=new o(T,d,_,v,p)},E=(T,F)=>{F.dispose(),delete this._watchers[T.uri.toString()]},I=()=>{for(const T of u.getModels()){const F=this._watchers[T.uri.toString()];(0,c.isSemanticColoringEnabled)(T,_,f)?F||L(T):F&&E(T,F)}};this._register(u.onModelAdded(T=>{(0,c.isSemanticColoringEnabled)(T,_,f)&&L(T)})),this._register(u.onModelRemoved(T=>{const F=this._watchers[T.uri.toString()];F&&E(T,F)})),this._register(f.onDidChangeConfiguration(T=>{T.affectsConfiguration(c.SEMANTIC_HIGHLIGHTING_SETTING_ID)&&I()})),this._register(_.onDidColorThemeChange(I))}dispose(){for(const d of Object.values(this._watchers))d.dispose();super.dispose()}};h=Ne([fe(0,s.ISemanticTokensStylingService),fe(1,y.IModelService),fe(2,C.IThemeService),fe(3,D.IConfigurationService),fe(4,n.ILanguageFeatureDebounceService),fe(5,i.ILanguageFeaturesService)],h),e.DocumentSemanticTokensFeature=h;let o=class Nt extends S.Disposable{constructor(d,u,_,f,v){super(),this._semanticTokensStylingService=u,this._isDisposed=!1,this._model=d,this._provider=v.documentSemanticTokensProvider,this._debounceInformation=f.for(this._provider,"DocumentSemanticTokens",{min:Nt.REQUEST_MIN_DELAY,max:Nt.REQUEST_MAX_DELAY}),this._fetchDocumentSemanticTokens=this._register(new w.RunOnceScheduler(()=>this._fetchDocumentSemanticTokensNow(),Nt.REQUEST_MIN_DELAY)),this._currentDocumentResponse=null,this._currentDocumentRequestCancellationTokenSource=null,this._documentProvidersChangeListeners=[],this._providersChangedDuringRequest=!1,this._register(this._model.onDidChangeContent(()=>{this._fetchDocumentSemanticTokens.isScheduled()||this._fetchDocumentSemanticTokens.schedule(this._debounceInformation.get(this._model))})),this._register(this._model.onDidChangeLanguage(()=>{this._currentDocumentResponse&&(this._currentDocumentResponse.dispose(),this._currentDocumentResponse=null),this._currentDocumentRequestCancellationTokenSource&&(this._currentDocumentRequestCancellationTokenSource.cancel(),this._currentDocumentRequestCancellationTokenSource=null),this._setDocumentSemanticTokens(null,null,null,[]),this._fetchDocumentSemanticTokens.schedule(0)}));const p=()=>{(0,S.dispose)(this._documentProvidersChangeListeners),this._documentProvidersChangeListeners=[];for(const L of this._provider.all(d))typeof L.onDidChange=="function"&&this._documentProvidersChangeListeners.push(L.onDidChange(()=>{if(this._currentDocumentRequestCancellationTokenSource){this._providersChangedDuringRequest=!0;return}this._fetchDocumentSemanticTokens.schedule(0)}))};p(),this._register(this._provider.onDidChange(()=>{p(),this._fetchDocumentSemanticTokens.schedule(this._debounceInformation.get(this._model))})),this._register(_.onDidColorThemeChange(L=>{this._setDocumentSemanticTokens(null,null,null,[]),this._fetchDocumentSemanticTokens.schedule(this._debounceInformation.get(this._model))})),this._fetchDocumentSemanticTokens.schedule(0)}dispose(){this._currentDocumentResponse&&(this._currentDocumentResponse.dispose(),this._currentDocumentResponse=null),this._currentDocumentRequestCancellationTokenSource&&(this._currentDocumentRequestCancellationTokenSource.cancel(),this._currentDocumentRequestCancellationTokenSource=null),this._setDocumentSemanticTokens(null,null,null,[]),this._isDisposed=!0,super.dispose()}_fetchDocumentSemanticTokensNow(){if(this._currentDocumentRequestCancellationTokenSource)return;if(!(0,m.hasDocumentSemanticTokensProvider)(this._provider,this._model)){this._currentDocumentResponse&&this._model.tokenization.setSemanticTokens(null,!1);return}const d=new b.CancellationTokenSource,u=this._currentDocumentResponse?this._currentDocumentResponse.provider:null,_=this._currentDocumentResponse&&this._currentDocumentResponse.resultId||null,f=(0,m.getDocumentSemanticTokens)(this._provider,this._model,u,_,d.token);this._currentDocumentRequestCancellationTokenSource=d,this._providersChangedDuringRequest=!1;const v=[],p=this._model.onDidChangeContent(E=>{v.push(E)}),L=new t.StopWatch(!1);f.then(E=>{if(this._debounceInformation.update(this._model,L.elapsed()),this._currentDocumentRequestCancellationTokenSource=null,p.dispose(),!E)this._setDocumentSemanticTokens(null,null,null,v);else{const{provider:I,tokens:T}=E,F=this._semanticTokensStylingService.getStyling(I);this._setDocumentSemanticTokens(I,T||null,F,v)}},E=>{E&&(k.isCancellationError(E)||typeof E.message=="string"&&E.message.indexOf("busy")!==-1)||k.onUnexpectedError(E),this._currentDocumentRequestCancellationTokenSource=null,p.dispose(),(v.length>0||this._providersChangedDuringRequest)&&(this._fetchDocumentSemanticTokens.isScheduled()||this._fetchDocumentSemanticTokens.schedule(this._debounceInformation.get(this._model)))})}static _copy(d,u,_,f,v){v=Math.min(v,_.length-f,d.length-u);for(let p=0;p<v;p++)_[f+p]=d[u+p]}_setDocumentSemanticTokens(d,u,_,f){const v=this._currentDocumentResponse,p=()=>{(f.length>0||this._providersChangedDuringRequest)&&!this._fetchDocumentSemanticTokens.isScheduled()&&this._fetchDocumentSemanticTokens.schedule(this._debounceInformation.get(this._model))};if(this._currentDocumentResponse&&(this._currentDocumentResponse.dispose(),this._currentDocumentResponse=null),this._isDisposed){d&&u&&d.releaseDocumentSemanticTokens(u.resultId);return}if(!d||!_){this._model.tokenization.setSemanticTokens(null,!1);return}if(!u){this._model.tokenization.setSemanticTokens(null,!0),p();return}if((0,m.isSemanticTokensEdits)(u)){if(!v){this._model.tokenization.setSemanticTokens(null,!0);return}if(u.edits.length===0)u={resultId:u.resultId,data:v.data};else{let L=0;for(const R of u.edits)L+=(R.data?R.data.length:0)-R.deleteCount;const E=v.data,I=new Uint32Array(E.length+L);let T=E.length,F=I.length;for(let R=u.edits.length-1;R>=0;R--){const M=u.edits[R];if(M.start>E.length){_.warnInvalidEditStart(v.resultId,u.resultId,R,M.start,E.length),this._model.tokenization.setSemanticTokens(null,!0);return}const N=T-(M.start+M.deleteCount);N>0&&(Nt._copy(E,T-N,I,F-N,N),F-=N),M.data&&(Nt._copy(M.data,0,I,F-M.data.length,M.data.length),F-=M.data.length),T=M.start}T>0&&Nt._copy(E,0,I,0,T),u={resultId:u.resultId,data:I}}}if((0,m.isSemanticTokens)(u)){this._currentDocumentResponse=new l(d,u.resultId,u.data);const L=(0,g.toMultilineTokens2)(u,_,this._model.getLanguageId());if(f.length>0)for(const E of f)for(const I of L)for(const T of E.changes)I.applyEdit(T.range,T.text);this._model.tokenization.setSemanticTokens(L,!0)}else this._model.tokenization.setSemanticTokens(null,!0);p()}};o.REQUEST_MIN_DELAY=300,o.REQUEST_MAX_DELAY=2e3,o=Ne([fe(1,s.ISemanticTokensStylingService),fe(2,C.IThemeService),fe(3,n.ILanguageFeatureDebounceService),fe(4,i.ILanguageFeaturesService)],o);class l{constructor(d,u,_){this.provider=d,this.resultId=u,this.data=_}dispose(){this.provider.releaseDocumentSemanticTokens(this.resultId)}}(0,a.registerEditorFeature)(h)}),define(X[813],J([1,0,12,2,15,309,275,237,27,24,70,60,19,225]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ViewportSemanticTokensContribution=void 0;let s=class extends k.Disposable{constructor(c,h,o,l,r,d){super(),this._semanticTokensStylingService=h,this._themeService=o,this._configurationService=l,this._editor=c,this._provider=d.documentRangeSemanticTokensProvider,this._debounceInformation=r.for(this._provider,"DocumentRangeSemanticTokens",{min:100,max:500}),this._tokenizeViewport=this._register(new S.RunOnceScheduler(()=>this._tokenizeViewportNow(),100)),this._outstandingRequests=[];const u=()=>{this._editor.hasModel()&&this._tokenizeViewport.schedule(this._debounceInformation.get(this._editor.getModel()))};this._register(this._editor.onDidScrollChange(()=>{u()})),this._register(this._editor.onDidChangeModel(()=>{this._cancelAll(),u()})),this._register(this._editor.onDidChangeModelContent(_=>{this._cancelAll(),u()})),this._register(this._provider.onDidChange(()=>{this._cancelAll(),u()})),this._register(this._configurationService.onDidChangeConfiguration(_=>{_.affectsConfiguration(w.SEMANTIC_HIGHLIGHTING_SETTING_ID)&&(this._cancelAll(),u())})),this._register(this._themeService.onDidColorThemeChange(()=>{this._cancelAll(),u()})),u()}_cancelAll(){for(const c of this._outstandingRequests)c.cancel();this._outstandingRequests=[]}_removeOutstandingRequest(c){for(let h=0,o=this._outstandingRequests.length;h<o;h++)if(this._outstandingRequests[h]===c){this._outstandingRequests.splice(h,1);return}}_tokenizeViewportNow(){if(!this._editor.hasModel())return;const c=this._editor.getModel();if(c.tokenization.hasCompleteSemanticTokens())return;if(!(0,w.isSemanticColoringEnabled)(c,this._themeService,this._configurationService)){c.tokenization.hasSomeSemanticTokens()&&c.tokenization.setSemanticTokens(null,!1);return}if(!(0,D.hasDocumentRangeSemanticTokensProvider)(this._provider,c)){c.tokenization.hasSomeSemanticTokens()&&c.tokenization.setSemanticTokens(null,!1);return}const h=this._editor.getVisibleRangesPlusViewportAboveBelow();this._outstandingRequests=this._outstandingRequests.concat(h.map(o=>this._requestRange(c,o)))}_requestRange(c,h){const o=c.getVersionId(),l=(0,S.createCancelablePromise)(d=>Promise.resolve((0,D.getDocumentRangeSemanticTokens)(this._provider,c,h,d))),r=new n.StopWatch(!1);return l.then(d=>{if(this._debounceInformation.update(c,r.elapsed()),!d||!d.tokens||c.isDisposed()||c.getVersionId()!==o)return;const{provider:u,tokens:_}=d,f=this._semanticTokensStylingService.getStyling(u);c.tokenization.setPartialSemanticTokens(h,(0,b.toMultilineTokens2)(_,f,c.getLanguageId()))}).then(()=>this._removeOutstandingRequest(l),()=>this._removeOutstandingRequest(l)),l}};s.ID="editor.contrib.viewportSemanticTokens",s=Ne([fe(1,i.ISemanticTokensStylingService),fe(2,g.IThemeService),fe(3,C.IConfigurationService),fe(4,m.ILanguageFeatureDebounceService),fe(5,t.ILanguageFeaturesService)],s),e.ViewportSemanticTokensContribution=s,(0,y.registerEditorContribution)(s.ID,s,1)}),define(X[814],J([1,0,7,213,29,32,6,63,2,20,26,731,53,38,658,306,81,24,318]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a,c,h,o){"use strict";var l;Object.defineProperty(e,"__esModule",{value:!0}),e.ItemRenderer=e.getAriaId=void 0;function r(v){return`suggest-aria-id:${v}`}e.getAriaId=r;const d=(0,c.registerIcon)("suggest-more-info",y.Codicon.chevronRight,s.localize(0,null)),u=new(l=class Qt{extract(p,L){if(p.textLabel.match(Qt._regexStrict))return L[0]=p.textLabel,!0;if(p.completion.detail&&p.completion.detail.match(Qt._regexStrict))return L[0]=p.completion.detail,!0;if(typeof p.completion.documentation=="string"){const E=Qt._regexRelaxed.exec(p.completion.documentation);if(E&&(E.index===0||E.index+E[0].length===p.completion.documentation.length))return L[0]=E[0],!0}return!1}},l._regexRelaxed=/(#([\da-fA-F]{3}){1,2}|(rgb|hsl)a\(\s*(\d{1,3}%?\s*,\s*){3}(1|0?\.\d+)\)|(rgb|hsl)\(\s*\d{1,3}%?(\s*,\s*\d{1,3}%?){2}\s*\))/,l._regexStrict=new RegExp(`^${l._regexRelaxed.source}$`,"i"),l);let _=class{constructor(p,L,E,I){this._editor=p,this._modelService=L,this._languageService=E,this._themeService=I,this._onDidToggleDetails=new w.Emitter,this.onDidToggleDetails=this._onDidToggleDetails.event,this.templateId="suggestion"}dispose(){this._onDidToggleDetails.dispose()}renderTemplate(p){const L=new C.DisposableStore,E=p;E.classList.add("show-file-icons");const I=(0,S.append)(p,(0,S.$)(".icon")),T=(0,S.append)(I,(0,S.$)("span.colorspan")),F=(0,S.append)(p,(0,S.$)(".contents")),R=(0,S.append)(F,(0,S.$)(".main")),M=(0,S.append)(R,(0,S.$)(".icon-label.codicon")),N=(0,S.append)(R,(0,S.$)("span.left")),A=(0,S.append)(R,(0,S.$)("span.right")),P=new k.IconLabel(N,{supportHighlights:!0,supportIcons:!0});L.add(P);const x=(0,S.append)(N,(0,S.$)("span.signature-label")),W=(0,S.append)(N,(0,S.$)("span.qualifier-label")),U=(0,S.append)(A,(0,S.$)("span.details-label")),O=(0,S.append)(A,(0,S.$)("span.readMore"+D.ThemeIcon.asCSSSelector(d)));O.title=s.localize(1,null);const $=()=>{const Q=this._editor.getOptions(),se=Q.get(48),le=se.getMassagedFontFamily(),te=se.fontFeatureSettings,re=Q.get(114)||se.fontSize,H=Q.get(115)||se.lineHeight,B=se.fontWeight,q=se.letterSpacing,G=`${re}px`,Y=`${H}px`,ne=`${q}px`;E.style.fontSize=G,E.style.fontWeight=B,E.style.letterSpacing=ne,R.style.fontFamily=le,R.style.fontFeatureSettings=te,R.style.lineHeight=Y,I.style.height=Y,I.style.width=Y,O.style.height=Y,O.style.width=Y};return $(),L.add(this._editor.onDidChangeConfiguration(Q=>{(Q.hasChanged(48)||Q.hasChanged(114)||Q.hasChanged(115))&&$()})),{root:E,left:N,right:A,icon:I,colorspan:T,iconLabel:P,iconContainer:M,parametersLabel:x,qualifierLabel:W,detailsLabel:U,readMore:O,disposables:L}}renderElement(p,L,E){const{completion:I}=p;E.root.id=r(L),E.colorspan.style.backgroundColor="";const T={labelEscapeNewLines:!0,matches:(0,b.createMatches)(p.score)},F=[];if(I.kind===19&&u.extract(p,F))E.icon.className="icon customcolor",E.iconContainer.className="icon hide",E.colorspan.style.backgroundColor=F[0];else if(I.kind===20&&this._themeService.getFileIconTheme().hasFileIcons){E.icon.className="icon hide",E.iconContainer.className="icon hide";const R=(0,n.getIconClasses)(this._modelService,this._languageService,g.URI.from({scheme:"fake",path:p.textLabel}),a.FileKind.FILE),M=(0,n.getIconClasses)(this._modelService,this._languageService,g.URI.from({scheme:"fake",path:I.detail}),a.FileKind.FILE);T.extraClasses=R.length>M.length?R:M}else I.kind===23&&this._themeService.getFileIconTheme().hasFolderIcons?(E.icon.className="icon hide",E.iconContainer.className="icon hide",T.extraClasses=[(0,n.getIconClasses)(this._modelService,this._languageService,g.URI.from({scheme:"fake",path:p.textLabel}),a.FileKind.FOLDER),(0,n.getIconClasses)(this._modelService,this._languageService,g.URI.from({scheme:"fake",path:I.detail}),a.FileKind.FOLDER)].flat()):(E.icon.className="icon hide",E.iconContainer.className="",E.iconContainer.classList.add("suggest-icon",...D.ThemeIcon.asClassNameArray(m.CompletionItemKinds.toIcon(I.kind))));I.tags&&I.tags.indexOf(1)>=0&&(T.extraClasses=(T.extraClasses||[]).concat(["deprecated"]),T.matches=[]),E.iconLabel.setLabel(p.textLabel,void 0,T),typeof I.label=="string"?(E.parametersLabel.textContent="",E.detailsLabel.textContent=f(I.detail||""),E.root.classList.add("string-label")):(E.parametersLabel.textContent=f(I.label.detail||""),E.detailsLabel.textContent=f(I.label.description||""),E.root.classList.remove("string-label")),this._editor.getOption(113).showInlineDetails?(0,S.show)(E.detailsLabel):(0,S.hide)(E.detailsLabel),(0,o.canExpandCompletionItem)(p)?(E.right.classList.add("can-expand-details"),(0,S.show)(E.readMore),E.readMore.onmousedown=R=>{R.stopPropagation(),R.preventDefault()},E.readMore.onclick=R=>{R.stopPropagation(),R.preventDefault(),this._onDidToggleDetails.fire()}):(E.right.classList.remove("can-expand-details"),(0,S.hide)(E.readMore),E.readMore.onmousedown=null,E.readMore.onclick=null)}disposeTemplate(p){p.disposables.dispose()}};_=Ne([fe(1,t.IModelService),fe(2,i.ILanguageService),fe(3,h.IThemeService)],_),e.ItemRenderer=_;function f(v){return v.replace(/\r\n|\r|\n/g,"")}}),define(X[815],J([1,0,808,34,126,30,18,83,6,15,22,79]),function(j,e,S,k,y,D,w,b,C,g,m,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.GotoLineAction=e.StandaloneGotoLineQuickAccessProvider=void 0;let t=class extends S.AbstractGotoLineQuickAccessProvider{constructor(a){super(),this.editorService=a,this.onDidActiveTextEditorControlChange=C.Event.None}get activeTextEditorControl(){return(0,w.withNullAsUndefined)(this.editorService.getFocusedCodeEditor())}};t=Ne([fe(0,D.ICodeEditorService)],t),e.StandaloneGotoLineQuickAccessProvider=t;class i extends g.EditorAction{constructor(){super({id:i.ID,label:b.GoToLineNLS.gotoLineActionLabel,alias:"Go to Line/Column...",precondition:void 0,kbOpts:{kbExpr:m.EditorContextKeys.focus,primary:2085,mac:{primary:293},weight:100}})}run(a){a.get(n.IQuickInputService).quickAccess.show(t.PREFIX)}}i.ID="editor.action.gotoLine",e.GotoLineAction=i,(0,g.registerEditorAction)(i),k.Registry.as(y.Extensions.Quickaccess).registerQuickAccessProvider({ctor:t,prefix:t.PREFIX,helpEntries:[{description:b.GoToLineNLS.gotoLineActionLabel,commandId:i.ID}]})}),define(X[816],J([1,0,809,34,126,30,18,83,6,15,22,79,179,19,160,235]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.GotoSymbolAction=e.StandaloneGotoSymbolQuickAccessProvider=void 0;let s=class extends S.AbstractGotoSymbolQuickAccessProvider{constructor(h,o,l){super(o,l),this.editorService=h,this.onDidActiveTextEditorControlChange=C.Event.None}get activeTextEditorControl(){return(0,w.withNullAsUndefined)(this.editorService.getFocusedCodeEditor())}};s=Ne([fe(0,D.ICodeEditorService),fe(1,i.ILanguageFeaturesService),fe(2,t.IOutlineModelService)],s),e.StandaloneGotoSymbolQuickAccessProvider=s;class a extends g.EditorAction{constructor(){super({id:a.ID,label:b.QuickOutlineNLS.quickOutlineActionLabel,alias:"Go to Symbol...",precondition:m.EditorContextKeys.hasDocumentSymbolProvider,kbOpts:{kbExpr:m.EditorContextKeys.focus,primary:3117,weight:100},contextMenuOpts:{group:"navigation",order:3}})}run(h){h.get(n.IQuickInputService).quickAccess.show(S.AbstractGotoSymbolQuickAccessProvider.PREFIX,{itemActivation:n.ItemActivation.NONE})}}a.ID="editor.action.quickOutline",e.GotoSymbolAction=a,(0,g.registerEditorAction)(a),k.Registry.as(y.Extensions.Quickaccess).registerQuickAccessProvider({ctor:s,prefix:S.AbstractGotoSymbolQuickAccessProvider.PREFIX,helpEntries:[{description:b.QuickOutlineNLS.quickOutlineActionLabel,prefix:S.AbstractGotoSymbolQuickAccessProvider.PREFIX,commandId:a.ID},{description:b.QuickOutlineNLS.quickOutlineByCategoryActionLabel,prefix:S.AbstractGotoSymbolQuickAccessProvider.PREFIX_BY_CATEGORY}]})}),define(X[332],J([1,0,7,49,795,30,14,51,24]),function(j,e,S,k,y,D,w,b,C){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.StandaloneCodeEditorService=void 0;let g=class extends y.AbstractCodeEditorService{constructor(n,t){super(t),this.onCodeEditorAdd(()=>this._checkContextKey()),this.onCodeEditorRemove(()=>this._checkContextKey()),this._editorIsOpen=n.createKey("editorIsOpen",!1),this._activeCodeEditor=null,this.registerCodeEditorOpenHandler((i,s,a)=>Ee(this,void 0,void 0,function*(){return s?this.doOpenEditor(s,i):null}))}_checkContextKey(){let n=!1;for(const t of this.listCodeEditors())if(!t.isSimpleWidget){n=!0;break}this._editorIsOpen.set(n)}setActiveCodeEditor(n){this._activeCodeEditor=n}getActiveCodeEditor(){return this._activeCodeEditor}doOpenEditor(n,t){if(!this.findModel(n,t.resource)){if(t.resource){const a=t.resource.scheme;if(a===k.Schemas.http||a===k.Schemas.https)return(0,S.windowOpenNoOpener)(t.resource.toString()),n}return null}const s=t.options?t.options.selection:null;if(s)if(typeof s.endLineNumber=="number"&&typeof s.endColumn=="number")n.setSelection(s),n.revealRangeInCenter(s,1);else{const a={lineNumber:s.startLineNumber,column:s.startColumn};n.setPosition(a),n.revealPositionInCenter(a,1)}return n}findModel(n,t){const i=n.getModel();return i&&i.uri.toString()!==t.toString()?null:i}};g=Ne([fe(0,w.IContextKeyService),fe(1,C.IThemeService)],g),e.StandaloneCodeEditorService=g,(0,b.registerSingleton)(D.ICodeEditorService,g,0)}),define(X[817],J([1,0,73,31]),function(j,e,S,k){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.hc_light=e.hc_black=e.vs_dark=e.vs=void 0,e.vs={base:"vs",inherit:!1,rules:[{token:"",foreground:"000000",background:"fffffe"},{token:"invalid",foreground:"cd3131"},{token:"emphasis",fontStyle:"italic"},{token:"strong",fontStyle:"bold"},{token:"variable",foreground:"001188"},{token:"variable.predefined",foreground:"4864AA"},{token:"constant",foreground:"dd0000"},{token:"comment",foreground:"008000"},{token:"number",foreground:"098658"},{token:"number.hex",foreground:"3030c0"},{token:"regexp",foreground:"800000"},{token:"annotation",foreground:"808080"},{token:"type",foreground:"008080"},{token:"delimiter",foreground:"000000"},{token:"delimiter.html",foreground:"383838"},{token:"delimiter.xml",foreground:"0000FF"},{token:"tag",foreground:"800000"},{token:"tag.id.pug",foreground:"4F76AC"},{token:"tag.class.pug",foreground:"4F76AC"},{token:"meta.scss",foreground:"800000"},{token:"metatag",foreground:"e00000"},{token:"metatag.content.html",foreground:"FF0000"},{token:"metatag.html",foreground:"808080"},{token:"metatag.xml",foreground:"808080"},{token:"metatag.php",fontStyle:"bold"},{token:"key",foreground:"863B00"},{token:"string.key.json",foreground:"A31515"},{token:"string.value.json",foreground:"0451A5"},{token:"attribute.name",foreground:"FF0000"},{token:"attribute.value",foreground:"0451A5"},{token:"attribute.value.number",foreground:"098658"},{token:"attribute.value.unit",foreground:"098658"},{token:"attribute.value.html",foreground:"0000FF"},{token:"attribute.value.xml",foreground:"0000FF"},{token:"string",foreground:"A31515"},{token:"string.html",foreground:"0000FF"},{token:"string.sql",foreground:"FF0000"},{token:"string.yaml",foreground:"0451A5"},{token:"keyword",foreground:"0000FF"},{token:"keyword.json",foreground:"0451A5"},{token:"keyword.flow",foreground:"AF00DB"},{token:"keyword.flow.scss",foreground:"0000FF"},{token:"operator.scss",foreground:"666666"},{token:"operator.sql",foreground:"778899"},{token:"operator.swift",foreground:"666666"},{token:"predefined.sql",foreground:"C700C7"}],colors:{[k.editorBackground]:"#FFFFFE",[k.editorForeground]:"#000000",[k.editorInactiveSelection]:"#E5EBF1",[S.editorIndentGuides]:"#D3D3D3",[S.editorActiveIndentGuides]:"#939393",[k.editorSelectionHighlight]:"#ADD6FF4D"}},e.vs_dark={base:"vs-dark",inherit:!1,rules:[{token:"",foreground:"D4D4D4",background:"1E1E1E"},{token:"invalid",foreground:"f44747"},{token:"emphasis",fontStyle:"italic"},{token:"strong",fontStyle:"bold"},{token:"variable",foreground:"74B0DF"},{token:"variable.predefined",foreground:"4864AA"},{token:"variable.parameter",foreground:"9CDCFE"},{token:"constant",foreground:"569CD6"},{token:"comment",foreground:"608B4E"},{token:"number",foreground:"B5CEA8"},{token:"number.hex",foreground:"5BB498"},{token:"regexp",foreground:"B46695"},{token:"annotation",foreground:"cc6666"},{token:"type",foreground:"3DC9B0"},{token:"delimiter",foreground:"DCDCDC"},{token:"delimiter.html",foreground:"808080"},{token:"delimiter.xml",foreground:"808080"},{token:"tag",foreground:"569CD6"},{token:"tag.id.pug",foreground:"4F76AC"},{token:"tag.class.pug",foreground:"4F76AC"},{token:"meta.scss",foreground:"A79873"},{token:"meta.tag",foreground:"CE9178"},{token:"metatag",foreground:"DD6A6F"},{token:"metatag.content.html",foreground:"9CDCFE"},{token:"metatag.html",foreground:"569CD6"},{token:"metatag.xml",foreground:"569CD6"},{token:"metatag.php",fontStyle:"bold"},{token:"key",foreground:"9CDCFE"},{token:"string.key.json",foreground:"9CDCFE"},{token:"string.value.json",foreground:"CE9178"},{token:"attribute.name",foreground:"9CDCFE"},{token:"attribute.value",foreground:"CE9178"},{token:"attribute.value.number.css",foreground:"B5CEA8"},{token:"attribute.value.unit.css",foreground:"B5CEA8"},{token:"attribute.value.hex.css",foreground:"D4D4D4"},{token:"string",foreground:"CE9178"},{token:"string.sql",foreground:"FF0000"},{token:"keyword",foreground:"569CD6"},{token:"keyword.flow",foreground:"C586C0"},{token:"keyword.json",foreground:"CE9178"},{token:"keyword.flow.scss",foreground:"569CD6"},{token:"operator.scss",foreground:"909090"},{token:"operator.sql",foreground:"778899"},{token:"operator.swift",foreground:"909090"},{token:"predefined.sql",foreground:"FF00FF"}],colors:{[k.editorBackground]:"#1E1E1E",[k.editorForeground]:"#D4D4D4",[k.editorInactiveSelection]:"#3A3D41",[S.editorIndentGuides]:"#404040",[S.editorActiveIndentGuides]:"#707070",[k.editorSelectionHighlight]:"#ADD6FF26"}},e.hc_black={base:"hc-black",inherit:!1,rules:[{token:"",foreground:"FFFFFF",background:"000000"},{token:"invalid",foreground:"f44747"},{token:"emphasis",fontStyle:"italic"},{token:"strong",fontStyle:"bold"},{token:"variable",foreground:"1AEBFF"},{token:"variable.parameter",foreground:"9CDCFE"},{token:"constant",foreground:"569CD6"},{token:"comment",foreground:"608B4E"},{token:"number",foreground:"FFFFFF"},{token:"regexp",foreground:"C0C0C0"},{token:"annotation",foreground:"569CD6"},{token:"type",foreground:"3DC9B0"},{token:"delimiter",foreground:"FFFF00"},{token:"delimiter.html",foreground:"FFFF00"},{token:"tag",foreground:"569CD6"},{token:"tag.id.pug",foreground:"4F76AC"},{token:"tag.class.pug",foreground:"4F76AC"},{token:"meta",foreground:"D4D4D4"},{token:"meta.tag",foreground:"CE9178"},{token:"metatag",foreground:"569CD6"},{token:"metatag.content.html",foreground:"1AEBFF"},{token:"metatag.html",foreground:"569CD6"},{token:"metatag.xml",foreground:"569CD6"},{token:"metatag.php",fontStyle:"bold"},{token:"key",foreground:"9CDCFE"},{token:"string.key",foreground:"9CDCFE"},{token:"string.value",foreground:"CE9178"},{token:"attribute.name",foreground:"569CD6"},{token:"attribute.value",foreground:"3FF23F"},{token:"string",foreground:"CE9178"},{token:"string.sql",foreground:"FF0000"},{token:"keyword",foreground:"569CD6"},{token:"keyword.flow",foreground:"C586C0"},{token:"operator.sql",foreground:"778899"},{token:"operator.swift",foreground:"909090"},{token:"predefined.sql",foreground:"FF00FF"}],colors:{[k.editorBackground]:"#000000",[k.editorForeground]:"#FFFFFF",[S.editorIndentGuides]:"#FFFFFF",[S.editorActiveIndentGuides]:"#FFFFFF"}},e.hc_light={base:"hc-light",inherit:!1,rules:[{token:"",foreground:"292929",background:"FFFFFF"},{token:"invalid",foreground:"B5200D"},{token:"emphasis",fontStyle:"italic"},{token:"strong",fontStyle:"bold"},{token:"variable",foreground:"264F70"},{token:"variable.predefined",foreground:"4864AA"},{token:"constant",foreground:"dd0000"},{token:"comment",foreground:"008000"},{token:"number",foreground:"098658"},{token:"number.hex",foreground:"3030c0"},{token:"regexp",foreground:"800000"},{token:"annotation",foreground:"808080"},{token:"type",foreground:"008080"},{token:"delimiter",foreground:"000000"},{token:"delimiter.html",foreground:"383838"},{token:"tag",foreground:"800000"},{token:"tag.id.pug",foreground:"4F76AC"},{token:"tag.class.pug",foreground:"4F76AC"},{token:"meta.scss",foreground:"800000"},{token:"metatag",foreground:"e00000"},{token:"metatag.content.html",foreground:"B5200D"},{token:"metatag.html",foreground:"808080"},{token:"metatag.xml",foreground:"808080"},{token:"metatag.php",fontStyle:"bold"},{token:"key",foreground:"863B00"},{token:"string.key.json",foreground:"A31515"},{token:"string.value.json",foreground:"0451A5"},{token:"attribute.name",foreground:"264F78"},{token:"attribute.value",foreground:"0451A5"},{token:"string",foreground:"A31515"},{token:"string.sql",foreground:"B5200D"},{token:"keyword",foreground:"0000FF"},{token:"keyword.flow",foreground:"AF00DB"},{token:"operator.sql",foreground:"778899"},{token:"operator.swift",foreground:"666666"},{token:"predefined.sql",foreground:"C700C7"}],colors:{[k.editorBackground]:"#FFFFFF",[k.editorForeground]:"#292929",[S.editorIndentGuides]:"#292929",[S.editorActiveIndentGuides]:"#292929"}}}),define(X[333],J([1,0,7,46,37,6,26,119,474,817,34,31,24,2,91,791]),function(j,e,S,k,y,D,w,b,C,g,m,n,t,i,s,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.StandaloneThemeService=e.HC_LIGHT_THEME_NAME=e.HC_BLACK_THEME_NAME=e.VS_DARK_THEME_NAME=e.VS_LIGHT_THEME_NAME=void 0,e.VS_LIGHT_THEME_NAME="vs",e.VS_DARK_THEME_NAME="vs-dark",e.HC_BLACK_THEME_NAME="hc-black",e.HC_LIGHT_THEME_NAME="hc-light";const c=m.Registry.as(n.Extensions.ColorContribution),h=m.Registry.as(t.Extensions.ThemingContribution);class o{constructor(f,v){this.semanticHighlighting=!1,this.themeData=v;const p=v.base;f.length>0?(l(f)?this.id=f:this.id=p+" "+f,this.themeName=f):(this.id=p,this.themeName=p),this.colors=null,this.defaultColors=Object.create(null),this._tokenTheme=null}get base(){return this.themeData.base}notifyBaseUpdated(){this.themeData.inherit&&(this.colors=null,this._tokenTheme=null)}getColors(){if(!this.colors){const f=new Map;for(const v in this.themeData.colors)f.set(v,y.Color.fromHex(this.themeData.colors[v]));if(this.themeData.inherit){const v=r(this.themeData.base);for(const p in v.colors)f.has(p)||f.set(p,y.Color.fromHex(v.colors[p]))}this.colors=f}return this.colors}getColor(f,v){const p=this.getColors().get(f);if(p)return p;if(v!==!1)return this.getDefault(f)}getDefault(f){let v=this.defaultColors[f];return v||(v=c.resolveDefaultColor(f,this),this.defaultColors[f]=v,v)}defines(f){return this.getColors().has(f)}get type(){switch(this.base){case e.VS_LIGHT_THEME_NAME:return s.ColorScheme.LIGHT;case e.HC_BLACK_THEME_NAME:return s.ColorScheme.HIGH_CONTRAST_DARK;case e.HC_LIGHT_THEME_NAME:return s.ColorScheme.HIGH_CONTRAST_LIGHT;default:return s.ColorScheme.DARK}}get tokenTheme(){if(!this._tokenTheme){let f=[],v=[];if(this.themeData.inherit){const E=r(this.themeData.base);f=E.rules,E.encodedTokensColors&&(v=E.encodedTokensColors)}const p=this.themeData.colors["editor.foreground"],L=this.themeData.colors["editor.background"];if(p||L){const E={token:""};p&&(E.foreground=p),L&&(E.background=L),f.push(E)}f=f.concat(this.themeData.rules),this.themeData.encodedTokensColors&&(v=this.themeData.encodedTokensColors),this._tokenTheme=C.TokenTheme.createFromRawTokenTheme(f,v)}return this._tokenTheme}getTokenStyleMetadata(f,v,p){const E=this.tokenTheme._match([f].concat(v).join(".")).metadata,I=b.TokenMetadata.getForeground(E),T=b.TokenMetadata.getFontStyle(E);return{foreground:I,italic:Boolean(T&1),bold:Boolean(T&2),underline:Boolean(T&4),strikethrough:Boolean(T&8)}}}function l(_){return _===e.VS_LIGHT_THEME_NAME||_===e.VS_DARK_THEME_NAME||_===e.HC_BLACK_THEME_NAME||_===e.HC_LIGHT_THEME_NAME}function r(_){switch(_){case e.VS_LIGHT_THEME_NAME:return g.vs;case e.VS_DARK_THEME_NAME:return g.vs_dark;case e.HC_BLACK_THEME_NAME:return g.hc_black;case e.HC_LIGHT_THEME_NAME:return g.hc_light}}function d(_){const f=r(_);return new o(_,f)}class u extends i.Disposable{constructor(){super(),this._onColorThemeChange=this._register(new D.Emitter),this.onDidColorThemeChange=this._onColorThemeChange.event,this._onProductIconThemeChange=this._register(new D.Emitter),this.onDidProductIconThemeChange=this._onProductIconThemeChange.event,this._environment=Object.create(null),this._builtInProductIconTheme=new a.UnthemedProductIconTheme,this._autoDetectHighContrast=!0,this._knownThemes=new Map,this._knownThemes.set(e.VS_LIGHT_THEME_NAME,d(e.VS_LIGHT_THEME_NAME)),this._knownThemes.set(e.VS_DARK_THEME_NAME,d(e.VS_DARK_THEME_NAME)),this._knownThemes.set(e.HC_BLACK_THEME_NAME,d(e.HC_BLACK_THEME_NAME)),this._knownThemes.set(e.HC_LIGHT_THEME_NAME,d(e.HC_LIGHT_THEME_NAME));const f=(0,a.getIconsStyleSheet)(this);this._codiconCSS=f.getCSS(),this._themeCSS="",this._allCSS=`${this._codiconCSS}
diff --git a/apps/studio/state/storage-explorer.tsx b/apps/studio/state/storage-explorer.tsx
index 97e237bf014..1bb58b10c3f 100644
--- a/apps/studio/state/storage-explorer.tsx
+++ b/apps/studio/state/storage-explorer.tsx
@@ -1790,7 +1790,7 @@ function createStorageExplorerState({
             toastId && (
               <Button
                 size="tiny"
-                type="default"
+                variant="default"
                 className="ml-6"
                 onClick={() => state.abortUploads(toastId)}
               >
diff --git a/apps/studio/tests/components/CopyButton.test.tsx b/apps/studio/tests/components/CopyButton.test.tsx
index ba8bb4eb2eb..76c155d8ecb 100644
--- a/apps/studio/tests/components/CopyButton.test.tsx
+++ b/apps/studio/tests/components/CopyButton.test.tsx
@@ -14,7 +14,7 @@ test('shows copied text', async () => {
 })
 
 test('does not show a green copied icon for primary buttons', async () => {
-  const { container } = render(<CopyButton text="some text" type="primary" />)
+  const { container } = render(<CopyButton text="some text" variant="primary" />)
 
   await userEvent.click(await screen.findByText('Copy'))
   await screen.findByText('Copied')
diff --git a/apps/ui-library/components/command-menu.tsx b/apps/ui-library/components/command-menu.tsx
index efe2ee27045..64dc08d5d46 100644
--- a/apps/ui-library/components/command-menu.tsx
+++ b/apps/ui-library/components/command-menu.tsx
@@ -53,7 +53,7 @@ export function CommandMenu({ ...props }: DialogProps) {
   return (
     <>
       <Button
-        type="outline"
+        variant="outline"
         className={cn(
           `relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-foreground-muted shadow-none sm:pr-12
             hover:border-foreground-muted hover:bg-surface-100 hover:text-foreground-lighter
diff --git a/apps/ui-library/components/copy-button.tsx b/apps/ui-library/components/copy-button.tsx
index 134b59ea3ac..8dc79c45651 100644
--- a/apps/ui-library/components/copy-button.tsx
+++ b/apps/ui-library/components/copy-button.tsx
@@ -21,7 +21,7 @@ export function CopyButton({ value, className, src, ...props }: CopyButtonProps)
   return (
     <Button
       size="small"
-      type="outline"
+      variant="outline"
       className={cn(
         'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0',
         className
diff --git a/apps/ui-library/components/sidebar.tsx b/apps/ui-library/components/sidebar.tsx
index e6f836297ce..03a365f8dec 100644
--- a/apps/ui-library/components/sidebar.tsx
+++ b/apps/ui-library/components/sidebar.tsx
@@ -11,7 +11,7 @@ export function Sidebar() {
       <div className="md:hidden fixed top-0 left-0 right-0 z-50 bg-background justify-between flex items-center px-8 py-3 border-b">
         <MobileMenuSheet>
           <SheetTrigger asChild>
-            <Button type="outline" icon={<Menu />} />
+            <Button variant="outline" icon={<Menu />} />
           </SheetTrigger>
           <SheetContent side="left" className="p-0 w-80" showClose={false}>
             <ScrollArea className="h-full">
diff --git a/apps/ui-library/components/source-panel.tsx b/apps/ui-library/components/source-panel.tsx
index 66a30eadb79..3e46445e151 100644
--- a/apps/ui-library/components/source-panel.tsx
+++ b/apps/ui-library/components/source-panel.tsx
@@ -111,7 +111,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
               <div className="flex items-center gap-2 justify-end">
                 {doc.links?.doc && (
                   <Button
-                    type="outline"
+                    variant="outline"
                     className="rounded-full"
                     icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                   >
@@ -128,7 +128,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 )}
                 {doc.links?.api && (
                   <Button
-                    type="outline"
+                    variant="outline"
                     className="rounded-full"
                     icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                   >
@@ -205,7 +205,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 <div className="flex items-center gap-2 justify-end">
                   {doc.links?.doc && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
@@ -216,7 +216,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                   )}
                   {doc.links?.api && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
diff --git a/apps/ui-library/components/tanstack-db-generator/index.tsx b/apps/ui-library/components/tanstack-db-generator/index.tsx
index 988d3343352..8890b0df15f 100644
--- a/apps/ui-library/components/tanstack-db-generator/index.tsx
+++ b/apps/ui-library/components/tanstack-db-generator/index.tsx
@@ -126,7 +126,7 @@ export function TanstackDBGenerator() {
                       </div>
                       <Button
                         size="small"
-                        type="outline"
+                        variant="outline"
                         className={cn(
                           'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0 shrink-0'
                         )}
diff --git a/apps/ui-library/components/theme-switcher-dropdown.tsx b/apps/ui-library/components/theme-switcher-dropdown.tsx
index 9aa0292f43b..9a53adadb1d 100644
--- a/apps/ui-library/components/theme-switcher-dropdown.tsx
+++ b/apps/ui-library/components/theme-switcher-dropdown.tsx
@@ -56,7 +56,7 @@ const ThemeSwitcherDropdown = () => {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             className="px-1 group"
             icon={
diff --git a/apps/ui-library/public/r/infinite-query-hook.json b/apps/ui-library/public/r/infinite-query-hook.json
index b1558bdf7af..eacb1514ce9 100644
--- a/apps/ui-library/public/r/infinite-query-hook.json
+++ b/apps/ui-library/public/r/infinite-query-hook.json
@@ -16,4 +16,4 @@
       "type": "registry:hook"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/www/_go/events/accenture-reinvention-2026/contest.tsx b/apps/www/_go/events/accenture-reinvention-2026/contest.tsx
index e122f8a9c65..72cb63100b0 100644
--- a/apps/www/_go/events/accenture-reinvention-2026/contest.tsx
+++ b/apps/www/_go/events/accenture-reinvention-2026/contest.tsx
@@ -70,7 +70,7 @@ const page: GoPageInput = {
             native products for their teams and customers.
           </p>
           <div className="flex flex-wrap items-center justify-center gap-3">
-            <Button asChild type="primary" size="medium">
+            <Button asChild variant="primary" size="medium">
               <Link
                 href="https://supabase.com/docs/guides/getting-started/ai-skills"
                 target="_blank"
@@ -79,7 +79,7 @@ const page: GoPageInput = {
                 Learn about Supabase AI Tools
               </Link>
             </Button>
-            <Button asChild type="default" size="medium">
+            <Button asChild variant="default" size="medium">
               <Link
                 href="https://supabase.link/accenture-reinvention-2026-slides"
                 target="_blank"
@@ -103,7 +103,7 @@ const page: GoPageInput = {
             <li>Load data into a Supabase database</li>
             <li>Complete these steps by Monday, May 4, 2026 at 12:00 PM PST</li>
           </ol>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link href="https://supabase.com/dashboard">Create your account</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/ai-engineer-europe-2026/contest-thank-you.tsx b/apps/www/_go/events/ai-engineer-europe-2026/contest-thank-you.tsx
index 428936705d9..807fd1e1dbf 100644
--- a/apps/www/_go/events/ai-engineer-europe-2026/contest-thank-you.tsx
+++ b/apps/www/_go/events/ai-engineer-europe-2026/contest-thank-you.tsx
@@ -21,10 +21,10 @@ const page: GoPageInput = {
       description: "If you haven't already, create your account and start building.",
       children: (
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/dashboard">Go to dashboard</Link>
           </Button>
-          <Button asChild type="outline" size="small">
+          <Button asChild variant="outline" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/ai-engineer-europe-2026/contest.tsx b/apps/www/_go/events/ai-engineer-europe-2026/contest.tsx
index 12c8d7708a2..7c22c7d19ff 100644
--- a/apps/www/_go/events/ai-engineer-europe-2026/contest.tsx
+++ b/apps/www/_go/events/ai-engineer-europe-2026/contest.tsx
@@ -57,7 +57,7 @@ const page: GoPageInput = {
             </p>
             <p className="text-foreground-lighter text-sm">Supabase</p>
           </div>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link
               href="https://supabase.link/ai-engineer-europe-2026-slides"
               target="_blank"
@@ -81,7 +81,7 @@ const page: GoPageInput = {
             <li>Fill out the entry form below</li>
             <li>Complete these steps by the contest deadline</li>
           </ol>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link href="https://supabase.com/dashboard">Create your account</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/dash-2026/contest.tsx b/apps/www/_go/events/dash-2026/contest.tsx
index fe6dc4a9057..a0a96eb2925 100644
--- a/apps/www/_go/events/dash-2026/contest.tsx
+++ b/apps/www/_go/events/dash-2026/contest.tsx
@@ -57,7 +57,7 @@ const page: GoPageInput = {
             </p>
             <p className="text-foreground-lighter text-sm">Supabase</p>
           </div>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link
               href="https://supabase.link/dash-2026-slides"
               target="_blank"
@@ -84,7 +84,7 @@ const page: GoPageInput = {
             <li>Load data into a Supabase database</li>
             <li>Complete these steps by the deadline in your post-event note</li>
           </ol>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link href="https://supabase.com/dashboard">Create your account</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/dash-2026/exec-dinner-thank-you.tsx b/apps/www/_go/events/dash-2026/exec-dinner-thank-you.tsx
index 51f670a5ebd..a829c6a4294 100644
--- a/apps/www/_go/events/dash-2026/exec-dinner-thank-you.tsx
+++ b/apps/www/_go/events/dash-2026/exec-dinner-thank-you.tsx
@@ -22,7 +22,7 @@ const page: GoPageInput = {
       description: 'Learn more about what we are building at Supabase.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/mcp-dev-nyc-2026/contest-thank-you.tsx b/apps/www/_go/events/mcp-dev-nyc-2026/contest-thank-you.tsx
index f92c2040f16..e787eb8264d 100644
--- a/apps/www/_go/events/mcp-dev-nyc-2026/contest-thank-you.tsx
+++ b/apps/www/_go/events/mcp-dev-nyc-2026/contest-thank-you.tsx
@@ -21,10 +21,10 @@ const page: GoPageInput = {
       description: "If you haven't already, create your account and start building.",
       children: (
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/dashboard">Go to dashboard</Link>
           </Button>
-          <Button asChild type="outline" size="small">
+          <Button asChild variant="outline" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/mcp-dev-nyc-2026/contest.tsx b/apps/www/_go/events/mcp-dev-nyc-2026/contest.tsx
index b68979266ce..19a088ebab7 100644
--- a/apps/www/_go/events/mcp-dev-nyc-2026/contest.tsx
+++ b/apps/www/_go/events/mcp-dev-nyc-2026/contest.tsx
@@ -57,7 +57,7 @@ const page: GoPageInput = {
             </p>
             <p className="text-foreground-lighter text-sm">Supabase</p>
           </div>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link
               href="https://mcp-dev-summit-presentation.vercel.app/"
               target="_blank"
@@ -83,7 +83,7 @@ const page: GoPageInput = {
               Complete these steps by the contest deadline, Monday April 13, 2026 at 12:00 PM PDT
             </li>
           </ol>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link href="https://supabase.com/dashboard">Create your account</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/pgconf-dev-2026/contest-thank-you.tsx b/apps/www/_go/events/pgconf-dev-2026/contest-thank-you.tsx
index fa031d6d291..34704fc957d 100644
--- a/apps/www/_go/events/pgconf-dev-2026/contest-thank-you.tsx
+++ b/apps/www/_go/events/pgconf-dev-2026/contest-thank-you.tsx
@@ -21,10 +21,10 @@ const page: GoPageInput = {
       description: "If you haven't already, create your account and start building.",
       children: (
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/dashboard">Go to dashboard</Link>
           </Button>
-          <Button asChild type="outline" size="small">
+          <Button asChild variant="outline" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/pgconf-dev-2026/contest.tsx b/apps/www/_go/events/pgconf-dev-2026/contest.tsx
index ee27cc00d7c..aadaed5f82b 100644
--- a/apps/www/_go/events/pgconf-dev-2026/contest.tsx
+++ b/apps/www/_go/events/pgconf-dev-2026/contest.tsx
@@ -57,7 +57,7 @@ const page: GoPageInput = {
             </p>
             <p className="text-foreground-lighter text-sm">Supabase</p>
           </div>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link
               href="https://supabase.link/pgconf-dev-2026-slides"
               target="_blank"
@@ -83,7 +83,7 @@ const page: GoPageInput = {
               Complete these steps by the contest deadline, Monday June 1, 2026 at 12:00 PM PDT
             </li>
           </ol>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link href="https://supabase.com/dashboard">Create your account</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/postgresconf-sjc-2026/contest-thank-you.tsx b/apps/www/_go/events/postgresconf-sjc-2026/contest-thank-you.tsx
index bee266b16c6..70be9d30c48 100644
--- a/apps/www/_go/events/postgresconf-sjc-2026/contest-thank-you.tsx
+++ b/apps/www/_go/events/postgresconf-sjc-2026/contest-thank-you.tsx
@@ -22,10 +22,10 @@ const page: GoPageInput = {
       description: "If you haven't already, create your account and start building.",
       children: (
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/dashboard">Go to dashboard</Link>
           </Button>
-          <Button asChild type="outline" size="small">
+          <Button asChild variant="outline" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx b/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx
index 9341ea09151..89a8176ed74 100644
--- a/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx
+++ b/apps/www/_go/events/postgresconf-sjc-2026/contest.tsx
@@ -85,12 +85,12 @@ const page: GoPageInput = {
             )}
           </div>
           <div className="flex flex-wrap items-center justify-center gap-3">
-            <Button asChild type="primary" size="medium">
+            <Button asChild variant="primary" size="medium">
               <Link href="https://www.multigres.com" target="_blank" rel="noopener noreferrer">
                 Learn about Multigres
               </Link>
             </Button>
-            <Button asChild type="default" size="medium">
+            <Button asChild variant="default" size="medium">
               <Link
                 href="https://supabase.link/postgresconf-sjc-2026-slides"
                 target="_blank"
@@ -115,7 +115,7 @@ const page: GoPageInput = {
             <li>Fill out the entry form below</li>
             <li>Complete these steps by Monday, May 4, 2026 at 12:00 PM PST</li>
           </ol>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link href="https://supabase.com/dashboard">Create your account</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/select-2026/partner-day-thank-you.tsx b/apps/www/_go/events/select-2026/partner-day-thank-you.tsx
index ddb582d94f7..17e4e658ebe 100644
--- a/apps/www/_go/events/select-2026/partner-day-thank-you.tsx
+++ b/apps/www/_go/events/select-2026/partner-day-thank-you.tsx
@@ -22,7 +22,7 @@ const page: GoPageInput = {
       description: 'Learn more about what we are building at Supabase.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/select-2026/vip-dinner-thank-you.tsx b/apps/www/_go/events/select-2026/vip-dinner-thank-you.tsx
index 26db2d8d7e3..b5da7f4b01a 100644
--- a/apps/www/_go/events/select-2026/vip-dinner-thank-you.tsx
+++ b/apps/www/_go/events/select-2026/vip-dinner-thank-you.tsx
@@ -22,7 +22,7 @@ const page: GoPageInput = {
       description: 'Learn more about what we are building at Supabase.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/select-2026/vip-experience-thank-you.tsx b/apps/www/_go/events/select-2026/vip-experience-thank-you.tsx
index 50854651cd4..805c214082c 100644
--- a/apps/www/_go/events/select-2026/vip-experience-thank-you.tsx
+++ b/apps/www/_go/events/select-2026/vip-experience-thank-you.tsx
@@ -22,7 +22,7 @@ const page: GoPageInput = {
       description: 'Learn more about what we are building at Supabase.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/startup-grind-2026/contest.tsx b/apps/www/_go/events/startup-grind-2026/contest.tsx
index 09bb47c022d..295f37f9464 100644
--- a/apps/www/_go/events/startup-grind-2026/contest.tsx
+++ b/apps/www/_go/events/startup-grind-2026/contest.tsx
@@ -44,7 +44,7 @@ const page: GoPageInput = {
             <li>Load data into a Supabase database</li>
             <li>Complete these steps by Monday, May 11, 2026 at 12:00 PM PST</li>
           </ol>
-          <Button asChild type="default" size="medium">
+          <Button asChild variant="default" size="medium">
             <Link href="https://supabase.com/dashboard">Create your account</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/stripe-sessions-2026/exec-dinner-thank-you.tsx b/apps/www/_go/events/stripe-sessions-2026/exec-dinner-thank-you.tsx
index e74bf7e6f19..9696f8a9714 100644
--- a/apps/www/_go/events/stripe-sessions-2026/exec-dinner-thank-you.tsx
+++ b/apps/www/_go/events/stripe-sessions-2026/exec-dinner-thank-you.tsx
@@ -22,7 +22,7 @@ const page: GoPageInput = {
       description: 'Learn more about what we are building at Supabase.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com">Visit supabase.com</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/events/stripe-sessions-2026/party.tsx b/apps/www/_go/events/stripe-sessions-2026/party.tsx
index 38e5ba11130..d96f1daa45f 100644
--- a/apps/www/_go/events/stripe-sessions-2026/party.tsx
+++ b/apps/www/_go/events/stripe-sessions-2026/party.tsx
@@ -99,7 +99,7 @@ const page: GoPageInput = {
             </li>
             <li>Complete these steps by Monday, May 11, 2026 at 12:00 PM PST</li>
           </ol>
-          <Button asChild type="primary" size="medium">
+          <Button asChild variant="primary" size="medium">
             <Link href="https://supabase.com/dashboard">Start with Supabase</Link>
           </Button>
           <p className="text-xs text-foreground-lighter mt-4">
diff --git a/apps/www/_go/events/sxsw-2026/contest.tsx b/apps/www/_go/events/sxsw-2026/contest.tsx
index 03b53495c68..93f703e2e6b 100644
--- a/apps/www/_go/events/sxsw-2026/contest.tsx
+++ b/apps/www/_go/events/sxsw-2026/contest.tsx
@@ -45,10 +45,10 @@ const page: GoPageInput = {
             <li>Complete these steps by Monday, March 30, 2026 at 12:00 PM PST</li>
           </ol>
           <div className="flex flex-col sm:flex-row items-center gap-4">
-            <Button asChild type="default" size="medium">
+            <Button asChild variant="default" size="medium">
               <Link href="https://supabase.com/dashboard">Create your Supabase account</Link>
             </Button>
-            <Button asChild type="outline" size="medium">
+            <Button asChild variant="outline" size="medium">
               <Link href="https://dreambase.ai">Sign up for Dreambase</Link>
             </Button>
           </div>
diff --git a/apps/www/_go/thank-you/example-thank-you.tsx b/apps/www/_go/thank-you/example-thank-you.tsx
index 34e75401bd2..58df5e564b6 100644
--- a/apps/www/_go/thank-you/example-thank-you.tsx
+++ b/apps/www/_go/thank-you/example-thank-you.tsx
@@ -21,10 +21,10 @@ const page: GoPageInput = {
         'Explore our documentation and tutorials to get started with Supabase right away.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/docs">Read the docs</Link>
           </Button>
-          <Button asChild type="text" size="small">
+          <Button asChild variant="text" size="small">
             <Link href="https://supabase.com/docs/guides">Watch tutorials</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/webinar/agency-webinar-mar2026-thankyou.tsx b/apps/www/_go/webinar/agency-webinar-mar2026-thankyou.tsx
index 3c8b2670bee..60f1c88bc6a 100644
--- a/apps/www/_go/webinar/agency-webinar-mar2026-thankyou.tsx
+++ b/apps/www/_go/webinar/agency-webinar-mar2026-thankyou.tsx
@@ -21,10 +21,10 @@ const page: GoPageInput = {
         'Explore Supabase and get ready to build production-ready applications with AI coding tools.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/docs">Read the docs</Link>
           </Button>
-          <Button asChild type="text" size="small">
+          <Button asChild variant="text" size="small">
             <Link href="https://supabase.com/dashboard">Start a project</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/webinar/bolt-webinar-thank-you.tsx b/apps/www/_go/webinar/bolt-webinar-thank-you.tsx
index 0422be6f38a..d58fe053b77 100644
--- a/apps/www/_go/webinar/bolt-webinar-thank-you.tsx
+++ b/apps/www/_go/webinar/bolt-webinar-thank-you.tsx
@@ -20,10 +20,10 @@ const page: GoPageInput = {
       description: 'Explore Supabase and get ready to build with AI-assisted development.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/docs">Read the docs</Link>
           </Button>
-          <Button asChild type="text" size="small">
+          <Button asChild variant="text" size="small">
             <Link href="https://supabase.com/dashboard">Start a project</Link>
           </Button>
         </div>
diff --git a/apps/www/_go/webinar/figma-webinar-may2026-thankyou.tsx b/apps/www/_go/webinar/figma-webinar-may2026-thankyou.tsx
index 0e92fad36cc..9b6b44b7bd2 100644
--- a/apps/www/_go/webinar/figma-webinar-may2026-thankyou.tsx
+++ b/apps/www/_go/webinar/figma-webinar-may2026-thankyou.tsx
@@ -21,10 +21,10 @@ const page: GoPageInput = {
         'Explore Supabase and get ready to build production-ready applications with Figma Make.',
       children: (
         <div className="flex items-center justify-center gap-4">
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://supabase.com/docs">Read the docs</Link>
           </Button>
-          <Button asChild type="text" size="small">
+          <Button asChild variant="text" size="small">
             <Link href="https://supabase.com/dashboard">Start a project</Link>
           </Button>
         </div>
diff --git a/apps/www/app/blog/authors/[author]/AuthorClient.tsx b/apps/www/app/blog/authors/[author]/AuthorClient.tsx
index 5fbcfd57140..e86fc59ba49 100644
--- a/apps/www/app/blog/authors/[author]/AuthorClient.tsx
+++ b/apps/www/app/blog/authors/[author]/AuthorClient.tsx
@@ -117,7 +117,7 @@ export default function AuthorClient({ author, authorId, blogs }: AuthorClientPr
               </InputGroup>
             </div>
             <Button
-              type="default"
+              variant="default"
               title={isList ? 'Grid View' : 'List View'}
               onClick={handleViewSelection}
               className="h-full p-2 text-foreground-light"
diff --git a/apps/www/app/contribute/about/page.tsx b/apps/www/app/contribute/about/page.tsx
index a5592bb76f1..e81d1587b7b 100644
--- a/apps/www/app/contribute/about/page.tsx
+++ b/apps/www/app/contribute/about/page.tsx
@@ -233,7 +233,7 @@ export default function AboutPage() {
               Ready to start contributing?
             </h2>
 
-            <Button asChild type="primary" size="small">
+            <Button asChild variant="primary" size="small">
               <Link
                 href="https://supabase.notion.site/2ce5004b775f80a38acdc3ca5df7b9d3"
                 target="_blank"
diff --git a/apps/www/app/pricing/PricingContent.tsx b/apps/www/app/pricing/PricingContent.tsx
index 688cba00b2b..32a7d4f6504 100644
--- a/apps/www/app/pricing/PricingContent.tsx
+++ b/apps/www/app/pricing/PricingContent.tsx
@@ -36,11 +36,16 @@ export default function PricingContent() {
       <div className="text-center mt-10 xl:mt-16 mx-auto max-w-lg flex flex-col gap-8">
         <div className="flex justify-center gap-2">
           <a href="#compare-plans">
-            <Button size="tiny" type="secondary" iconRight={<ArrowDownIcon className="w-3" />}>
+            <Button size="tiny" variant="secondary" iconRight={<ArrowDownIcon className="w-3" />}>
               Compare Plans
             </Button>
           </a>
-          <Button size="tiny" type="default" asChild iconRight={<ArrowUpRight className="w-4" />}>
+          <Button
+            size="tiny"
+            variant="default"
+            asChild
+            iconRight={<ArrowUpRight className="w-4" />}
+          >
             <a
               href="/docs/guides/platform/billing-on-supabase#organization-based-billing"
               target="_blank"
diff --git a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx
index 84ef83203a5..b8e53c9e977 100644
--- a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx
+++ b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx
@@ -352,7 +352,7 @@ const CTABanner = forwardRef<HTMLElement>((props, ref) => {
             Start your project
           </Link>
         </Button>
-        <Button asChild size="medium" type="default">
+        <Button asChild size="medium" variant="default">
           <Link
             href="/contact/sales"
             onClick={() =>
diff --git a/apps/www/app/state-of-startups/components/SurveyChart.tsx b/apps/www/app/state-of-startups/components/SurveyChart.tsx
index 2127edd0f66..7bdc9195e9c 100644
--- a/apps/www/app/state-of-startups/components/SurveyChart.tsx
+++ b/apps/www/app/state-of-startups/components/SurveyChart.tsx
@@ -363,7 +363,7 @@ export function SurveyChart({
                     No responses match those filters. Maybe next year?
                   </p>
                   <Button
-                    type="primary"
+                    variant="primary"
                     size="tiny"
                     onClick={() =>
                       setActiveFilters(
@@ -398,7 +398,7 @@ export function SurveyChart({
           {view === 'chart' && !isExpanded && !dataError && chartData.length > 3 && (
             <div className="absolute bottom-0 left-0 right-0 flex items-center justify-center py-4 bg-linear-to-b from-transparent to-background">
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
                 onClick={() => setIsExpanded(true)}
                 className="shadow-xs"
@@ -451,7 +451,7 @@ function SurveyFilter({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           iconRight={<ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />}
         >
diff --git a/apps/www/components/AIDemo/SqlSnippet.tsx b/apps/www/components/AIDemo/SqlSnippet.tsx
index 4302b726462..f096ee9cae8 100644
--- a/apps/www/components/AIDemo/SqlSnippet.tsx
+++ b/apps/www/components/AIDemo/SqlSnippet.tsx
@@ -1,8 +1,9 @@
-import { useState, useEffect } from 'react'
 import { motion } from 'framer-motion'
-import { Code, Play, DatabaseIcon } from 'lucide-react'
-import { Button, cn, ChartContainer, ChartTooltip, ChartTooltipContent, SQL_ICON } from 'ui'
-import { BarChart, Bar, XAxis, CartesianGrid } from 'recharts'
+import { Code, DatabaseIcon, Play } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { Button, ChartContainer, ChartTooltip, ChartTooltipContent, cn, SQL_ICON } from 'ui'
+
 import CodeBlock from '../CodeBlock/CodeBlock'
 
 interface SqlSnippetProps {
@@ -178,14 +179,14 @@ export const SqlSnippet = ({
           <h3 className="text-xs font-medium flex-1">{title}</h3>
           <div className="flex">
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               className="w-7 h-7"
               icon={<Code size={14} />}
               onClick={() => setShowCode(!showCode)}
             />
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               className="w-7 h-7"
               icon={<Play size={14} />}
diff --git a/apps/www/components/Blog/BlogFilters.tsx b/apps/www/components/Blog/BlogFilters.tsx
index be9d7d7b478..f6cdba02e6e 100644
--- a/apps/www/components/Blog/BlogFilters.tsx
+++ b/apps/www/components/Blog/BlogFilters.tsx
@@ -158,7 +158,7 @@ function BlogFilters({ onFilterChange, view, setView }: Props) {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="outline"
+                variant="outline"
                 iconRight={<ChevronDown />}
                 className="w-full min-w-[200px] flex justify-between items-center py-2"
               >
@@ -190,7 +190,7 @@ function BlogFilters({ onFilterChange, view, setView }: Props) {
         {allCategories.map((category: string) => (
           <Button
             key={category}
-            type={
+            variant={
               category === 'all' && !searchTerm && !activeCategory
                 ? 'default'
                 : category === activeCategory
@@ -212,7 +212,7 @@ function BlogFilters({ onFilterChange, view, setView }: Props) {
           <Button
             className="px-2 h-full"
             size="medium"
-            type="default"
+            variant="default"
             onClick={() => setShowSearchInput(true)}
           >
             <Search size="14" />
@@ -250,7 +250,7 @@ function BlogFilters({ onFilterChange, view, setView }: Props) {
         </div>
       )}
       <Button
-        type="default"
+        variant="default"
         title={isList ? 'Grid View' : 'List View'}
         onClick={handleViewSelection}
         className="h-full p-2 text-foreground-light"
diff --git a/apps/www/components/BuiltWithSupabase/index.tsx b/apps/www/components/BuiltWithSupabase/index.tsx
index 3a729e5cdd1..8a857255cb5 100644
--- a/apps/www/components/BuiltWithSupabase/index.tsx
+++ b/apps/www/components/BuiltWithSupabase/index.tsx
@@ -1,10 +1,9 @@
-import { Button, cn, IconGitHubSolid } from 'ui'
-import Link from 'next/link'
-
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import ExampleCard from '../ExampleCard'
-
 import Examples from 'data/Examples'
+import Link from 'next/link'
+import { Button, cn, IconGitHubSolid } from 'ui'
+
+import ExampleCard from '../ExampleCard'
 import ExamplesMobile from './ExamplesMobile'
 
 const BuiltWithSupabase = () => {
@@ -17,12 +16,12 @@ const BuiltWithSupabase = () => {
             Kickstart your next project with templates built by us and our community.
           </p>
           <div className="flex justify-center gap-2 py-4">
-            <Button asChild type="default" size="small" className="h-full">
+            <Button asChild variant="default" size="small" className="h-full">
               <Link href="/docs/guides/examples">View all examples</Link>
             </Button>
             <Button
               asChild
-              type="default"
+              variant="default"
               icon={<IconGitHubSolid size="tiny" className="w-full! h-full!" />}
               size="small"
             >
diff --git a/apps/www/components/CTABanner/index.tsx b/apps/www/components/CTABanner/index.tsx
index e4394884c88..42efbe627ff 100644
--- a/apps/www/components/CTABanner/index.tsx
+++ b/apps/www/components/CTABanner/index.tsx
@@ -39,7 +39,7 @@ const CTABanner = ({ darkerBg, className }: Props) => {
             Start your project
           </Link>
         </Button>
-        <Button asChild size="medium" type="default">
+        <Button asChild size="medium" variant="default">
           <Link
             href="/contact/sales"
             onClick={() =>
diff --git a/apps/www/components/Carousels/ImageCarousel.tsx b/apps/www/components/Carousels/ImageCarousel.tsx
index 30be4e2f559..bb8e06b295a 100644
--- a/apps/www/components/Carousels/ImageCarousel.tsx
+++ b/apps/www/components/Carousels/ImageCarousel.tsx
@@ -62,7 +62,7 @@ function ImageCarousel(props: ImageCarouselProps) {
         </p>
       </p>
       <p>
-        <Button type="outline" size="small" icon={<CornerRightUp />}>
+        <Button variant="outline" size="small" icon={<CornerRightUp />}>
           View documentation
         </Button>
       </p>
diff --git a/apps/www/components/Carousels/SplitCodeBlockCarousel.tsx b/apps/www/components/Carousels/SplitCodeBlockCarousel.tsx
index 3943616b98d..c0ca13504cd 100644
--- a/apps/www/components/Carousels/SplitCodeBlockCarousel.tsx
+++ b/apps/www/components/Carousels/SplitCodeBlockCarousel.tsx
@@ -54,7 +54,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
         </p>
       </p>
       <p>
-        <Button type="outline">View documentation</Button>
+        <Button variant="outline">View documentation</Button>
       </p>
     </div>
   )
@@ -124,7 +124,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
                 <p className="p mb-6 block">{extension.detail_text}</p>
                 <div>
                   {extension.url && (
-                    <Button asChild type="default">
+                    <Button asChild variant="default">
                       <Link href={extension.url} as={extension.url} className="ml-px">
                         View documentation
                       </Link>
diff --git a/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx b/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx
index cac7e01bde0..f4b84be6557 100644
--- a/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx
+++ b/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx
@@ -27,7 +27,7 @@ export function ChangelogLlmMarkdownButton({ className, markdownPath = '/changel
   return (
     <div className={cn('flex items-center', className)}>
       <Button
-        type="default"
+        variant="default"
         className="rounded-r-none border-r-0"
         icon={
           copied ? (
@@ -44,7 +44,7 @@ export function ChangelogLlmMarkdownButton({ className, markdownPath = '/changel
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            type="default"
+            variant="default"
             className="rounded-l-none px-1"
             icon={<ChevronDown className="h-4 w-4" strokeWidth={2} aria-hidden />}
             aria-label="Open LLM options for this changelog page"
diff --git a/apps/www/components/CodeBlock/CodeBlock.tsx b/apps/www/components/CodeBlock/CodeBlock.tsx
index e411aec300f..2e8e8f35d43 100644
--- a/apps/www/components/CodeBlock/CodeBlock.tsx
+++ b/apps/www/components/CodeBlock/CodeBlock.tsx
@@ -7,12 +7,13 @@ import CopyToClipboard from 'react-copy-to-clipboard'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
 import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash'
 import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript'
+import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
 import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin'
 import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'
 import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml'
-import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
 import { Button, cn } from 'ui'
+
 import monokaiCustomTheme, { codeHikeTheme } from './CodeBlock.utils'
 
 export type LANG = 'js' | 'sql' | 'py' | 'bash' | 'ts' | 'tsx' | 'kotlin' | 'yaml' | 'json'
@@ -157,7 +158,7 @@ function CodeBlock(props: CodeBlockProps) {
           <div className="absolute right-2 top-2">
             <CopyToClipboard text={props.children}>
               <Button
-                type="text"
+                variant="text"
                 icon={
                   copied ? (
                     <span className="text-brand">
diff --git a/apps/www/components/Contribute/FilterPopover.tsx b/apps/www/components/Contribute/FilterPopover.tsx
index 2fa3baa7efe..6bf1ba61a24 100644
--- a/apps/www/components/Contribute/FilterPopover.tsx
+++ b/apps/www/components/Contribute/FilterPopover.tsx
@@ -72,7 +72,7 @@ export function FilterPopover({ allProductAreas, allStacks, trigger }: FilterPop
             >
               {((productAreas && productAreas.length > 0) || (stacks && stacks.length > 0)) && (
                 <Button
-                  type="outline"
+                  variant="outline"
                   onClick={handleClearAll}
                   iconRight={<X className="h-4 w-4" />}
                 >
@@ -96,7 +96,7 @@ export function FilterPopover({ allProductAreas, allStacks, trigger }: FilterPop
                       return (
                         <Button
                           key={area}
-                          type={isSelected ? 'secondary' : 'dashed'}
+                          variant={isSelected ? 'secondary' : 'dashed'}
                           size="tiny"
                           onClick={() => handleProductAreaClick(area)}
                           className="justify-start w-fit"
@@ -120,7 +120,7 @@ export function FilterPopover({ allProductAreas, allStacks, trigger }: FilterPop
                         <Button
                           key={tech}
                           // [Danny] We should switch to using Toggle component here, like downgrade plan flow
-                          type={isSelected ? 'secondary' : 'dashed'}
+                          variant={isSelected ? 'secondary' : 'dashed'}
                           size="tiny"
                           onClick={() => handleStackClick(tech)}
                           className="justify-start w-fit"
diff --git a/apps/www/components/Contribute/HelpOnPlatformButton.tsx b/apps/www/components/Contribute/HelpOnPlatformButton.tsx
index 28186051103..646848ba9a4 100644
--- a/apps/www/components/Contribute/HelpOnPlatformButton.tsx
+++ b/apps/www/components/Contribute/HelpOnPlatformButton.tsx
@@ -1,6 +1,6 @@
-import { Button } from 'ui'
 import { getChannelDisplayName } from '~/data/contribute'
 import type { ThreadSource } from '~/types/contribute'
+import { Button } from 'ui'
 
 interface HelpOnPlatformButtonProps {
   channel: ThreadSource
@@ -18,7 +18,7 @@ export function HelpOnPlatformButton({
   const platformName = getChannelDisplayName(channel)
 
   return (
-    <Button asChild type={type} className={className}>
+    <Button asChild variant={type} className={className}>
       <a href={externalActivityUrl} target="_blank" rel="noopener noreferrer">
         Help on {platformName}
       </a>
diff --git a/apps/www/components/Contribute/Hero.tsx b/apps/www/components/Contribute/Hero.tsx
index 1f84b3f5957..d8405b52a8b 100644
--- a/apps/www/components/Contribute/Hero.tsx
+++ b/apps/www/components/Contribute/Hero.tsx
@@ -16,7 +16,7 @@ export function Hero() {
         question answered helps someone build something amazing.
       </p>
 
-      <Button size="medium" asChild type="outline">
+      <Button size="medium" asChild variant="outline">
         <Link href="/contribute/about">Get involved</Link>
       </Button>
     </header>
diff --git a/apps/www/components/Contribute/RepliesList.tsx b/apps/www/components/Contribute/RepliesList.tsx
index 6c3ad21effd..ba4e7b3ca3a 100644
--- a/apps/www/components/Contribute/RepliesList.tsx
+++ b/apps/www/components/Contribute/RepliesList.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Badge, Button, Card, CardContent, CardFooter, CardHeader, CardTitle } from 'ui'
+
 import { markdownComponents } from './markdownComponents'
 
 interface Reply {
@@ -88,7 +89,7 @@ export function RepliesList({ replies, questionAuthor, totalReplyCount }: Replie
         {hasMoreThanThree && (
           <CardFooter className="flex justify-center">
             <Button
-              type="default"
+              variant="default"
               size="tiny"
               onClick={() => setIsExpanded(!isExpanded)}
               className="w-min"
diff --git a/apps/www/components/Contribute/UnansweredThreadsTable.tsx b/apps/www/components/Contribute/UnansweredThreadsTable.tsx
index a4c91c5ccd4..9ccd0530e78 100644
--- a/apps/www/components/Contribute/UnansweredThreadsTable.tsx
+++ b/apps/www/components/Contribute/UnansweredThreadsTable.tsx
@@ -266,7 +266,7 @@ export function UnansweredThreadsTable({
             return (
               <Button
                 key={tab.id}
-                type={isActive ? 'default' : 'dashed'}
+                variant={isActive ? 'default' : 'dashed'}
                 size="tiny"
                 onClick={() => handleTabChange(tab.id)}
                 icon={
@@ -307,7 +307,7 @@ export function UnansweredThreadsTable({
             />
             {searchInput && (
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 icon={<X className="h-4 w-4" />}
                 onClick={handleClearSearch}
@@ -322,7 +322,7 @@ export function UnansweredThreadsTable({
             allProductAreas={allProductAreas}
             allStacks={allStacks}
             trigger={
-              <Button type="default" icon={<Filter size={12} />}>
+              <Button variant="default" icon={<Filter size={12} />}>
                 <span className="flex items-center gap-2">
                   Filters
                   {activeFilterCount > 0 && (
@@ -340,7 +340,7 @@ export function UnansweredThreadsTable({
       {hasMore && (
         <div className="flex justify-center mt-4">
           <Button
-            type="default"
+            variant="default"
             size="tiny"
             onClick={handleLoadMore}
             loading={isLoadingMore}
diff --git a/apps/www/components/Contribute/UserProfile.tsx b/apps/www/components/Contribute/UserProfile.tsx
index dd42250113e..b72717c74d3 100644
--- a/apps/www/components/Contribute/UserProfile.tsx
+++ b/apps/www/components/Contribute/UserProfile.tsx
@@ -77,7 +77,7 @@ function ReplyCard({ reply, thread }: { reply: Reply; thread?: ThreadRow }) {
             </span>
           )}
           {reply.external_activity_url && (
-            <Button asChild type="default" size="tiny">
+            <Button asChild variant="default" size="tiny">
               <a
                 href={reply.external_activity_url}
                 target="_blank"
diff --git a/apps/www/components/CustomerStories/CustomersFilters.tsx b/apps/www/components/CustomerStories/CustomersFilters.tsx
index e18446dc16e..bc08d9a439a 100644
--- a/apps/www/components/CustomerStories/CustomersFilters.tsx
+++ b/apps/www/components/CustomerStories/CustomersFilters.tsx
@@ -124,7 +124,7 @@ function CustomerFilters({ allCustomers, setCustomers, industries, products }: P
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="outline"
+                variant="outline"
                 size="medium"
                 iconRight={<ChevronDown />}
                 className="w-full min-w-[150px] flex [&_span]:flex [&_span]:items-center [&_span]:gap-2 justify-between items-center py-2"
@@ -153,7 +153,7 @@ function CustomerFilters({ allCustomers, setCustomers, industries, products }: P
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="outline"
+                variant="outline"
                 size="medium"
                 iconRight={<ChevronDown />}
                 className="w-full min-w-[200px] flex [&_span]:flex [&_span]:items-center [&_span]:gap-2 justify-between items-center py-2"
@@ -187,7 +187,7 @@ function CustomerFilters({ allCustomers, setCustomers, industries, products }: P
                 ? 'opacity-100 visible'
                 : 'opacity-0 invisible'
             )}
-            type={isMobile ? 'default' : 'text'}
+            variant={isMobile ? 'default' : 'text'}
             block={isMobile}
             iconRight={<CloseIcon />}
           >
diff --git a/apps/www/components/CustomerStories/index.tsx b/apps/www/components/CustomerStories/index.tsx
index e34a7bba60d..34b8d1bc316 100644
--- a/apps/www/components/CustomerStories/index.tsx
+++ b/apps/www/components/CustomerStories/index.tsx
@@ -31,7 +31,7 @@ const CustomerStories = () => (
         <Button asChild>
           <Link href="/customers">View all stories</Link>
         </Button>
-        <Button asChild type="default">
+        <Button asChild variant="default">
           <Link href="/events">View events</Link>
         </Button>
       </div>
diff --git a/apps/www/components/Events/EventsFilters.tsx b/apps/www/components/Events/EventsFilters.tsx
index e44b937dc91..9f4a368f7bc 100644
--- a/apps/www/components/Events/EventsFilters.tsx
+++ b/apps/www/components/Events/EventsFilters.tsx
@@ -149,7 +149,7 @@ function EventFilters({ allEvents, setEvents, categories, onDemandEvents }: Prop
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="outline"
+                  variant="outline"
                   size="medium"
                   iconRight={<ChevronDown />}
                   className="w-full min-w-[200px] flex [&_span]:flex [&_span]:items-center [&_span]:gap-2 justify-between items-center py-2"
@@ -193,7 +193,7 @@ function EventFilters({ allEvents, setEvents, categories, onDemandEvents }: Prop
           {Object.entries(categories).map(([category, count]) => (
             <Button
               key={category}
-              type={
+              variant={
                 category === 'all' && !searchTerm && !activeCategory
                   ? 'default'
                   : category === activeCategory
@@ -215,7 +215,7 @@ function EventFilters({ allEvents, setEvents, categories, onDemandEvents }: Prop
           {!!onDemandEvents?.length && (
             <Button
               key="on-demand"
-              type="outline"
+              variant="outline"
               size={is2XL ? 'tiny' : 'small'}
               className="rounded-full"
               iconRight={
@@ -240,7 +240,7 @@ function EventFilters({ allEvents, setEvents, categories, onDemandEvents }: Prop
           <Button
             className="px-2 w-9 h-9"
             size="large"
-            type="default"
+            variant="default"
             onClick={() => setShowSearchInput(true)}
           >
             <Search size="14" />
diff --git a/apps/www/components/Events/new/EventBanner.tsx b/apps/www/components/Events/new/EventBanner.tsx
index 1ad1de80bfb..a90104694a3 100644
--- a/apps/www/components/Events/new/EventBanner.tsx
+++ b/apps/www/components/Events/new/EventBanner.tsx
@@ -51,7 +51,7 @@ export function EventBanner() {
 
           <div className="flex items-center md:justify-end gap-2">
             {featuredEvent.meetingLink && (
-              <Button type="secondary" size="medium" asChild>
+              <Button variant="secondary" size="medium" asChild>
                 <Link href={featuredEvent.meetingLink} target="_blank" rel="noopener noreferrer">
                   Meet with us
                 </Link>
diff --git a/apps/www/components/Events/new/EventList.tsx b/apps/www/components/Events/new/EventList.tsx
index 14a33b765b5..aadbe2a9386 100644
--- a/apps/www/components/Events/new/EventList.tsx
+++ b/apps/www/components/Events/new/EventList.tsx
@@ -124,7 +124,7 @@ export function EventList() {
 
                 <div className="flex flex-wrap items-center justify-end gap-2 shrink-0 relative z-10">
                   {event.meetingLink && (
-                    <Button size="tiny" type="secondary" asChild>
+                    <Button size="tiny" variant="secondary" asChild>
                       <Link href={event.meetingLink} target="_blank" rel="noopener noreferrer">
                         Meet with us
                       </Link>
diff --git a/apps/www/components/ExampleCard.tsx b/apps/www/components/ExampleCard.tsx
index 909304e7694..8745841e4b6 100644
--- a/apps/www/components/ExampleCard.tsx
+++ b/apps/www/components/ExampleCard.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { ArrowUpRight } from 'lucide-react'
-import { useBreakpoint } from 'common'
-
-import { Button } from 'ui'
-import Panel from './Panel'
 import { useSendTelemetryEvent } from '~/lib/telemetry'
+import { useBreakpoint } from 'common'
+import { ArrowUpRight } from 'lucide-react'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button } from 'ui'
+
+import Panel from './Panel'
 
 function ExampleCard(props: any) {
   const isXs = useBreakpoint()
@@ -111,7 +111,7 @@ function ExampleCard(props: any) {
               {props.repo_url && (
                 <Button
                   size="tiny"
-                  type="text"
+                  variant="text"
                   className="group overflow-hidden text-foreground-lighter group-hover/panel:text-foreground bg-transparent! p-0!"
                   iconRight={
                     <div className="relative w-3.5 h-3.5 flex items-center justify-center">
diff --git a/apps/www/components/Examples/ExamplesCarousel.tsx b/apps/www/components/Examples/ExamplesCarousel.tsx
index 29518f7b97f..4ded7ff0d56 100644
--- a/apps/www/components/Examples/ExamplesCarousel.tsx
+++ b/apps/www/components/Examples/ExamplesCarousel.tsx
@@ -1,16 +1,15 @@
 import 'swiper/css'
 
-import { useRef } from 'react'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
-import { Button, cn } from 'ui'
-import Link from 'next/link'
-import { CTA } from '~/types/common'
-
 import ExampleCard from '~/components/ExampleCard'
-import { Swiper, SwiperSlide } from 'swiper/react'
+import { CTA } from '~/types/common'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+import Link from 'next/link'
+import { useRef } from 'react'
 // import Swiper core and required modules
 import SwiperCore from 'swiper'
 import { Navigation, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Button, cn } from 'ui'
 
 // install Swiper modules
 SwiperCore.use([Navigation, Pagination])
@@ -32,7 +31,7 @@ const ExamplesCarousel = ({
       <div className="w-full flex flex-col lg:flex-row justify-between items-start lg:items-end gap-4">
         <h3 className="h2 mb-0!">{title}</h3>
         {cta && (
-          <Button asChild type="default" size="tiny">
+          <Button asChild variant="default" size="tiny">
             <Link href={cta.href}>{cta.label}</Link>
           </Button>
         )}
diff --git a/apps/www/components/Footer/index.tsx b/apps/www/components/Footer/index.tsx
index c836fef8440..6fc423a4475 100644
--- a/apps/www/components/Footer/index.tsx
+++ b/apps/www/components/Footer/index.tsx
@@ -188,9 +188,9 @@ const Footer = (props: Props) => {
                     className="flex-1 md:max-w-72 xl:max-w-[80%] h-6! text-xs px-2"
                   />
                   <Button
-                    type="primary"
+                    variant="primary"
                     size="tiny"
-                    htmlType="submit"
+                    type="submit"
                     loading={newsletterStatus === 'loading'}
                     className="w-fit"
                   >
diff --git a/apps/www/components/Forms/ApplyToSupaSquadForm.tsx b/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
index 19da099f240..45470d76216 100644
--- a/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
+++ b/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
@@ -544,15 +544,15 @@ const FormContent = memo(function FormContent({
             <div className="flex flex-row gap-3">
               <Button
                 size="small"
-                htmlType="button"
-                type="outline"
+                type="button"
+                variant="outline"
                 onClick={handleCancel}
                 disabled={isSubmitting}
                 className="border-border text-foreground hover:bg-muted flex-1"
               >
                 Cancel
               </Button>
-              <Button size="small" htmlType="submit" disabled={isSubmitting} className="flex-1">
+              <Button size="small" type="submit" disabled={isSubmitting} className="flex-1">
                 {isSubmitting ? <>Submitting...</> : <>Submit Application</>}
               </Button>
             </div>
diff --git a/apps/www/components/Forms/RequestADemoForm.tsx b/apps/www/components/Forms/RequestADemoForm.tsx
index 7ff71a356b9..ebe80dc4eb7 100644
--- a/apps/www/components/Forms/RequestADemoForm.tsx
+++ b/apps/www/components/Forms/RequestADemoForm.tsx
@@ -256,7 +256,7 @@ const RequestADemoForm: FC<Props> = ({ className }) => {
             <Separator className="col-span-full" />
             <Button
               block
-              htmlType="submit"
+              type="submit"
               size="small"
               className="col-span-full"
               disabled={isSubmitting}
diff --git a/apps/www/components/Forms/TalkToPartnershipTeamForm.tsx b/apps/www/components/Forms/TalkToPartnershipTeamForm.tsx
index 27e3cddefbe..64a24982746 100644
--- a/apps/www/components/Forms/TalkToPartnershipTeamForm.tsx
+++ b/apps/www/components/Forms/TalkToPartnershipTeamForm.tsx
@@ -246,7 +246,7 @@ const TalkToPartnershipTeamForm: FC<Props> = ({ className }) => {
             <Separator className="col-span-full" />
             <Button
               block
-              htmlType="submit"
+              type="submit"
               size="small"
               className="col-span-full"
               disabled={isSubmitting}
diff --git a/apps/www/components/Go/TweetsSection.tsx b/apps/www/components/Go/TweetsSection.tsx
index 1e512fabe70..a7eab7fbf98 100644
--- a/apps/www/components/Go/TweetsSection.tsx
+++ b/apps/www/components/Go/TweetsSection.tsx
@@ -90,7 +90,7 @@ export default function TweetsSection({ section }: { section: GoTweetsSection })
                 <Button
                   key={i}
                   asChild
-                  type={cta.variant === 'secondary' ? 'default' : 'primary'}
+                  variant={cta.variant === 'secondary' ? 'default' : 'primary'}
                   size="small"
                 >
                   <Link href={cta.href}>{cta.label}</Link>
diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index ca3a1445518..cde263e913f 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -40,7 +40,7 @@ const Hero = () => {
                       Start your project
                     </Link>
                   </Button>
-                  <Button asChild size="medium" type="default">
+                  <Button asChild size="medium" variant="default">
                     <Link
                       href="/contact/sales"
                       as="/contact/sales"
diff --git a/apps/www/components/LaunchWeek/11/Releases/LW11Header.tsx b/apps/www/components/LaunchWeek/11/Releases/LW11Header.tsx
index d9f3f33d0e8..8721a746184 100644
--- a/apps/www/components/LaunchWeek/11/Releases/LW11Header.tsx
+++ b/apps/www/components/LaunchWeek/11/Releases/LW11Header.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import { Button, cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import Image from 'next/image'
 import Link from 'next/link'
+import React from 'react'
+import { Button, cn } from 'ui'
 
 const LW11Header = ({ className }: { className?: string }) => {
   return (
@@ -34,7 +34,7 @@ const LW11Header = ({ className }: { className?: string }) => {
           . <br className="hidden sm:block" /> Join us in this major milestone and explore{' '}
           <br className="hidden sm:block" /> the exciting features that come with it.
         </p>
-        <Button asChild size="small" type="alternative">
+        <Button asChild size="small" variant="alternative">
           <Link href="/ga">Read full announcement</Link>
         </Button>
       </SectionContainer>
diff --git a/apps/www/components/LaunchWeek/11/Releases/PrizeActions.tsx b/apps/www/components/LaunchWeek/11/Releases/PrizeActions.tsx
index 2e92b5021b4..c14a785daa3 100644
--- a/apps/www/components/LaunchWeek/11/Releases/PrizeActions.tsx
+++ b/apps/www/components/LaunchWeek/11/Releases/PrizeActions.tsx
@@ -4,10 +4,10 @@ import { Button } from 'ui'
 export default function PrizeActions() {
   return (
     <div className="w-full gap-2 flex items-center">
-      <Button onClick={() => null} type="secondary" size="tiny" asChild>
+      <Button onClick={() => null} variant="secondary" size="tiny" asChild>
         <Link href="/ga-week#ticket">Claim your ticket</Link>
       </Button>
-      <Button onClick={() => null} type="default" size="tiny">
+      <Button onClick={() => null} variant="default" size="tiny">
         <Link href="/blog/supabase-oss-hackathon">Join Hackathon</Link>
       </Button>
     </div>
diff --git a/apps/www/components/LaunchWeek/12/Releases/PrizeActions.tsx b/apps/www/components/LaunchWeek/12/Releases/PrizeActions.tsx
index 2e92b5021b4..c14a785daa3 100644
--- a/apps/www/components/LaunchWeek/12/Releases/PrizeActions.tsx
+++ b/apps/www/components/LaunchWeek/12/Releases/PrizeActions.tsx
@@ -4,10 +4,10 @@ import { Button } from 'ui'
 export default function PrizeActions() {
   return (
     <div className="w-full gap-2 flex items-center">
-      <Button onClick={() => null} type="secondary" size="tiny" asChild>
+      <Button onClick={() => null} variant="secondary" size="tiny" asChild>
         <Link href="/ga-week#ticket">Claim your ticket</Link>
       </Button>
-      <Button onClick={() => null} type="default" size="tiny">
+      <Button onClick={() => null} variant="default" size="tiny">
         <Link href="/blog/supabase-oss-hackathon">Join Hackathon</Link>
       </Button>
     </div>
diff --git a/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx b/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx
index d8a5633fef2..4e11106646e 100644
--- a/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx
+++ b/apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx
@@ -1,6 +1,8 @@
-import React, { FC, useEffect, useRef, useState } from 'react'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import { isBrowser } from 'common'
+import { ArrowUpRight, ChevronDown } from 'lucide-react'
 import Link from 'next/link'
-import { WeekDayProps, mainDays } from './data'
+import React, { FC, useEffect, useRef, useState } from 'react'
 import {
   Button,
   cn,
@@ -9,10 +11,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
-import { isBrowser } from 'common'
 
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import { ArrowUpRight, ChevronDown } from 'lucide-react'
+import { mainDays, WeekDayProps } from './data'
 
 const LWXStickyNav: FC = () => {
   const days = mainDays()
@@ -75,7 +75,7 @@ const LWXStickyNav: FC = () => {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="outline"
+                  variant="outline"
                   iconRight={<ChevronDown />}
                   className="md:hidden w-[200px] min-w-[150px] flex justify-between items-center py-2 pointer-events-auto"
                 >
diff --git a/apps/www/components/LaunchWeek/13/Releases/PrizeActions.tsx b/apps/www/components/LaunchWeek/13/Releases/PrizeActions.tsx
index 2e92b5021b4..c14a785daa3 100644
--- a/apps/www/components/LaunchWeek/13/Releases/PrizeActions.tsx
+++ b/apps/www/components/LaunchWeek/13/Releases/PrizeActions.tsx
@@ -4,10 +4,10 @@ import { Button } from 'ui'
 export default function PrizeActions() {
   return (
     <div className="w-full gap-2 flex items-center">
-      <Button onClick={() => null} type="secondary" size="tiny" asChild>
+      <Button onClick={() => null} variant="secondary" size="tiny" asChild>
         <Link href="/ga-week#ticket">Claim your ticket</Link>
       </Button>
-      <Button onClick={() => null} type="default" size="tiny">
+      <Button onClick={() => null} variant="default" size="tiny">
         <Link href="/blog/supabase-oss-hackathon">Join Hackathon</Link>
       </Button>
     </div>
diff --git a/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx b/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx
index bed4b0c0465..63293c6130a 100644
--- a/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx
+++ b/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx
@@ -1,6 +1,8 @@
-import React, { FC, useEffect, useRef, useState } from 'react'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import { isBrowser } from 'common'
+import { ArrowUpRight, ChevronDown } from 'lucide-react'
 import Link from 'next/link'
-import { WeekDayProps, mainDays } from './data'
+import React, { FC, useEffect, useRef, useState } from 'react'
 import {
   Button,
   cn,
@@ -9,10 +11,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
-import { isBrowser } from 'common'
 
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import { ArrowUpRight, ChevronDown } from 'lucide-react'
+import { mainDays, WeekDayProps } from './data'
 
 const LWXStickyNav: FC = () => {
   const days = mainDays()
@@ -75,7 +75,7 @@ const LWXStickyNav: FC = () => {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="outline"
+                  variant="outline"
                   iconRight={<ChevronDown />}
                   className="md:hidden w-[200px] min-w-[150px] flex justify-between items-center py-2 pointer-events-auto"
                 >
diff --git a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx b/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
index 193063adb5c..a0e7eaafdc0 100644
--- a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
+++ b/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
@@ -32,7 +32,7 @@ const LW15Hackathon: FC = () => {
             </p>
             <p>Compete solo or in a team, submit a quick demo and win.</p>
           </div>
-          <Button type="secondary" size="medium" asChild>
+          <Button variant="secondary" size="medium" asChild>
             <Link href="/blog/lw15-hackathon">Join Hackathon</Link>
           </Button>
         </div>
diff --git a/apps/www/components/LaunchWeek/15/LW15MainStage.tsx b/apps/www/components/LaunchWeek/15/LW15MainStage.tsx
index 4a2d5070b1b..b2e43428c17 100644
--- a/apps/www/components/LaunchWeek/15/LW15MainStage.tsx
+++ b/apps/www/components/LaunchWeek/15/LW15MainStage.tsx
@@ -134,7 +134,11 @@ const DayCardShipped = ({ day }: { day: WeekDayProps }) => {
             className="block lg:opacity-0 lg:blur-lg duration-300 group-hover/main:lg:blur-none transition-all group-hover/main:lg:opacity-100"
             ref={hiddenRef}
           >
-            <Button type="outline" size="small" className="text-current rounded-xs border-dashed">
+            <Button
+              variant="outline"
+              size="small"
+              className="text-current rounded-xs border-dashed"
+            >
               <Link href={day.blog!}>Read more</Link>
             </Button>
           </div>
diff --git a/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketPage.tsx b/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketPage.tsx
index 1857d24c141..77bc67942c0 100644
--- a/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketPage.tsx
+++ b/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketPage.tsx
@@ -1,16 +1,16 @@
-import { useState } from 'react'
-import dayjs from 'dayjs'
-import { Button, cn } from 'ui'
-import SectionContainer from 'components/Layouts/SectionContainer'
 import useLw15ConfData, { UserTicketData } from 'components/LaunchWeek/15/hooks/use-conf-data'
-import { useRegistration } from '../hooks/use-registration'
-import { LWSVG, FifteenSVG, LW15ThemeSwitcher } from '../lw15.components'
+import SectionContainer from 'components/Layouts/SectionContainer'
+import dayjs from 'dayjs'
+import Link from 'next/link'
+import { useState } from 'react'
+import { Button, cn } from 'ui'
+
+import { updateTicketColors, useRegistration } from '../hooks/use-registration'
+import { FifteenSVG, LW15ThemeSwitcher, LWSVG } from '../lw15.components'
+import { BG_COLORS, TYPO_COLORS } from './colors'
 import LW15Ticket from './LW15Ticket'
 import LW15TicketShare from './LW15TicketShare'
 import TicketURLCopy from './TicketURLCopy'
-import { TYPO_COLORS, BG_COLORS } from './colors'
-import { updateTicketColors } from '../hooks/use-registration'
-import Link from 'next/link'
 
 const LW15TicketPage = ({
   user: userFromProps,
@@ -144,7 +144,7 @@ const LW15TicketPage = ({
             <div className="col-span-full">
               <Button
                 className="h-auto py-1 px-2 min-w-[125px] min-h-[28px]"
-                type="secondary"
+                variant="secondary"
                 size="medium"
                 onClick={handleClaimTicket}
               >
@@ -154,7 +154,7 @@ const LW15TicketPage = ({
           )}
           {isSharePage && isLoggedTicketOwner && (
             <div className="col-span-full">
-              <Button className="h-auto py-1 px-2" type="secondary" size="medium" asChild>
+              <Button className="h-auto py-1 px-2" variant="secondary" size="medium" asChild>
                 <Link href="/launch-week/ticket">Customize your ticket</Link>
               </Button>
             </div>
diff --git a/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketShare.tsx b/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketShare.tsx
index 659bebd6cb4..cd51fefa66b 100644
--- a/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketShare.tsx
+++ b/apps/www/components/LaunchWeek/15/Ticketing/LW15TicketShare.tsx
@@ -76,7 +76,7 @@ export default function LW15TicketShare() {
     <div className="flex flex-row flex-wrap justify-stretch w-full gap-1 pointer-events-auto">
       <Button
         onClick={() => handleShare('twitter')}
-        type={userData.shared_on_twitter ? 'secondary' : 'default'}
+        variant={userData.shared_on_twitter ? 'secondary' : 'default'}
         icon={userData.shared_on_twitter && <Check strokeWidth={2} />}
         size={isLessThanMd ? 'tiny' : 'small'}
         className="px-2 lg:px-3.5 h-[28px] lg:h-[34px] flex-1 w-full"
@@ -88,7 +88,7 @@ export default function LW15TicketShare() {
       </Button>
       <Button
         onClick={() => handleShare('linkedin')}
-        type={userData.shared_on_linkedin ? 'secondary' : 'default'}
+        variant={userData.shared_on_linkedin ? 'secondary' : 'default'}
         icon={userData.shared_on_linkedin && <Check strokeWidth={2} />}
         size={isLessThanMd ? 'tiny' : 'small'}
         className="px-2 lg:px-3.5 h-[28px] lg:h-[34px] flex-1 w-full"
diff --git a/apps/www/components/LaunchWeek/5/ScheduleInfo.tsx b/apps/www/components/LaunchWeek/5/ScheduleInfo.tsx
index 140d1881593..abaa3149ea0 100644
--- a/apps/www/components/LaunchWeek/5/ScheduleInfo.tsx
+++ b/apps/www/components/LaunchWeek/5/ScheduleInfo.tsx
@@ -22,7 +22,7 @@ export function ScheduleInfo() {
           </p>
         </div>
         <div className="px-10">
-          <Button asChild type="default">
+          <Button asChild variant="default">
             <Link href="/launch-week-register">Get a ticket</Link>
           </Button>
         </div>
diff --git a/apps/www/components/Nav/GitHubButton.tsx b/apps/www/components/Nav/GitHubButton.tsx
index e3cabccace7..392b440daf8 100644
--- a/apps/www/components/Nav/GitHubButton.tsx
+++ b/apps/www/components/Nav/GitHubButton.tsx
@@ -1,6 +1,6 @@
-import { Button } from 'ui'
-import { useSendTelemetryEvent } from '~/lib/telemetry'
 import staticContent from '.generated/staticContent/_index.json'
+import { useSendTelemetryEvent } from '~/lib/telemetry'
+import { Button } from 'ui'
 
 const GitHubButton = () => {
   const sendTelemetryEvent = useSendTelemetryEvent()
@@ -26,7 +26,7 @@ const GitHubButton = () => {
   return (
     <Button
       className="hidden group lg:flex text-foreground-light hover:text-foreground in-data-nav-transparent:text-foreground"
-      type="text"
+      variant="text"
       asChild
       onClick={() => sendTelemetryEvent({ action: 'homepage_github_button_clicked' })}
     >
diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx
index daa43631e75..f199c504255 100644
--- a/apps/www/components/Nav/MobileMenu.tsx
+++ b/apps/www/components/Nav/MobileMenu.tsx
@@ -278,7 +278,7 @@ export const MobileMenu = ({ open, setOpen, menu }: Props) => {
                           })
                         }
                       >
-                        <Button block type="default" asChild>
+                        <Button block variant="default" asChild>
                           <a type={undefined} className="h-10 py-4">
                             Sign in
                           </a>
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 43f700548cc..827d373bdaa 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -129,7 +129,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
                         <NavigationMenuItem className="text-sm font-medium" key={menuItem.title}>
                           <NavigationMenuTrigger
                             className={cn(
-                              buttonVariants({ type: 'text', size: 'small' }),
+                              buttonVariants({ variant: 'text', size: 'small' }),
                               'bg-transparent! hover:text-brand-link data-open:text-brand-link! data-radix-collection-item:focus-visible:ring-2 data-radix-collection-item:focus-visible:ring-foreground-lighter data-radix-collection-item:focus-visible:text-foreground px-2 h-auto'
                             )}
                           >
@@ -171,7 +171,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
                     </>
                   ) : (
                     <>
-                      <Button type="default" className="hidden lg:block" asChild>
+                      <Button variant="default" className="hidden lg:block" asChild>
                         <Link
                           href="https://supabase.com/dashboard"
                           onClick={() =>
diff --git a/apps/www/components/NewFeatureCard.tsx b/apps/www/components/NewFeatureCard.tsx
index 00909156164..7ac528d4a1d 100644
--- a/apps/www/components/NewFeatureCard.tsx
+++ b/apps/www/components/NewFeatureCard.tsx
@@ -13,7 +13,7 @@ export interface CardProps {
     label: string
     href: string
     target: HTMLAnchorElement['target']
-    type: ButtonProps['type']
+    type: ButtonProps['variant']
   }[]
   image: {
     dark: string
diff --git a/apps/www/components/OpenSourceSection.tsx b/apps/www/components/OpenSourceSection.tsx
index 3c9170dcf56..3ef66b7713c 100644
--- a/apps/www/components/OpenSourceSection.tsx
+++ b/apps/www/components/OpenSourceSection.tsx
@@ -1,9 +1,10 @@
+import staticContent from '.generated/staticContent/_index.json'
+import { kFormatter } from '~/lib/helpers'
+import { useSendTelemetryEvent } from '~/lib/telemetry'
 import Link from 'next/link'
 import { Button } from 'ui'
+
 import SectionContainer from './Layouts/SectionContainer'
-import { useSendTelemetryEvent } from '~/lib/telemetry'
-import { kFormatter } from '~/lib/helpers'
-import staticContent from '.generated/staticContent/_index.json'
 
 const OpenSourceSection = () => {
   const sendTelemetryEvent = useSendTelemetryEvent()
@@ -30,7 +31,7 @@ const OpenSourceSection = () => {
           }
           asChild
           size="small"
-          type="default"
+          variant="default"
           className="pl-2.5!"
         >
           <Link
diff --git a/apps/www/components/Pricing/ComputePricingCalculator.tsx b/apps/www/components/Pricing/ComputePricingCalculator.tsx
index 9f7305203a0..ed0ea60056d 100644
--- a/apps/www/components/Pricing/ComputePricingCalculator.tsx
+++ b/apps/www/components/Pricing/ComputePricingCalculator.tsx
@@ -234,7 +234,7 @@ const ComputePricingCalculator = ({
         <div className="text-right w-full">
           <Button
             size="tiny"
-            type="primary"
+            variant="primary"
             icon={<Plus />}
             onClick={() => {
               if (disableInteractivity) return
diff --git a/apps/www/components/Pricing/PricingAddons.tsx b/apps/www/components/Pricing/PricingAddons.tsx
index 4e0864a658a..339c65fb027 100644
--- a/apps/www/components/Pricing/PricingAddons.tsx
+++ b/apps/www/components/Pricing/PricingAddons.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { FC } from 'react'
 import { Button, cn } from 'ui'
+
 import CostControlAnimation from './CostControlAnimation'
 
 const addons = [
@@ -98,7 +99,7 @@ const AddonCard = ({ addon }: any) => {
           <Button
             asChild
             size="tiny"
-            type="default"
+            variant="default"
             iconRight={<ArrowUpRight className="w-4 h-4" />}
           >
             <Link href={addon.ctaLink} target={addon.ctaTarget}>
diff --git a/apps/www/components/Pricing/PricingComparisonTable.tsx b/apps/www/components/Pricing/PricingComparisonTable.tsx
index cea927b0898..515f662f9ea 100644
--- a/apps/www/components/Pricing/PricingComparisonTable.tsx
+++ b/apps/www/components/Pricing/PricingComparisonTable.tsx
@@ -82,7 +82,7 @@ const MobileHeader = ({
           planId={selectedPlan.planId}
         />
       ) : (
-        <Button asChild size="medium" type={plan === 'Enterprise' ? 'default' : 'primary'} block>
+        <Button asChild size="medium" variant={plan === 'Enterprise' ? 'default' : 'primary'} block>
           <Link
             href={selectedPlan.href}
             onClick={() =>
@@ -442,7 +442,7 @@ const PricingComparisonTable = ({
                           <Button
                             asChild
                             size="tiny"
-                            type={plan.name === 'Enterprise' ? 'default' : 'primary'}
+                            variant={plan.name === 'Enterprise' ? 'default' : 'primary'}
                             block
                           >
                             <Link
diff --git a/apps/www/components/Pricing/PricingComputeSection.tsx b/apps/www/components/Pricing/PricingComputeSection.tsx
index 09e2e38bb8f..c79005237f9 100644
--- a/apps/www/components/Pricing/PricingComputeSection.tsx
+++ b/apps/www/components/Pricing/PricingComputeSection.tsx
@@ -129,7 +129,7 @@ const PricingComputeSection = () => {
             </h3>
           </div>
 
-          <Button asChild size="tiny" type="default">
+          <Button asChild size="tiny" variant="default">
             <Link href="https://supabase.com/docs/guides/platform/compute-add-ons">
               Learn about Compute add-ons
             </Link>
diff --git a/apps/www/components/Pricing/PricingDiskSection.tsx b/apps/www/components/Pricing/PricingDiskSection.tsx
index 39803e328b0..a62f563fd33 100644
--- a/apps/www/components/Pricing/PricingDiskSection.tsx
+++ b/apps/www/components/Pricing/PricingDiskSection.tsx
@@ -101,7 +101,7 @@ const PricingDiskSection = () => (
       </div>
     </Panel>
     <div className="mt-8 flex justify-center">
-      <Button asChild size="tiny" type="default" iconRight={<ArrowUpRight className="w-4" />}>
+      <Button asChild size="tiny" variant="default" iconRight={<ArrowUpRight className="w-4" />}>
         <Link href="https://supabase.com/docs/guides/platform/compute-and-disk#disk">
           Learn about advanced disk config
         </Link>
diff --git a/apps/www/components/Pricing/PricingPlans.tsx b/apps/www/components/Pricing/PricingPlans.tsx
index b387ce9ce65..cbbff8f5b82 100644
--- a/apps/www/components/Pricing/PricingPlans.tsx
+++ b/apps/www/components/Pricing/PricingPlans.tsx
@@ -83,7 +83,7 @@ const PricingPlans = ({ organizations, hasExistingOrganizations }: PricingPlansP
                     <Button
                       block
                       size="large"
-                      type={plan.name === 'Enterprise' ? 'default' : 'primary'}
+                      variant={plan.name === 'Enterprise' ? 'default' : 'primary'}
                       asChild
                     >
                       <Link href={plan.href} onClick={sendPricingEvent}>
diff --git a/apps/www/components/Pricing/UpgradePlan.tsx b/apps/www/components/Pricing/UpgradePlan.tsx
index 2c7b0d6297d..50f70c5177a 100644
--- a/apps/www/components/Pricing/UpgradePlan.tsx
+++ b/apps/www/components/Pricing/UpgradePlan.tsx
@@ -1,10 +1,10 @@
 'use client'
 
+import { Organization } from '~/data/organizations'
 import { Check, ChevronsUpDown, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { PlanId } from 'shared-data/plans'
-
 import {
   Button,
   ButtonProps,
@@ -29,7 +29,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from 'ui'
-import { Organization } from '~/data/organizations'
 
 interface UpgradePlanProps {
   organizations?: Organization[]
@@ -45,7 +44,7 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button block size={size} type="primary" onClick={onClick}>
+        <Button block size={size} variant="primary" onClick={onClick}>
           Upgrade now
         </Button>
       </DialogTrigger>
@@ -61,7 +60,7 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
           <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 role="combobox"
                 size={'small'}
                 aria-expanded={open}
@@ -140,7 +139,7 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
 
         <DialogFooter>
           <DialogClose asChild>
-            <Button type="outline">Cancel</Button>
+            <Button variant="outline">Cancel</Button>
           </DialogClose>
           <Button disabled={!value} asChild>
             <Link
diff --git a/apps/www/components/Realtime/example-layout.tsx b/apps/www/components/Realtime/example-layout.tsx
index 12606ed6499..832fa419153 100644
--- a/apps/www/components/Realtime/example-layout.tsx
+++ b/apps/www/components/Realtime/example-layout.tsx
@@ -41,7 +41,7 @@ ${appJsCode}`
         <div>
           <div className="flex w-fit gap-1">
             <Button
-              type="text"
+              variant="text"
               onClick={() => setViewMode('code')}
               icon={<Code size={14} />}
               size="tiny"
@@ -51,7 +51,7 @@ ${appJsCode}`
               <span className="hidden sm:inline">Code</span>
             </Button>
             <Button
-              type="text"
+              variant="text"
               onClick={() => setViewMode('preview')}
               size="tiny"
               icon={<Eye size={14} />}
@@ -68,7 +68,7 @@ ${appJsCode}`
         {/* Right: Navigation */}
         <div className="flex gap-1 justify-end">
           <Button
-            type="outline"
+            variant="outline"
             onClick={onPrevious}
             disabled={!onPrevious}
             className="p-1 rounded-sm hover:bg-surface-200 text-foreground-light disabled:opacity-50 disabled:cursor-not-allowed"
@@ -77,7 +77,7 @@ ${appJsCode}`
             <ChevronLeft size={16} />
           </Button>
           <Button
-            type="outline"
+            variant="outline"
             onClick={onNext}
             disabled={!onNext}
             className="p-1 rounded-sm hover:bg-surface-200 text-foreground-light disabled:opacity-50 disabled:cursor-not-allowed"
diff --git a/apps/www/components/Sections/APISection.tsx b/apps/www/components/Sections/APISection.tsx
index 892b7c7f07e..8f27c933360 100644
--- a/apps/www/components/Sections/APISection.tsx
+++ b/apps/www/components/Sections/APISection.tsx
@@ -43,7 +43,7 @@ function APISection(props: Props) {
         <h2 className="h2">{props.title}</h2>
         <div className="p">{props.text}</div>
         {props.documentation_link && (
-          <Button asChild size="small" className="mt-4" type="default" icon={<ArrowUpRight />}>
+          <Button asChild size="small" className="mt-4" variant="default" icon={<ArrowUpRight />}>
             <Link href={props.documentation_link} as={props.documentation_link}>
               {props.ctaLabel ? props.ctaLabel : 'Explore documentation'}
             </Link>
diff --git a/apps/www/components/Sections/FeaturesSection.tsx b/apps/www/components/Sections/FeaturesSection.tsx
index 56533069848..0ba37d82e16 100644
--- a/apps/www/components/Sections/FeaturesSection.tsx
+++ b/apps/www/components/Sections/FeaturesSection.tsx
@@ -50,7 +50,7 @@ const FeaturesSection = ({
               </h2>
               <p className="text-lighter mb-4">{paragraph}</p>
               {cta && (
-                <Button asChild type="default" size="small" icon={<ArrowUpRight />}>
+                <Button asChild variant="default" size="small" icon={<ArrowUpRight />}>
                   <Link href={cta.link}>{cta.label ?? 'Explore documentation'}</Link>
                 </Button>
               )}
diff --git a/apps/www/components/Sections/FunctionsUsecases.tsx b/apps/www/components/Sections/FunctionsUsecases.tsx
index f71fe58ad2f..191f70dfe83 100644
--- a/apps/www/components/Sections/FunctionsUsecases.tsx
+++ b/apps/www/components/Sections/FunctionsUsecases.tsx
@@ -78,7 +78,7 @@ function FunctionsUsecases(props: Props) {
             )
           })}
           {props.documentation_link && (
-            <Button asChild size="small" className="mt-4" type="default" icon={<ArrowUpRight />}>
+            <Button asChild size="small" className="mt-4" variant="default" icon={<ArrowUpRight />}>
               <Link href={props.documentation_link} as={props.documentation_link}>
                 Explore documentation
               </Link>
diff --git a/apps/www/components/Sections/GithubExamples.tsx b/apps/www/components/Sections/GithubExamples.tsx
index bd81e4873b1..998d5a2b7f7 100644
--- a/apps/www/components/Sections/GithubExamples.tsx
+++ b/apps/www/components/Sections/GithubExamples.tsx
@@ -1,16 +1,13 @@
+import Examples from '~/data/Examples'
+import { ArrowLeft, ArrowRight, BookOpen, Github } from 'lucide-react'
+import Link from 'next/link'
 import { useRef } from 'react'
-
-import { Swiper, SwiperSlide } from 'swiper/react'
 // import Swiper core and required modules
 import SwiperCore from 'swiper'
 import { Navigation, Pagination } from 'swiper/modules'
-
-import { Github } from 'lucide-react'
-import Link from 'next/link'
+import { Swiper, SwiperSlide } from 'swiper/react'
 import { Button } from 'ui'
 
-import { ArrowLeft, ArrowRight, BookOpen } from 'lucide-react'
-import Examples from '~/data/Examples'
 import ExampleCard from '../ExampleCard'
 
 // install Swiper modules
@@ -29,10 +26,10 @@ function GithubExamples() {
             Supported by a network of early advocates, contributors, and champions.
           </p>
           <div className="flex items-center justify-center gap-2 py-4">
-            <Button asChild size="small" type="default" icon={<BookOpen size={12} />}>
+            <Button asChild size="small" variant="default" icon={<BookOpen size={12} />}>
               <Link href="/docs/guides/resources/examples">View guides</Link>
             </Button>
-            <Button asChild size="small" type="default" icon={<Github size={12} />}>
+            <Button asChild size="small" variant="default" icon={<Github size={12} />}>
               <Link
                 href="https://github.com/supabase/supabase/tree/master/examples"
                 as="https://github.com/supabase/supabase/tree/master/examples"
diff --git a/apps/www/components/Sections/ParagraphSection.tsx b/apps/www/components/Sections/ParagraphSection.tsx
index be54bca2139..882fd1a66fd 100644
--- a/apps/www/components/Sections/ParagraphSection.tsx
+++ b/apps/www/components/Sections/ParagraphSection.tsx
@@ -41,7 +41,7 @@ const FeaturesSection = ({
           </h2>
           <p className="text-lighter mb-4 font-mono">{paragraph}</p>
           {cta && (
-            <Button asChild type="default" size="small" icon={<ArrowUpRight />}>
+            <Button asChild variant="default" size="small" icon={<ArrowUpRight />}>
               <Link href={cta.link}>{cta.label ?? 'Explore documentation'}</Link>
             </Button>
           )}
diff --git a/apps/www/components/Sections/ProductHeader.tsx b/apps/www/components/Sections/ProductHeader.tsx
index 5a43dc97435..c9df322aabc 100644
--- a/apps/www/components/Sections/ProductHeader.tsx
+++ b/apps/www/components/Sections/ProductHeader.tsx
@@ -64,7 +64,7 @@ const ProductHeader = (props: Types) => {
               </Link>
             </Button>
             {props.documentation_url && (
-              <Button asChild type="default" size="medium" icon={<BookOpen />}>
+              <Button asChild variant="default" size="medium" icon={<BookOpen />}>
                 <Link
                   href={props.documentation_url}
                   as={props.documentation_url}
diff --git a/apps/www/components/Sections/ProductHeader2.tsx b/apps/www/components/Sections/ProductHeader2.tsx
index 528e4545a84..2a7325e54a2 100644
--- a/apps/www/components/Sections/ProductHeader2.tsx
+++ b/apps/www/components/Sections/ProductHeader2.tsx
@@ -69,7 +69,7 @@ const ProductHeader = ({ footerPosition = 'left', ...props }: Props) => (
             <Button
               key={cta.href}
               size="medium"
-              type={cta.type ?? 'default'}
+              variant={cta.type ?? 'default'}
               onClick={cta.onClick}
               asChild
             >
diff --git a/apps/www/components/Sections/ProductHeaderCentered.tsx b/apps/www/components/Sections/ProductHeaderCentered.tsx
index aa4fbb081b1..f9797842ec9 100644
--- a/apps/www/components/Sections/ProductHeaderCentered.tsx
+++ b/apps/www/components/Sections/ProductHeaderCentered.tsx
@@ -89,14 +89,14 @@ const ProductHeaderCentered = (props: Types) => (
             </Button>
           )}
           {props.video && (
-            <Button type="default" size="medium" icon={<PlayCircle />} asChild>
+            <Button variant="default" size="medium" icon={<PlayCircle />} asChild>
               <Link href={props.video} as={props.video}>
                 Watch video
               </Link>
             </Button>
           )}
           {props.secondaryCta && (
-            <Button type="default" size="medium" asChild>
+            <Button variant="default" size="medium" asChild>
               <Link href={props.secondaryCta.link} as={props.secondaryCta.link}>
                 {props.secondaryCta.label}
               </Link>
diff --git a/apps/www/components/Sections/ProductModulesHeader.tsx b/apps/www/components/Sections/ProductModulesHeader.tsx
index 70fbbd14197..c36e4d3a536 100644
--- a/apps/www/components/Sections/ProductModulesHeader.tsx
+++ b/apps/www/components/Sections/ProductModulesHeader.tsx
@@ -109,14 +109,14 @@ const ProductModulesHeader = (props: Types) => (
             </Button>
           )}
           {props.video && (
-            <Button type="default" size="small" icon={<PlayCircle />} asChild>
+            <Button variant="default" size="small" icon={<PlayCircle />} asChild>
               <Link href={props.video} as={props.video}>
                 Watch video
               </Link>
             </Button>
           )}
           {props.secondaryCta && (
-            <Button type="default" size="small" asChild>
+            <Button variant="default" size="small" asChild>
               <Link href={props.secondaryCta.link} as={props.secondaryCta.link}>
                 {props.secondaryCta.label}
               </Link>
diff --git a/apps/www/components/Sections/ProductsCta2.tsx b/apps/www/components/Sections/ProductsCta2.tsx
index 8fb7fcef56e..d25b2e25d59 100644
--- a/apps/www/components/Sections/ProductsCta2.tsx
+++ b/apps/www/components/Sections/ProductsCta2.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
-import React from 'react'
-import { Button, cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import MagnifiedProducts from '~/components/MagnifiedProducts'
 import { PRODUCT_SHORTNAMES } from '~/lib/constants'
+import Link from 'next/link'
+import React from 'react'
+import { Button, cn } from 'ui'
 
 export type Products = PRODUCT_SHORTNAMES
 
@@ -26,10 +26,10 @@ function ProductsCta(props: Props) {
       <div className="flex flex-col col-span-1 text-center xl:text-left xl:justify-center items-center xl:items-start">
         <h2 className="h2 w-max">Ready to start building?</h2>
         <div className="flex gap-2 py-2">
-          <Button asChild type="primary" size="small" className="h-full">
+          <Button asChild variant="primary" size="small" className="h-full">
             <Link href="https://supabase.com/dashboard">Start for free</Link>
           </Button>
-          <Button asChild type="default" size="small">
+          <Button asChild variant="default" size="small">
             <Link href="https://forms.supabase.com/enterprise">Contact Enterprise</Link>
           </Button>
         </div>
diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx
index 1fa15435dc6..2f4aa91d1f8 100644
--- a/apps/www/components/Sections/TimedTabsSection.tsx
+++ b/apps/www/components/Sections/TimedTabsSection.tsx
@@ -138,7 +138,7 @@ const TimedTabsSection = ({
           </h2>
           <p className="text-foreground-lighter mb-4 max-w-sm">{paragraph}</p>
           {cta && (
-            <Button asChild type="default" size="small" icon={<ArrowUpRight />}>
+            <Button asChild variant="default" size="small" icon={<ArrowUpRight />}>
               <Link href={cta.link}>{cta.label ?? 'Explore more'}</Link>
             </Button>
           )}
diff --git a/apps/www/components/Sections/UseCasesSection.tsx b/apps/www/components/Sections/UseCasesSection.tsx
index efd6264a98e..afe433e30d9 100644
--- a/apps/www/components/Sections/UseCasesSection.tsx
+++ b/apps/www/components/Sections/UseCasesSection.tsx
@@ -83,11 +83,11 @@ const UseCase = ({
           </div>
           {useCase.cta &&
             (useCase.cta.isDisabled ? (
-              <Button size="tiny" type="default" disabled className="justify-end">
+              <Button size="tiny" variant="default" disabled className="justify-end">
                 {useCase.cta.label ?? 'View example'}
               </Button>
             ) : (
-              <Button asChild size="tiny" type="default" iconRight={<ArrowUpRight />}>
+              <Button asChild size="tiny" variant="default" iconRight={<ArrowUpRight />}>
                 <Link href={useCase.cta.link} target="_blank">
                   {useCase.cta.label ?? 'View example'}
                 </Link>
diff --git a/apps/www/components/SecurityNewsletterForm.tsx b/apps/www/components/SecurityNewsletterForm.tsx
index 4791bd9162c..a4780ee4082 100644
--- a/apps/www/components/SecurityNewsletterForm.tsx
+++ b/apps/www/components/SecurityNewsletterForm.tsx
@@ -100,7 +100,7 @@ const SecurityNewsletterForm = () => {
               />
             </div>
             {errorMessage && <p className="text-destructive text-sm">{errorMessage}</p>}
-            <Button type="primary" size="large" htmlType="submit" loading={status === 'loading'}>
+            <Button variant="primary" size="large" type="submit" loading={status === 'loading'}>
               Subscribe
             </Button>
           </form>
diff --git a/apps/www/components/Solutions/CtaSection.tsx b/apps/www/components/Solutions/CtaSection.tsx
index f3e40dde692..e8996601ea1 100644
--- a/apps/www/components/Solutions/CtaSection.tsx
+++ b/apps/www/components/Solutions/CtaSection.tsx
@@ -49,7 +49,7 @@ const CtaSection = ({
               </Link>
             </Button>
             {secondaryCta && (
-              <Button asChild size="medium" type="default">
+              <Button asChild size="medium" variant="default">
                 <Link href={secondaryCta.url}>{secondaryCta.label}</Link>
               </Button>
             )}
diff --git a/apps/www/components/Solutions/TwoColumnsSection.tsx b/apps/www/components/Solutions/TwoColumnsSection.tsx
index b70ba7dcd86..5986cb24d36 100644
--- a/apps/www/components/Solutions/TwoColumnsSection.tsx
+++ b/apps/www/components/Solutions/TwoColumnsSection.tsx
@@ -54,7 +54,7 @@ const CodeSnippet = ({ prompt }: { prompt: AIPrompt }) => {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 className="text-foreground-light hover:text-foreground absolute top-2 right-2 w-7 h-7 p-1 shadow-lg"
                 onClick={async () => {
                   await navigator.clipboard.writeText(prompt.code)
diff --git a/apps/www/components/Solutions/WhatItTakesSection.tsx b/apps/www/components/Solutions/WhatItTakesSection.tsx
index 398605970d0..8331f2066c6 100644
--- a/apps/www/components/Solutions/WhatItTakesSection.tsx
+++ b/apps/www/components/Solutions/WhatItTakesSection.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import { ArrowUpRight } from 'lucide-react'
-import { Button } from 'ui'
 import SectionContainer from 'components/Layouts/SectionContainer'
+import { ArrowUpRight } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from 'ui'
 
 export interface WhatItTakesItem {
   id: string
@@ -28,7 +28,12 @@ const WhatItTakesSection = ({ id, heading, items, className = '' }: WhatItTakesS
             className="flex flex-col gap-3 p-6 rounded-lg border border-default bg-surface-75"
           >
             <p className="text-foreground-light">{item.description}</p>
-            <Button asChild type="default" size="tiny" icon={<ArrowUpRight className="w-3 h-3" />}>
+            <Button
+              asChild
+              variant="default"
+              size="tiny"
+              icon={<ArrowUpRight className="w-3 h-3" />}
+            >
               <Link href={item.url}>{item.linkLabel ?? 'Read more'}</Link>
             </Button>
           </div>
diff --git a/apps/www/components/SolutionsStickyNav.tsx b/apps/www/components/SolutionsStickyNav.tsx
index f89a74b4873..a7d21e26306 100644
--- a/apps/www/components/SolutionsStickyNav.tsx
+++ b/apps/www/components/SolutionsStickyNav.tsx
@@ -1,7 +1,15 @@
-import React from 'react'
+import SectionContainer from 'components/Layouts/SectionContainer'
+import {
+  appTypeSolutions,
+  migrationSolutions,
+  skillBasedSolutions,
+  SolutionTypes,
+  useCaseSolutions,
+} from 'data/Solutions'
 import { ChevronDown } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import React from 'react'
 import {
   Button,
   cn,
@@ -11,15 +19,6 @@ import {
   DropdownMenuTrigger,
 } from 'ui'
 
-import SectionContainer from 'components/Layouts/SectionContainer'
-import {
-  SolutionTypes,
-  appTypeSolutions,
-  migrationSolutions,
-  skillBasedSolutions,
-  useCaseSolutions,
-} from 'data/Solutions'
-
 interface Props {
   activeItem: SolutionTypes
   className?: string
@@ -59,7 +58,7 @@ function SolutionsStickyNav({ type, activeItem, className }: Props) {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  type="text"
+                  variant="text"
                   iconRight={<ChevronDown />}
                   className="w-full min-w-[200px] flex justify-between items-center py-2"
                 >
diff --git a/apps/www/components/Supasquad/CtaSection.tsx b/apps/www/components/Supasquad/CtaSection.tsx
index 9ea1715eac5..dd3b474cce8 100644
--- a/apps/www/components/Supasquad/CtaSection.tsx
+++ b/apps/www/components/Supasquad/CtaSection.tsx
@@ -42,7 +42,7 @@ const CtaSection = ({ id, title, subtitle, primaryCta, secondaryCta, className }
               </Link>
             </Button>
             {secondaryCta && (
-              <Button asChild size="medium" type="default">
+              <Button asChild size="medium" variant="default">
                 <Link href={secondaryCta.url}>{secondaryCta.label}</Link>
               </Button>
             )}
diff --git a/apps/www/components/SurveyResults/SurveyChart.tsx b/apps/www/components/SurveyResults/SurveyChart.tsx
index 02e50a42144..b233757e481 100644
--- a/apps/www/components/SurveyResults/SurveyChart.tsx
+++ b/apps/www/components/SurveyResults/SurveyChart.tsx
@@ -437,7 +437,7 @@ export function SurveyChart({
                     No responses match those filters. Maybe next year?
                   </p>
                   <Button
-                    type="primary"
+                    variant="primary"
                     size="tiny"
                     onClick={() =>
                       setActiveFilters(
@@ -476,7 +476,7 @@ export function SurveyChart({
             chartData.length > 3 && (
               <div className="absolute bottom-0 left-0 right-0 flex items-center justify-center py-4 bg-linear-to-b from-transparent to-background">
                 <Button
-                  type="default"
+                  variant="default"
                   size="tiny"
                   onClick={() => setIsExpanded(true)}
                   className="shadow-xs"
@@ -529,7 +529,7 @@ function SurveyFilter({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          type="default"
+          variant="default"
           size="tiny"
           iconRight={<ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />}
         >
diff --git a/apps/www/data/home/content.tsx b/apps/www/data/home/content.tsx
index 4bb368cb57e..bde1c25262f 100644
--- a/apps/www/data/home/content.tsx
+++ b/apps/www/data/home/content.tsx
@@ -173,7 +173,7 @@ export default () => {
       heading: 'Join the community',
       subheading: 'Discover what our community has to say about their Supabase experience.',
       ctas: (
-        <Button asChild type="default" size="small" icon={<IconDiscord />}>
+        <Button asChild variant="default" size="small" icon={<IconDiscord />}>
           <Link
             href={'https://discord.supabase.com/'}
             target="_blank"
diff --git a/apps/www/data/solutions/beginners.tsx b/apps/www/data/solutions/beginners.tsx
index 6cae33273f4..5b5d3fe61f0 100644
--- a/apps/www/data/solutions/beginners.tsx
+++ b/apps/www/data/solutions/beginners.tsx
@@ -479,7 +479,7 @@ const data: () => {
       heading: 'Fun projects built with Supabase',
       subheading: 'Discover what our community has to say about their Supabase experience.',
       ctas: (
-        <Button asChild type="default" size="small" icon={<IconDiscord />}>
+        <Button asChild variant="default" size="small" icon={<IconDiscord />}>
           <Link
             href={'https://discord.supabase.com/'}
             target="_blank"
diff --git a/apps/www/pages/assistant.tsx b/apps/www/pages/assistant.tsx
index 0c5060aa1a6..e7f3c9e5d40 100644
--- a/apps/www/pages/assistant.tsx
+++ b/apps/www/pages/assistant.tsx
@@ -682,13 +682,13 @@ function Assistant() {
                 </p>
                 <div className="min-h-12 flex items-center gap-x-2">
                   {!isUserLoading && (
-                    <Button type="primary" size="medium" asChild>
+                    <Button variant="primary" size="medium" asChild>
                       <Link href="/dashboard/project/_?sidebar=ai-assistant">
                         {isLoggedIn ? 'Dashboard' : 'Start your project'}
                       </Link>
                     </Button>
                   )}
-                  <Button type="default" size="medium" asChild>
+                  <Button variant="default" size="medium" asChild>
                     <Link
                       target="_blank"
                       rel="noreferrer noopener"
@@ -726,7 +726,7 @@ function Assistant() {
                       >
                         <Button
                           className="rounded-full"
-                          type="default"
+                          variant="default"
                           onClick={() => handleNewMessage(query.messages)}
                         >
                           {query.label}
diff --git a/apps/www/pages/auth.tsx b/apps/www/pages/auth.tsx
index a5663b18c47..a7e16bbdd67 100644
--- a/apps/www/pages/auth.tsx
+++ b/apps/www/pages/auth.tsx
@@ -259,7 +259,13 @@ function AuthPage() {
               </p>
               <p className="p">Policies can be written in SQL or using the dashboard online.</p>
 
-              <Button asChild size="small" type="default" className="mt-4" icon={<ArrowUpRight />}>
+              <Button
+                asChild
+                size="small"
+                variant="default"
+                className="mt-4"
+                icon={<ArrowUpRight />}
+              >
                 <Link href="/docs/guides/database/postgres/row-level-security">
                   Explore documentation
                 </Link>
diff --git a/apps/www/pages/aws-reinvent-2025.tsx b/apps/www/pages/aws-reinvent-2025.tsx
index a1e5783d4c3..06851b725df 100644
--- a/apps/www/pages/aws-reinvent-2025.tsx
+++ b/apps/www/pages/aws-reinvent-2025.tsx
@@ -1,13 +1,12 @@
-import { NextPage } from 'next'
-import dynamic from 'next/dynamic'
-import { NextSeo } from 'next-seo'
-import { Calendar, MapPin, Clock, Users, ChevronRight, CheckCircle } from 'lucide-react'
-import Link from 'next/link'
-import { Button, Badge } from 'ui'
-
 import Layout from 'components/Layouts/Default'
 import SectionContainer from 'components/Layouts/SectionContainer'
 import data from 'data/aws-reinvent-2025'
+import { Calendar, CheckCircle, ChevronRight, Clock, MapPin, Users } from 'lucide-react'
+import { NextPage } from 'next'
+import { NextSeo } from 'next-seo'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { Badge, Button } from 'ui'
 
 const ProductHeader = dynamic(() => import('components/Sections/ProductHeader2'))
 const PlatformSection = dynamic(() => import('components/Solutions/PlatformSection'))
@@ -55,7 +54,7 @@ const AWSReInvent2025: NextPage = () => {
                   ))}
                 </ul>
                 <Button
-                  type="primary"
+                  variant="primary"
                   size="large"
                   iconRight={<ChevronRight className="size-3" />}
                   asChild
@@ -131,7 +130,7 @@ const AWSReInvent2025: NextPage = () => {
 
                             {event.cta && (
                               <Button
-                                type="default"
+                                variant="default"
                                 size="small"
                                 iconRight={<ChevronRight className="w-3 h-3" />}
                                 asChild
@@ -171,7 +170,7 @@ const AWSReInvent2025: NextPage = () => {
               <p className="text-foreground-light text-lg mb-8">
                 Accelerate your business growth and app development using Supabase scale.
               </p>
-              <Button type="default" size="large" asChild>
+              <Button variant="default" size="large" asChild>
                 <Link href={data.consultationSection.cta.href} target="_blank">
                   Book a meeting
                 </Link>
diff --git a/apps/www/pages/brand-assets.tsx b/apps/www/pages/brand-assets.tsx
index dbdf9347b95..79ab4716fa3 100644
--- a/apps/www/pages/brand-assets.tsx
+++ b/apps/www/pages/brand-assets.tsx
@@ -71,7 +71,7 @@ const Index = () => {
                     </p>
                   </div>
                   <form method="get" action={`/brand-assets.zip`} className="mt-3">
-                    <Button htmlType="submit" type="default" iconRight={<Download />}>
+                    <Button type="submit" variant="default" iconRight={<Download />}>
                       Download logo kit
                     </Button>
                   </form>
@@ -110,7 +110,7 @@ const Index = () => {
                     action={`https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/supabase-brand-assets/connect-supabase/connect-supabase.zip`}
                     className="mt-3"
                   >
-                    <Button htmlType="submit" type="default" iconRight={<Download />}>
+                    <Button type="submit" variant="default" iconRight={<Download />}>
                       Download button kit
                     </Button>
                   </form>
diff --git a/apps/www/pages/careers.tsx b/apps/www/pages/careers.tsx
index 9a5b758b6d0..d615435477b 100644
--- a/apps/www/pages/careers.tsx
+++ b/apps/www/pages/careers.tsx
@@ -131,7 +131,7 @@ const CareerPage = ({ jobs, placeholderJob, contributors }: CareersPageProps) =>
           <p className="text-sm md:text-base text-foreground-lighter max-w-sm sm:max-w-md md:max-w-lg mx-auto">
             Explore remote opportunities and join our team to help us achieve it.
           </p>
-          <Button asChild type="primary" className="mt-4">
+          <Button asChild variant="primary" className="mt-4">
             <Link href="#positions">Open positions</Link>
           </Button>
         </header>
@@ -443,7 +443,7 @@ const CareerPage = ({ jobs, placeholderJob, contributors }: CareersPageProps) =>
                   Join our talent community to stay updated on future opportunities.
                 </p>
               </div>
-              <Button asChild type="primary">
+              <Button asChild variant="primary">
                 <Link
                   href="https://jobs.ashbyhq.com/supabase/form/talent-community-form"
                   target="_blank"
@@ -486,7 +486,7 @@ const JobItem = ({ job }: { job: JobItemProps }) => {
           </Badge>
           <span className="hidden md:block">{job.employment}</span>
         </div>
-        <div className={cn(buttonVariants({ type: 'default', size: 'tiny' }), 'rounded-full')}>
+        <div className={cn(buttonVariants({ variant: 'default', size: 'tiny' }), 'rounded-full')}>
           {isPlaceholderJob ? 'Submit resume' : 'Apply for position'}
         </div>
       </div>
diff --git a/apps/www/pages/changelog.tsx b/apps/www/pages/changelog.tsx
index c20c0364136..02ffc1535d2 100644
--- a/apps/www/pages/changelog.tsx
+++ b/apps/www/pages/changelog.tsx
@@ -210,7 +210,7 @@ function ChangelogIndex({ featured, restIndex, allIndex }: PageProps) {
               <div className="w-full lg:w-auto flex flex-wrap items-center gap-1">
                 <div className="flex-1">
                   <Button
-                    type="default"
+                    variant="default"
                     size="tiny"
                     className={cn('shrink-0', !filterPanelOpen && 'px-1.5')}
                     aria-expanded={filterPanelOpen}
@@ -233,7 +233,7 @@ function ChangelogIndex({ featured, restIndex, allIndex }: PageProps) {
                 </div>
                 <Button
                   asChild
-                  type="default"
+                  variant="default"
                   className="shrink-0"
                   icon={<Rss className="h-4 w-4" strokeWidth={2} aria-hidden />}
                 >
@@ -274,7 +274,7 @@ function ChangelogIndex({ featured, restIndex, allIndex }: PageProps) {
                   />
                   {(filterSearch.trim().length > 0 || selectedTags.size > 0) && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       size="tiny"
                       className="absolute inset-1 my-auto left-auto shrink-0"
                       onClick={clearFilters}
@@ -313,7 +313,7 @@ function ChangelogIndex({ featured, restIndex, allIndex }: PageProps) {
                   <p className="text-foreground-lighter text-sm">No entries match your filters.</p>
                   {!filterPanelOpen && (
                     <Button
-                      type="text"
+                      variant="text"
                       size="tiny"
                       className="shrink-0"
                       icon={<X className="h-4 w-4" strokeWidth={1.5} aria-hidden />}
@@ -331,7 +331,7 @@ function ChangelogIndex({ featured, restIndex, allIndex }: PageProps) {
                     </p>
                     {!filterPanelOpen && (
                       <Button
-                        type="text"
+                        variant="text"
                         size="tiny"
                         className="shrink-0"
                         icon={<X className="h-4 w-4" strokeWidth={1.5} aria-hidden />}
diff --git a/apps/www/pages/customers/[slug].tsx b/apps/www/pages/customers/[slug].tsx
index 2627125e978..f090e03a39a 100644
--- a/apps/www/pages/customers/[slug].tsx
+++ b/apps/www/pages/customers/[slug].tsx
@@ -215,7 +215,7 @@ function CaseStudyPage(props: any) {
                         <div>
                           <p>Ready to get started?</p>
                           <div>
-                            <Button asChild type="default" iconRight={<ChevronRight />}>
+                            <Button asChild variant="default" iconRight={<ChevronRight />}>
                               <Link
                                 href="https://supabase.com/contact/enterprise"
                                 className="no-underline"
diff --git a/apps/www/pages/database.tsx b/apps/www/pages/database.tsx
index 8edf496d477..8a140553c58 100644
--- a/apps/www/pages/database.tsx
+++ b/apps/www/pages/database.tsx
@@ -304,10 +304,10 @@ function Database() {
               </div>
 
               <div className="mt-4 flex gap-2">
-                <Button asChild size="small" type="default" icon={<ArrowUpRight />}>
+                <Button asChild size="small" variant="default" icon={<ArrowUpRight />}>
                   <Link href="/docs/guides/database/replication">Read the docs</Link>
                 </Button>
-                <Button asChild size="small" type="default" icon={<ArrowUpRight />}>
+                <Button asChild size="small" variant="default" icon={<ArrowUpRight />}>
                   <Link href="/blog/supabase-etl">Read the blog post</Link>
                 </Button>
               </div>
@@ -390,7 +390,7 @@ function Database() {
                 title="40+ preinstalled extensions"
                 text="We only show a few of the extensions supported by Supabase here, but we preinstall many more that you can use right away."
               />
-              <Button asChild size="small" type="default" icon={<ArrowUpRight />}>
+              <Button asChild size="small" variant="default" icon={<ArrowUpRight />}>
                 <Link href="/docs/guides/database">Explore documentation</Link>
               </Button>
             </div>
diff --git a/apps/www/pages/events/[slug].tsx b/apps/www/pages/events/[slug].tsx
index 1899052402e..ffa039f8476 100644
--- a/apps/www/pages/events/[slug].tsx
+++ b/apps/www/pages/events/[slug].tsx
@@ -293,7 +293,7 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
                   <h1 className="text-foreground text-3xl md:text-4xl xl:pr-9">{event.title}</h1>
                   <p>{event.subtitle}</p>
                   <Button
-                    type="primary"
+                    variant="primary"
                     size="medium"
                     className="mt-2"
                     disabled={
@@ -392,7 +392,7 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
               </div>
               <aside className="mt-8">
                 <Button
-                  type="primary"
+                  variant="primary"
                   size="medium"
                   className="mt-2"
                   disabled={!IS_REGISTRATION_OPEN || event.main_cta?.disabled}
diff --git a/apps/www/pages/features.tsx b/apps/www/pages/features.tsx
index 3e26d11fff7..078f575d252 100644
--- a/apps/www/pages/features.tsx
+++ b/apps/www/pages/features.tsx
@@ -209,7 +209,7 @@ function FeaturesPage() {
               <Button
                 tabIndex={HAS_ACTIVE_FILTERS ? 0 : -1}
                 block
-                type="dashed"
+                variant="dashed"
                 onClick={() => {
                   setSelectedProducts([])
                   setSearchTerm('')
diff --git a/apps/www/pages/features/[slug].tsx b/apps/www/pages/features/[slug].tsx
index 9047c6ba6a6..861850f92a2 100644
--- a/apps/www/pages/features/[slug].tsx
+++ b/apps/www/pages/features/[slug].tsx
@@ -225,12 +225,12 @@ const FeaturePage: React.FC<FeaturePageProps> = ({ feature, prevFeature, nextFea
               {(feature.docsUrl || feature.blogUrl) && (
                 <div className="flex flex-wrap gap-2">
                   {feature.docsUrl && (
-                    <Button type="default" iconRight={<ChevronRight />} asChild>
+                    <Button variant="default" iconRight={<ChevronRight />} asChild>
                       <Link href={feature.docsUrl}>Read Documentation</Link>
                     </Button>
                   )}
                   {feature.blogUrl && (
-                    <Button type="default" iconRight={<ChevronRight />} asChild>
+                    <Button variant="default" iconRight={<ChevronRight />} asChild>
                       <Link href={feature.blogUrl}>Read Blog Post</Link>
                     </Button>
                   )}
diff --git a/apps/www/pages/opt-out/[ref].tsx b/apps/www/pages/opt-out/[ref].tsx
index 286fdb4d6a7..97bc04aace8 100644
--- a/apps/www/pages/opt-out/[ref].tsx
+++ b/apps/www/pages/opt-out/[ref].tsx
@@ -227,7 +227,7 @@ export default function OptOutPage() {
               )}
             </div>
 
-            <Button htmlType="submit" size="small" disabled={submissionType === 'success'}>
+            <Button type="submit" size="small" disabled={submissionType === 'success'}>
               Report spam
             </Button>
             <FormMessage
diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index 97daaffb42d..62b9f5b893d 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -207,7 +207,7 @@ function Partner({ partner, overview }: PartnerData) {
                     Get started with {partner.title} and Supabase.
                   </h1>
                   <a href={partner.installUrl} target="_blank" rel="noreferrer">
-                    <Button size="medium" type="secondary">
+                    <Button size="medium" variant="secondary">
                       Add integration
                     </Button>
                   </a>
diff --git a/apps/www/pages/realtime.tsx b/apps/www/pages/realtime.tsx
index c5a116ac563..4e8bff1bc7d 100644
--- a/apps/www/pages/realtime.tsx
+++ b/apps/www/pages/realtime.tsx
@@ -173,7 +173,7 @@ function RealtimePage() {
                 Listen to changes in the Database inserts, updates, and deletes and other changes.
               </p>
               <div className="not-prose mt-3">
-                <Button asChild type="default">
+                <Button asChild variant="default">
                   <Link href="/docs/guides/realtime/postgres-changes">View docs</Link>
                 </Button>
               </div>
@@ -189,7 +189,7 @@ function RealtimePage() {
               <h3>Presence</h3>
               <p>Store and synchronize online user state consistently across clients.</p>
               <div className="not-prose mt-3">
-                <Button asChild type="default">
+                <Button asChild variant="default">
                   <Link href="/docs/guides/realtime/presence">View docs</Link>
                 </Button>
               </div>
@@ -205,7 +205,7 @@ function RealtimePage() {
               <h3>Broadcast</h3>
               <p>Send any data to any client subscribed to the same Channel.</p>
               <div className="not-prose mt-3">
-                <Button asChild type="default">
+                <Button asChild variant="default">
                   <Link href="/docs/guides/realtime/broadcast">View docs</Link>
                 </Button>
               </div>
diff --git a/apps/www/pages/solutions/innovation-teams.tsx b/apps/www/pages/solutions/innovation-teams.tsx
index 2e65d9e77d2..19aca01c8fd 100644
--- a/apps/www/pages/solutions/innovation-teams.tsx
+++ b/apps/www/pages/solutions/innovation-teams.tsx
@@ -259,7 +259,7 @@ const InnovationTeams: NextPage = () => {
                       <p className="text-foreground-lighter text-sm mb-6 grow">
                         {option.description}
                       </p>
-                      <Button type={index === 0 ? 'primary' : 'default'} asChild>
+                      <Button variant={index === 0 ? 'primary' : 'default'} asChild>
                         <Link href={option.cta.href}>{option.cta.label}</Link>
                       </Button>
                     </div>
diff --git a/apps/www/pages/state-of-startups-2025.tsx b/apps/www/pages/state-of-startups-2025.tsx
index 8713ae5e478..86a674fbd1a 100644
--- a/apps/www/pages/state-of-startups-2025.tsx
+++ b/apps/www/pages/state-of-startups-2025.tsx
@@ -101,7 +101,7 @@ function StateOfStartupsPage() {
         <div className="relative">
           {/* Closed ToC */}
           <Button
-            type="default"
+            variant="default"
             size="small"
             onClick={() => setIsTocOpen(true)}
             className={cn(
@@ -324,7 +324,7 @@ const CTABanner = forwardRef<HTMLElement>((props, ref) => {
             Start your project
           </Link>
         </Button>
-        <Button asChild size="medium" type="default">
+        <Button asChild size="medium" variant="default">
           <Link
             href="/contact/sales"
             onClick={() =>
diff --git a/apps/www/pages/storage.tsx b/apps/www/pages/storage.tsx
index be6cedc6b5a..7b429ed557e 100644
--- a/apps/www/pages/storage.tsx
+++ b/apps/www/pages/storage.tsx
@@ -238,7 +238,13 @@ function StoragePage() {
                 archives, and more, then serve them fast from a global CDN with fine-grained access
                 controls.
               </p>
-              <Button asChild size="small" type="default" className="mt-4" icon={<ArrowUpRight />}>
+              <Button
+                asChild
+                size="small"
+                variant="default"
+                className="mt-4"
+                icon={<ArrowUpRight />}
+              >
                 <Link href="/docs/guides/storage">Read the docs</Link>
               </Button>
             </div>
@@ -250,10 +256,10 @@ function StoragePage() {
                 is efficient to query, partition, and transform, and optionally expose via Postgres.
               </p>
               <div className="mt-4 flex gap-2">
-                <Button asChild size="small" type="default" icon={<ArrowUpRight />}>
+                <Button asChild size="small" variant="default" icon={<ArrowUpRight />}>
                   <Link href="/docs/guides/storage/analytics/introduction">Read the docs</Link>
                 </Button>
-                <Button asChild size="small" type="default" icon={<ArrowUpRight />}>
+                <Button asChild size="small" variant="default" icon={<ArrowUpRight />}>
                   <Link href="/blog/analytics-buckets">Read the blog post</Link>
                 </Button>
               </div>
@@ -267,10 +273,10 @@ function StoragePage() {
                 search, and more.
               </p>
               <div className="mt-4 flex gap-2">
-                <Button asChild size="small" type="default" icon={<ArrowUpRight />}>
+                <Button asChild size="small" variant="default" icon={<ArrowUpRight />}>
                   <Link href="/docs/guides/storage/vector/introduction">Read the docs</Link>
                 </Button>
-                <Button asChild size="small" type="default" icon={<ArrowUpRight />}>
+                <Button asChild size="small" variant="default" icon={<ArrowUpRight />}>
                   <Link href="/blog/vector-buckets">Read the blog post</Link>
                 </Button>
               </div>
@@ -298,7 +304,7 @@ function StoragePage() {
                   <Button
                     asChild
                     size="small"
-                    type="default"
+                    variant="default"
                     className="mt-4"
                     icon={<ArrowUpRight />}
                   >
@@ -314,7 +320,7 @@ function StoragePage() {
                   <Button
                     asChild
                     size="small"
-                    type="default"
+                    variant="default"
                     className="mt-4"
                     icon={<ArrowUpRight />}
                   >
@@ -355,7 +361,7 @@ function StoragePage() {
                       <Button
                         asChild
                         size="small"
-                        type="default"
+                        variant="default"
                         className="mt-4"
                         icon={<ArrowUpRight />}
                       >
diff --git a/apps/www/pages/support.tsx b/apps/www/pages/support.tsx
index c56d86b44b4..1663b623927 100644
--- a/apps/www/pages/support.tsx
+++ b/apps/www/pages/support.tsx
@@ -1,17 +1,16 @@
-import { NextSeo } from 'next-seo'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useRef } from 'react'
-import Typed from 'typed.js'
-import { Button, ButtonProps, cn } from 'ui'
-import { CommandMenuTrigger } from 'ui-patterns/CommandMenu'
-
-import { questions } from 'shared-data'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import Panel from '~/components/Panel'
 import data from '~/data/support'
-import { Search, Command } from 'lucide-react'
+import { Command, Search } from 'lucide-react'
+import { NextSeo } from 'next-seo'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useRef } from 'react'
+import { questions } from 'shared-data'
+import Typed from 'typed.js'
+import { Button, ButtonProps, cn } from 'ui'
+import { CommandMenuTrigger } from 'ui-patterns/CommandMenu'
 
 const Index = () => {
   const router = useRouter()
@@ -70,7 +69,7 @@ const Index = () => {
                   border
                   border-control
                   hover:bg-surface-100
-                  transition 
+                  transition
                   rounded-sm"
               >
                 <div className="flex items-center flex-1 space-x-2">
@@ -107,7 +106,7 @@ const Index = () => {
                 {card.links.map((link) => (
                   <Button
                     size="small"
-                    type={(link.type as ButtonProps['type']) ?? 'default'}
+                    variant={(link.type as ButtonProps['variant']) ?? 'default'}
                     iconRight={link.icon}
                     asChild
                   >
@@ -132,7 +131,7 @@ const Index = () => {
                   {data.banner.links.map((link) => (
                     <Button
                       size="tiny"
-                      type={(link.type as ButtonProps['type']) ?? 'default'}
+                      variant={(link.type as ButtonProps['variant']) ?? 'default'}
                       iconRight={link.icon}
                       asChild
                     >
diff --git a/apps/www/types/common.ts b/apps/www/types/common.ts
index 51ce076d2ed..f3eb69f4542 100644
--- a/apps/www/types/common.ts
+++ b/apps/www/types/common.ts
@@ -4,7 +4,7 @@ import { ButtonProps } from 'ui'
 export interface CTA {
   label: string
   href: string
-  type?: ButtonProps['type']
+  type?: ButtonProps['variant']
   target?: HTMLAnchorElement['target']
   onClick?: MouseEventHandler<HTMLButtonElement>
 }
diff --git a/packages/dev-tools/DevToolbar.tsx b/packages/dev-tools/DevToolbar.tsx
index 21c9bb1f3c6..06e807e426c 100644
--- a/packages/dev-tools/DevToolbar.tsx
+++ b/packages/dev-tools/DevToolbar.tsx
@@ -409,7 +409,7 @@ export function DevToolbar({ extraTabs = [] }: { extraTabs?: ExtraTab[] }) {
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
-                      type="text"
+                      variant="text"
                       icon={<EyeOff className="w-4 h-4" />}
                       onClick={dismissToolbar}
                       className="text-foreground-light hover:text-foreground p-1"
@@ -421,7 +421,7 @@ export function DevToolbar({ extraTabs = [] }: { extraTabs?: ExtraTab[] }) {
                   <TooltipTrigger asChild>
                     <SheetClose asChild>
                       <Button
-                        type="text"
+                        variant="text"
                         icon={<X className="w-4 h-4" />}
                         className="text-foreground-light hover:text-foreground p-1"
                       />
@@ -449,7 +449,7 @@ export function DevToolbar({ extraTabs = [] }: { extraTabs?: ExtraTab[] }) {
                     </InputGroupAddon>
                   </InputGroup>
                   <Button
-                    type="default"
+                    variant="default"
                     onClick={() => setEvents([])}
                     className="text-foreground-lighter hover:text-foreground"
                   >
@@ -510,7 +510,7 @@ export function DevToolbar({ extraTabs = [] }: { extraTabs?: ExtraTab[] }) {
                   </nav>
                   {totalOverrideCount > 0 && (
                     <div className="mt-auto p-2 border-t">
-                      <Button type="outline" size="tiny" block onClick={clearAllOverrides}>
+                      <Button variant="outline" size="tiny" block onClick={clearAllOverrides}>
                         Reset & Reload
                       </Button>
                     </div>
diff --git a/packages/dev-tools/DevToolbarTrigger.tsx b/packages/dev-tools/DevToolbarTrigger.tsx
index f6548c3c01c..5942fa592ac 100644
--- a/packages/dev-tools/DevToolbarTrigger.tsx
+++ b/packages/dev-tools/DevToolbarTrigger.tsx
@@ -210,7 +210,7 @@ export function DevToolbarTrigger() {
   return (
     <div style={containerStyle}>
       <Button
-        type="text"
+        variant="text"
         className={cn(
           'relative rounded-full h-10 w-10 p-0',
           'bg-surface-100 border border-overlay shadow-md',
diff --git a/packages/marketing/src/forms/MarketingForm.tsx b/packages/marketing/src/forms/MarketingForm.tsx
index 82e77495a51..2bcf4186c20 100644
--- a/packages/marketing/src/forms/MarketingForm.tsx
+++ b/packages/marketing/src/forms/MarketingForm.tsx
@@ -409,8 +409,8 @@ export default function MarketingForm({
         <hr className="border-muted" />
 
         <Button
-          htmlType="submit"
-          type="primary"
+          type="submit"
+          variant="primary"
           size="large"
           block
           loading={submitState === 'loading'}
diff --git a/packages/marketing/src/go/sections/HeroSection.tsx b/packages/marketing/src/go/sections/HeroSection.tsx
index 294c0e83612..9a641dd063e 100644
--- a/packages/marketing/src/go/sections/HeroSection.tsx
+++ b/packages/marketing/src/go/sections/HeroSection.tsx
@@ -56,7 +56,7 @@ export default function HeroSection({
                 <Button
                   key={cta.href}
                   asChild
-                  type={cta.variant === 'secondary' ? 'default' : 'primary'}
+                  variant={cta.variant === 'secondary' ? 'default' : 'primary'}
                   size="medium"
                 >
                   <a href={cta.href}>{cta.label}</a>
diff --git a/packages/marketing/src/go/sections/hubspot-meeting/BookingForm.tsx b/packages/marketing/src/go/sections/hubspot-meeting/BookingForm.tsx
index 79b5ce62b6d..7b4c85db252 100644
--- a/packages/marketing/src/go/sections/hubspot-meeting/BookingForm.tsx
+++ b/packages/marketing/src/go/sections/hubspot-meeting/BookingForm.tsx
@@ -146,8 +146,8 @@ export default function BookingForm({
         )}
 
         <Button
-          htmlType="submit"
-          type="primary"
+          type="submit"
+          variant="primary"
           disabled={!isValid || isSubmitting}
           loading={isSubmitting}
           size="medium"
diff --git a/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx b/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx
index e931623ba6a..75d2cd8bf6b 100644
--- a/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx
+++ b/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx
@@ -53,7 +53,7 @@ export const AuthenticatedDropdownMenu = ({ user, menu, site }: Props) => {
         <button
           title="Menu dropdown button"
           className={cn(
-            buttonVariants({ type: 'default' }),
+            buttonVariants({ variant: 'default' }),
             'text-foreground-light border-default w-[30px] min-w-[30px] h-[30px] data-[state=open]:bg-overlay-hover/30 hover:border-strong data-[state=open]:border-stronger hover:!bg-overlay-hover/50 bg-transparent',
             'rounded-full overflow-hidden opacity-0 transition-opacity animate-fade-in'
           )}
diff --git a/packages/ui-patterns/src/Banners/LW15Banner.tsx b/packages/ui-patterns/src/Banners/LW15Banner.tsx
index bc6482553c6..b5eca5bcd01 100644
--- a/packages/ui-patterns/src/Banners/LW15Banner.tsx
+++ b/packages/ui-patterns/src/Banners/LW15Banner.tsx
@@ -57,7 +57,7 @@ export function LW15Banner() {
             {announcement.text}
           </p>
           <p className="text-sm hidden sm:block">{announcement.launch}</p>
-          <Button size="tiny" type="default" className="px-2 leading-none! text-xs" asChild>
+          <Button size="tiny" variant="default" className="px-2 leading-none! text-xs" asChild>
             <Link href={announcement.link}>{announcement.cta}</Link>
           </Button>
         </div>
diff --git a/packages/ui-patterns/src/Chart/index.tsx b/packages/ui-patterns/src/Chart/index.tsx
index 3c0937a6159..cbc4dff4bc2 100644
--- a/packages/ui-patterns/src/Chart/index.tsx
+++ b/packages/ui-patterns/src/Chart/index.tsx
@@ -189,7 +189,7 @@ const ChartActions = React.forwardRef<HTMLDivElement, ChartActionsProps>(
               <Tooltip key={index}>
                 <TooltipTrigger asChild>
                   <Button
-                    type="default"
+                    variant="default"
                     size="tiny"
                     className={cn('px-1.5 text-foreground-lighter', action.className)}
                     onClick={action.onClick}
@@ -475,7 +475,7 @@ const ChartDisabledState = ({ icon, label, description, actions }: ChartDisabled
             {actions.map((action, index) => (
               <Button
                 key={index}
-                type="primary"
+                variant="primary"
                 size="tiny"
                 className={cn(action.className)}
                 onClick={action.onClick}
diff --git a/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
index 9ba1f997e05..f74cbcf0f54 100644
--- a/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
+++ b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
@@ -260,7 +260,7 @@ export const CodeBlock = ({
               ].join(' ')}
             >
               <Button
-                type="default"
+                variant="default"
                 className="px-1.5"
                 icon={copied ? <Check /> : <Copy />}
                 onClick={() => onSelectCopy(value || children)}
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
index bb2cbbee04c..415350946f8 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
@@ -85,7 +85,7 @@ function CommandError({ resetErrorBoundary }: { resetErrorBoundary: () => void }
           Sorry, looks like we&apos;re having some issues with the command menu!
         </p>
         <p className="text-sm text-center">Please try again in a bit.</p>
-        <Button size="tiny" type="secondary" onClick={resetErrorBoundary}>
+        <Button size="tiny" variant="secondary" onClick={resetErrorBoundary}>
           Try again?
         </Button>
       </div>
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index f77a11be38c..d9bbf5d7507 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -321,7 +321,7 @@ function ErrorState({ handleReset }: { handleReset: () => void }) {
         Sorry, looks like Supabase AI is having a hard time!
       </p>
       <p className="text-sm text-foreground-lighter text-center">Please try again in a bit.</p>
-      <Button size="tiny" type="default" onClick={handleReset}>
+      <Button size="tiny" variant="default" onClick={handleReset}>
         Try again?
       </Button>
     </div>
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
index ba7454ba5c4..0f27b16def4 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
@@ -302,7 +302,7 @@ const DocsSearchPage = () => {
           <div className="p-6 flex flex-col items-center gap-6 mt-4 text-foreground-light">
             <StatusIcon variant="default" />
             <p className="text-sm text-foreground-light text-center">No results found.</p>
-            <Button size="tiny" type="default" onClick={handleResetPrompt}>
+            <Button size="tiny" variant="default" onClick={handleResetPrompt}>
               Try again?
             </Button>
           </div>
@@ -314,7 +314,7 @@ const DocsSearchPage = () => {
               Sorry, looks like we&apos;re having some issues with search!
             </p>
             <p className="text-sm text-foreground-lighter">Please try again in a bit.</p>
-            <Button size="tiny" type="default" onClick={handleResetPrompt}>
+            <Button size="tiny" variant="default" onClick={handleResetPrompt}>
               Try again?
             </Button>
           </div>
diff --git a/packages/ui-patterns/src/ConsentToast/index.tsx b/packages/ui-patterns/src/ConsentToast/index.tsx
index 2075578cead..1f2af86f9ac 100644
--- a/packages/ui-patterns/src/ConsentToast/index.tsx
+++ b/packages/ui-patterns/src/ConsentToast/index.tsx
@@ -46,7 +46,7 @@ export const ConsentToast = ({ onAccept = noop, onOptOut = noop }: ConsentToastP
 
       <div className="flex items-center space-x-2">
         <Button
-          type="default"
+          variant="default"
           onClick={onAccept}
           size={isMobile ? 'small' : 'tiny'}
           block={isMobile}
@@ -54,14 +54,14 @@ export const ConsentToast = ({ onAccept = noop, onOptOut = noop }: ConsentToastP
           Accept
         </Button>
         <Button
-          type={isMobile ? 'outline' : 'text'}
+          variant={isMobile ? 'outline' : 'text'}
           onClick={onOptOut}
           size={isMobile ? 'small' : 'tiny'}
           block={isMobile}
         >
           Opt out
         </Button>
-        <Button asChild type="text" className="hidden sm:block text-light hover:text-foreground">
+        <Button asChild variant="text" className="hidden sm:block text-light hover:text-foreground">
           <PrivacySettings>Privacy settings</PrivacySettings>
         </Button>
       </div>
diff --git a/packages/ui-patterns/src/DataInputs/Input.tsx b/packages/ui-patterns/src/DataInputs/Input.tsx
index 72f29da66d5..98efedae67f 100644
--- a/packages/ui-patterns/src/DataInputs/Input.tsx
+++ b/packages/ui-patterns/src/DataInputs/Input.tsx
@@ -90,7 +90,7 @@ const Input = forwardRef<
             {copy && !(reveal && hidden) ? (
               <InputGroupButton
                 size="tiny"
-                type="default"
+                variant="default"
                 className={cn(showCopyOnHover && 'opacity-0 group-hover:opacity-100 transition')}
                 icon={<Copy size={16} className="text-foreground-muted" />}
                 onClick={() => _onCopy(props.value)}
@@ -99,7 +99,7 @@ const Input = forwardRef<
               </InputGroupButton>
             ) : null}
             {reveal && hidden ? (
-              <InputGroupButton size="tiny" type="default" onClick={onReveal}>
+              <InputGroupButton size="tiny" variant="default" onClick={onReveal}>
                 Reveal
               </InputGroupButton>
             ) : null}
diff --git a/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx b/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx
index d6a8cf61e42..c7207f5d4cb 100644
--- a/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx
+++ b/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx
@@ -129,7 +129,7 @@ export const ConfirmationModal = forwardRef<
             <Button
               size="medium"
               block
-              type="default"
+              variant="default"
               disabled={loading}
               onClick={() => onCancel()}
             >
@@ -139,10 +139,10 @@ export const ConfirmationModal = forwardRef<
             <Button
               block
               size="medium"
-              type={
+              variant={
                 variant === 'destructive' ? 'danger' : variant === 'warning' ? 'warning' : 'primary'
               }
-              htmlType="submit"
+              type="submit"
               loading={loading}
               disabled={loading || disabled}
               onClick={onSubmit}
diff --git a/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx b/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
index b027c692b87..ef34de98f7e 100644
--- a/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
+++ b/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
@@ -184,7 +184,7 @@ export const TextConfirmModal = forwardRef<
                       Type{' '}
                       {enableCopy ? (
                         <Button
-                          type="default"
+                          variant="default"
                           className="h-[23px] px-1.5 py-0 border-muted text-sm whitespace-pre break-all"
                           iconRight={
                             showCopied ? <Check strokeWidth={2} className="text-brand" /> : <Copy />
@@ -218,21 +218,27 @@ export const TextConfirmModal = forwardRef<
               />
               <div className="flex gap-2">
                 {!blockDeleteButton && (
-                  <Button size="medium" block type="default" disabled={loading} onClick={onCancel}>
+                  <Button
+                    size="medium"
+                    block
+                    variant="default"
+                    disabled={loading}
+                    onClick={onCancel}
+                  >
                     {cancelLabel}
                   </Button>
                 )}
                 <Button
                   block
                   size="medium"
-                  type={
+                  variant={
                     variant === 'destructive'
                       ? 'danger'
                       : variant === 'warning'
                         ? 'warning'
                         : 'primary'
                   }
-                  htmlType="submit"
+                  type="submit"
                   loading={loading}
                   disabled={!isFormValid || loading}
                   className="truncate"
diff --git a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
index e5954edff8d..c86f0621970 100644
--- a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
@@ -432,7 +432,7 @@ export function FilterCondition({
         </PopoverContent>
       </Popover>
       <Button
-        type="text"
+        variant="text"
         size="tiny"
         icon={
           <X
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
index 14fde11eb20..e1f7dccf2e2 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
@@ -84,7 +84,7 @@ export const ClientSelectDropdown = ({
         <PopoverTrigger asChild>
           <Button
             size="small"
-            type="default"
+            variant="default"
             className="gap-0 rounded-l-none"
             iconRight={
               <ChevronDown
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
index b6754bb8de0..bc60bc489a2 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
@@ -73,7 +73,7 @@ export function McpConfigurationDisplay({
           <div className="text-xs text-foreground-light">
             {selectedClient.deepLinkDescription ?? 'Install in one click:'}
           </div>
-          <Button type="secondary" size="small" asChild>
+          <Button variant="secondary" size="small" asChild>
             <a
               href={mcpButtonData.deepLink}
               target="_blank"
diff --git a/packages/ui-patterns/src/MetricCard/index.tsx b/packages/ui-patterns/src/MetricCard/index.tsx
index d934c63c7dc..36b23c6c30e 100644
--- a/packages/ui-patterns/src/MetricCard/index.tsx
+++ b/packages/ui-patterns/src/MetricCard/index.tsx
@@ -82,7 +82,7 @@ const MetricCardHeader = React.forwardRef<HTMLDivElement, MetricCardHeaderProps>
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                type="text"
+                variant="text"
                 size="tiny"
                 className="px-1 text-foreground-lighter group-hover:text-foreground absolute right-3 transition-colors"
                 asChild
diff --git a/packages/ui-patterns/src/PromoToast/PromoToast.tsx b/packages/ui-patterns/src/PromoToast/PromoToast.tsx
index f3c1754d66c..ac2db741c21 100644
--- a/packages/ui-patterns/src/PromoToast/PromoToast.tsx
+++ b/packages/ui-patterns/src/PromoToast/PromoToast.tsx
@@ -53,12 +53,12 @@ const PromoToast = () => {
       </div>
 
       <div className="relative z-10 flex items-center space-x-2">
-        <Button asChild type="secondary">
+        <Button asChild variant="secondary">
           <Link target="_blank" rel="noreferrer" href={`https://supabase.com${announcement.link}`}>
             Claim your ticket
           </Link>
         </Button>
-        <Button type="default" onClick={handleHide}>
+        <Button variant="default" onClick={handleHide}>
           Dismiss
         </Button>
       </div>
diff --git a/packages/ui-patterns/src/Row/index.tsx b/packages/ui-patterns/src/Row/index.tsx
index 804b9b4cdb3..f2251907b99 100644
--- a/packages/ui-patterns/src/Row/index.tsx
+++ b/packages/ui-patterns/src/Row/index.tsx
@@ -145,7 +145,7 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(function Row(
     <div ref={ref} className={cn('relative w-full', className)} {...rest}>
       {showArrows && canScrollLeft && (
         <Button
-          type="default"
+          variant="default"
           onClick={scrollLeft}
           className="absolute w-8 h-8 left-0 top-1/2 -translate-y-1/2 z-10 rounded-full p-2"
           aria-label="Scroll left"
@@ -156,7 +156,7 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(function Row(
 
       {showArrows && canScrollRight && hasContentToScroll && (
         <Button
-          type="default"
+          variant="default"
           onClick={scrollRight}
           className="absolute w-8 h-8 right-0 top-1/2 -translate-y-1/2 z-10 rounded-full p-2"
           aria-label="Scroll right"
diff --git a/packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx b/packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx
index 8dcb1b1e3d5..c49a75f6157 100644
--- a/packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx
+++ b/packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx
@@ -99,7 +99,7 @@ export const SimpleCodeBlock = ({
             </pre>
             {showCopy && (
               <div className="invisible absolute right-0 top-0 opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">
-                <Button size="tiny" type="default" onClick={() => handleCopyCode(children)}>
+                <Button size="tiny" variant="default" onClick={() => handleCopyCode(children)}>
                   {showCopied ? 'Copied' : 'Copy'}
                 </Button>
               </div>
diff --git a/packages/ui-patterns/src/collapsible-alert.tsx b/packages/ui-patterns/src/collapsible-alert.tsx
index 08cd030f659..0b17745e98b 100644
--- a/packages/ui-patterns/src/collapsible-alert.tsx
+++ b/packages/ui-patterns/src/collapsible-alert.tsx
@@ -34,7 +34,7 @@ const CollapsibleAlert = React.forwardRef<HTMLDivElement, CollapsibleAlertProps>
           <span className="font-medium">{trigger}</span>
           <CollapsibleTrigger asChild>
             <Button
-              type="outline"
+              variant="outline"
               size="tiny"
               className={cn('px-0! w-[26px]', '[&[data-state=open]_svg]:rotate-180')}
               aria-label="Toggle"
diff --git a/packages/ui-patterns/src/form/FormLayout2.tsx b/packages/ui-patterns/src/form/FormLayout2.tsx
index 3d799aede83..4c039ad47c0 100644
--- a/packages/ui-patterns/src/form/FormLayout2.tsx
+++ b/packages/ui-patterns/src/form/FormLayout2.tsx
@@ -419,8 +419,8 @@ export const Page = () => {
               />
             </SheetSection>
             <SheetFooter>
-              <Button type="default">Cancel</Button>
-              <Button htmlType="submit">Submit</Button>
+              <Button variant="default">Cancel</Button>
+              <Button type="submit">Submit</Button>
             </SheetFooter>
           </form>
         </Form>
diff --git a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx
index ee63db76ddc..ae164bdf23d 100644
--- a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx
+++ b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx
@@ -2,11 +2,10 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useForm } from 'react-hook-form'
+import { Button, Form } from 'ui'
 import { describe, expect, it, vi } from 'vitest'
 import { z } from 'zod'
 
-import { Button, Form } from 'ui'
-
 import { KeyValueFieldArray, type KeyValueFieldArrayAction } from './KeyValueFieldArray'
 
 const keyValueSchema = z.object({
@@ -79,7 +78,7 @@ const KeyValueForm = ({
           addActions={addActions}
           removeLabel="Remove header"
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
@@ -111,7 +110,7 @@ const NameValueForm = ({
           addLabel="Add header"
           removeLabel="Remove header"
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
index 1c607717295..c465ec29a04 100644
--- a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
+++ b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
@@ -165,9 +165,9 @@ export const KeyValueFieldArray = <
             />
 
             <Button
-              type="default"
+              variant="default"
               size="tiny"
-              htmlType="button"
+              type="button"
               icon={<Trash size={12} />}
               aria-label={removeLabel}
               disabled={disabled}
@@ -180,9 +180,9 @@ export const KeyValueFieldArray = <
 
       <div className="flex items-center">
         <Button
-          type="default"
+          variant="default"
           size="tiny"
-          htmlType="button"
+          type="button"
           icon={<Plus />}
           disabled={disabled}
           onClick={() => append(createEmptyRow())}
@@ -195,9 +195,9 @@ export const KeyValueFieldArray = <
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                type="default"
+                variant="default"
                 size="tiny"
-                htmlType="button"
+                type="button"
                 icon={<ChevronDown size={14} />}
                 aria-label={addActionsLabel}
                 disabled={disabled}
diff --git a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx
index 45bd3ccb419..d05692d754a 100644
--- a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx
+++ b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx
@@ -2,11 +2,10 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useForm } from 'react-hook-form'
+import { Button, Form } from 'ui'
 import { describe, expect, it, vi } from 'vitest'
 import { z } from 'zod'
 
-import { Button, Form } from 'ui'
-
 import { SingleValueFieldArray } from './SingleValueFieldArray'
 
 const valueSchema = z.object({
@@ -54,7 +53,7 @@ const ValueForm = ({
           removeLabel="Remove URL"
           minimumRows={1}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
@@ -81,7 +80,7 @@ const NameForm = ({ onSubmit = vi.fn() }: { onSubmit?: (values: NameFormValues)
           removeLabel="Remove domain"
           minimumRows={1}
         />
-        <Button htmlType="submit">Submit</Button>
+        <Button type="submit">Submit</Button>
       </form>
     </Form>
   )
diff --git a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx
index 9fa05bd3a25..d7b68e4296c 100644
--- a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx
+++ b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx
@@ -34,10 +34,10 @@ export interface SingleValueFieldArrayProps<
   rowClassName?: string
   inputClassName?: string
   addButtonClassName?: string
-  addButtonType?: React.ComponentProps<typeof Button>['type']
+  addButtonType?: React.ComponentProps<typeof Button>['variant']
   addButtonSize?: React.ComponentProps<typeof Button>['size']
   removeButtonClassName?: string
-  removeButtonType?: React.ComponentProps<typeof Button>['type']
+  removeButtonType?: React.ComponentProps<typeof Button>['variant']
   removeButtonSize?: React.ComponentProps<typeof Button>['size']
 }
 
@@ -110,9 +110,9 @@ export const SingleValueFieldArray = <
             />
 
             <Button
-              type={removeButtonType}
+              variant={removeButtonType}
               size={removeButtonSize}
-              htmlType="button"
+              type="button"
               icon={<Trash size={12} />}
               aria-label={removeLabel}
               disabled={disableRemove}
@@ -125,9 +125,9 @@ export const SingleValueFieldArray = <
 
       <div className="flex items-center">
         <Button
-          type={addButtonType}
+          variant={addButtonType}
           size={addButtonSize}
-          htmlType="button"
+          type="button"
           icon={<Plus strokeWidth={1.5} />}
           disabled={disabled}
           onClick={() => append(createEmptyRow())}
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index c0e49df91e3..1b44f3df52f 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -29,7 +29,7 @@ const buttonVariants = cva(
   `,
   {
     variants: {
-      type: {
+      variant: {
         primary: `
           bg-brand-400 dark:bg-brand-500
           hover:bg-brand/80 dark:hover:bg-brand/50
@@ -206,13 +206,12 @@ export interface ButtonProps
   // omit `type` as we use it to change type of button
   // replaced with `htmlType`
   extends
-    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>,
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     // omit 'disabled' as it is included in HTMLButtonElement
     Omit<ButtonVariantProps, 'disabled'>,
     Omit<LoadingVariantProps, 'type'> {
   asChild?: boolean
-  type?: ButtonVariantProps['type']
-  htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>['type']
+  variant?: ButtonVariantProps['variant']
   icon?: React.ReactNode
   iconLeft?: React.ReactNode
   iconRight?: React.ReactNode
@@ -224,14 +223,14 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       asChild = false,
       size = 'tiny',
-      type = 'primary',
+      variant = 'primary',
       children,
       loading,
       block,
       icon,
       iconRight,
       iconLeft,
-      htmlType = 'button',
+      type = 'button',
       rounded,
       ...props
     },
@@ -255,11 +254,14 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <Comp
         ref={ref}
         data-size={size}
-        type={htmlType}
+        type={type}
         {...props}
         disabled={disabled}
         tabIndex={computedTabIndex}
-        className={cn(buttonVariants({ type, size, disabled, block, rounded }), className)}
+        className={cn(
+          buttonVariants({ variant: variant, size, disabled, block, rounded }),
+          className
+        )}
         onClick={(e) => {
           // [Joshen] Prevents redirecting if Button is used with a link-based child element
           if (disabled) return e.preventDefault()
@@ -273,17 +275,21 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
               undefined,
               showIcon &&
                 (loading ? (
-                  <div className={cn(IconContainerVariants({ size, type }))}>
-                    <Loader2 className={cn(loadingVariants({ loading, type }))} />
+                  <div className={cn(IconContainerVariants({ size, type: variant }))}>
+                    <Loader2 className={cn(loadingVariants({ loading, type: variant }))} />
                   </div>
                 ) : _iconLeft ? (
-                  <div className={cn(IconContainerVariants({ size, type }))}>{_iconLeft}</div>
+                  <div className={cn(IconContainerVariants({ size, type: variant }))}>
+                    {_iconLeft}
+                  </div>
                 ) : null),
               children.props.children && (
                 <span className={'truncate'}>{children.props.children}</span>
               ),
               iconRight && !loading && (
-                <div className={cn(IconContainerVariants({ size, type }))}>{iconRight}</div>
+                <div className={cn(IconContainerVariants({ size, type: variant }))}>
+                  {iconRight}
+                </div>
               )
             )
           ) : null
@@ -291,15 +297,17 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           <>
             {showIcon &&
               (loading ? (
-                <div className={cn(IconContainerVariants({ size, type }))}>
-                  <Loader2 className={cn(loadingVariants({ loading, type }))} />
+                <div className={cn(IconContainerVariants({ size, type: variant }))}>
+                  <Loader2 className={cn(loadingVariants({ loading, type: variant }))} />
                 </div>
               ) : _iconLeft ? (
-                <div className={cn(IconContainerVariants({ size, type }))}>{_iconLeft}</div>
+                <div className={cn(IconContainerVariants({ size, type: variant }))}>
+                  {_iconLeft}
+                </div>
               ) : null)}{' '}
             {children && <span className={'truncate'}>{children}</span>}{' '}
             {iconRight && !loading && (
-              <div className={cn(IconContainerVariants({ size, type }))}>{iconRight}</div>
+              <div className={cn(IconContainerVariants({ size, type: variant }))}>{iconRight}</div>
             )}
           </>
         )}
diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx
index f405f1953c7..c8b4568ee1a 100644
--- a/packages/ui/src/components/Input/Input.tsx
+++ b/packages/ui/src/components/Input/Input.tsx
@@ -137,12 +137,12 @@ function Input({
           <div className={__styles.actions_container}>
             {error && <InputErrorIcon size={size} />}
             {copy && !(reveal && hidden) ? (
-              <Button size="tiny" type="default" icon={<Copy />} onClick={() => _onCopy(value)}>
+              <Button size="tiny" variant="default" icon={<Copy />} onClick={() => _onCopy(value)}>
                 {copyLabel}
               </Button>
             ) : null}
             {reveal && hidden ? (
-              <Button size="tiny" type="default" onClick={onReveal}>
+              <Button size="tiny" variant="default" onClick={onReveal}>
                 Reveal
               </Button>
             ) : null}
@@ -264,7 +264,12 @@ function TextArea({
             <div className={__styles['textarea_actions_container_items']}>
               {error && <InputErrorIcon size={size} />}
               {copy && (
-                <Button size="tiny" type="default" onClick={() => _onCopy(value)} icon={<Copy />}>
+                <Button
+                  size="tiny"
+                  variant="default"
+                  onClick={() => _onCopy(value)}
+                  icon={<Copy />}
+                >
                   {copyLabel}
                 </Button>
               )}
diff --git a/packages/ui/src/components/SidePanel/SidePanel.tsx b/packages/ui/src/components/SidePanel/SidePanel.tsx
index 1498e198f42..721e1d052c8 100644
--- a/packages/ui/src/components/SidePanel/SidePanel.tsx
+++ b/packages/ui/src/components/SidePanel/SidePanel.tsx
@@ -70,7 +70,7 @@ const SidePanel = ({
   ) : (
     <div className={__styles.footer}>
       <div>
-        <Button disabled={loading} type="default" onClick={() => (onCancel ? onCancel() : null)}>
+        <Button disabled={loading} variant="default" onClick={() => (onCancel ? onCancel() : null)}>
           {cancelText}
         </Button>
       </div>
@@ -79,7 +79,7 @@ const SidePanel = ({
           <TooltipTrigger asChild>
             <span className="inline-block">
               <Button
-                htmlType="submit"
+                type="submit"
                 disabled={disabled || loading}
                 loading={loading}
                 onClick={onConfirm}
diff --git a/packages/ui/src/components/shadcn/ui/alert-dialog.tsx b/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
index eabbef051c5..eca64e832a6 100644
--- a/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
@@ -249,7 +249,7 @@ type AlertDialogActionProps = Omit<
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>,
   'onClick'
 > & {
-  variant?: NonNullable<ButtonVariantProps['type']>
+  variant?: NonNullable<ButtonVariantProps['variant']>
   loading?: boolean
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => unknown
 }
@@ -319,7 +319,7 @@ const AlertDialogAction = React.forwardRef<
         <AlertDialogPrimitive.Action
           ref={ref}
           asChild
-          className={cn(buttonVariants({ type: variant, size: 'tiny' }), className)}
+          className={cn(buttonVariants({ variant: variant, size: 'tiny' }), className)}
           disabled={isDisabled}
           onClick={handleClick}
           type={type}
@@ -336,9 +336,9 @@ const AlertDialogAction = React.forwardRef<
           ref={ref}
           className={className}
           disabled={isDisabled}
-          htmlType={type}
+          type={type}
           loading={loading}
-          type={variant}
+          variant={variant}
         >
           {children}
         </Button>
@@ -357,7 +357,11 @@ const AlertDialogCancel = React.forwardRef<
   return (
     <AlertDialogPrimitive.Cancel
       ref={ref}
-      className={cn(buttonVariants({ type: 'default', size: 'tiny' }), 'mt-2 sm:mt-0', className)}
+      className={cn(
+        buttonVariants({ variant: 'default', size: 'tiny' }),
+        'mt-2 sm:mt-0',
+        className
+      )}
       disabled={disabled || alertDialogContext?.loading}
       {...props}
     />
diff --git a/packages/ui/src/components/shadcn/ui/button-group.tsx b/packages/ui/src/components/shadcn/ui/button-group.tsx
index ad7cace52bf..0e966aae6ea 100644
--- a/packages/ui/src/components/shadcn/ui/button-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/button-group.tsx
@@ -38,7 +38,7 @@ const ButtonGroupItem = React.forwardRef<HTMLButtonElement, ButtonGroupItemProps
     return (
       <Button
         ref={ref}
-        type="text"
+        variant="text"
         icon={icon}
         asChild={asChild}
         className={cn(
diff --git a/packages/ui/src/components/shadcn/ui/input-group.tsx b/packages/ui/src/components/shadcn/ui/input-group.tsx
index 9b01445d44c..df0b9a019b7 100644
--- a/packages/ui/src/components/shadcn/ui/input-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/input-group.tsx
@@ -130,10 +130,10 @@ const inputGroupButtonVariants = cva('', {
 const InputGroupButton = React.forwardRef<
   HTMLButtonElement,
   Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>
->(function InputGroupButton({ className, type = 'text', size = 'tiny', ...props }, ref) {
+>(function InputGroupButton({ className, variant = 'text', size = 'tiny', ...props }, ref) {
   return (
     <Button
-      type={type}
+      variant={variant}
       size={size}
       className={cn(inputGroupButtonVariants({ size }), className)}
       ref={ref}
diff --git a/packages/ui/src/components/shadcn/ui/sonner.tsx b/packages/ui/src/components/shadcn/ui/sonner.tsx
index 65e6d63e556..fcdee422e32 100644
--- a/packages/ui/src/components/shadcn/ui/sonner.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner.tsx
@@ -45,8 +45,8 @@ const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
           title: 'font-normal!',
           description:
             'text-xs group-[.toast]:text-foreground-lighter transition-opacity group-data-[expanded=false]:opacity-0 group-data-[front=true]:opacity-100!',
-          actionButton: cn('block', buttonVariants({ type: 'primary', size: 'tiny' })),
-          cancelButton: cn('block', buttonVariants({ type: 'default', size: 'tiny' })),
+          actionButton: cn('block', buttonVariants({ variant: 'primary', size: 'tiny' })),
+          cancelButton: cn('block', buttonVariants({ variant: 'default', size: 'tiny' })),
           // success: 'group toast group-[.toaster]:!bg-brand-200 group-[.toaster]:border-brand-500',
           warning:
             'group toast group-[.toaster]:!bg-warning-200 group-[.toaster]:!border-warning-500',