chore: refactor Button API so that it can be used a standard button (#46880)

## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

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

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>

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

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

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

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

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={

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}

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" />
 

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

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>

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>

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>
 

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

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

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

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

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>

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>

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

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

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

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

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>

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}

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>

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>

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={

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>

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

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

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>

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>

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>

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"

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

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'

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

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'

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'

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>

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>

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>

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>

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

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>

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>

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>

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>

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) => {

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>

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>

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>

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>

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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

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>

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

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>

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>

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

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

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>

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>

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>

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>

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>

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>

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>

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>

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

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>

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>

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>