From 8d7dd9ed6769f9396b342cd90e43c15926ff02fb Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Tue, 16 Dec 2025 20:38:24 -0800
Subject: [PATCH] Component: Button migration 1: TextButton (#7537)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Setup the variants and migrate existing uses of
TextButton/TextIconButton/IconButton to a single Button component.

Still a work in progress.

## Changes

- **What**: Add a new Button
- **What**: Migrate old buttons
- **What**: Delete old buttons
- **Dependencies**: CVA, upgrade Storybook

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7537-WIP-Component-Button-migration-2cb6d73d36508156a81bfc7bbddb36e9)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 20 ++++
 pnpm-workspace.yaml                           |  1 +
 src/components/button/TextButton.stories.ts   | 91 -------------------
 src/components/button/TextButton.vue          | 54 -----------
 .../dialog/confirm/ConfirmFooter.vue          | 21 ++---
 .../dialog/content/MissingNodesFooter.vue     | 20 ++--
 src/components/input/MultiSelect.vue          | 33 +++----
 src/components/queue/QueueOverlayActive.vue   | 14 +--
 .../queue/dialogs/QueueClearHistoryDialog.vue | 23 ++---
 src/components/queue/job/JobFiltersBar.vue    | 17 ++--
 src/components/queue/job/QueueJobItem.vue     | 14 +--
 .../sidebar/tabs/AssetsSidebarTab.vue         | 23 +++--
 src/components/ui/button/Button.stories.ts    | 68 ++++++++++++++
 src/components/ui/button/Button.vue           | 28 ++++++
 src/components/ui/button/button.variants.ts   | 49 ++++++++++
 .../assets/components/UploadModelFooter.vue   | 34 +++----
 .../UploadModelUpgradeModalFooter.vue         | 20 ++--
 vite.config.mts                               |  4 +-
 19 files changed, 275 insertions(+), 260 deletions(-)
 delete mode 100644 src/components/button/TextButton.stories.ts
 delete mode 100644 src/components/button/TextButton.vue
 create mode 100644 src/components/ui/button/Button.stories.ts
 create mode 100644 src/components/ui/button/Button.vue
 create mode 100644 src/components/ui/button/button.variants.ts

diff --git a/package.json b/package.json
index 991b228fc..8a672dacf 100644
--- a/package.json
+++ b/package.json
@@ -161,6 +161,7 @@
     "algoliasearch": "catalog:",
     "axios": "catalog:",
     "chart.js": "^4.5.0",
+    "cva": "catalog:",
     "dompurify": "^3.2.5",
     "dotenv": "catalog:",
     "es-toolkit": "^1.39.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e541bff1..063ac6948 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,6 +138,9 @@ catalogs:
     cross-env:
       specifier: ^10.1.0
       version: 10.1.0
+    cva:
+      specifier: 1.0.0-beta.4
+      version: 1.0.0-beta.4
     dotenv:
       specifier: ^16.4.5
       version: 16.6.1
@@ -419,6 +422,9 @@ importers:
       chart.js:
         specifier: ^4.5.0
         version: 4.5.0
+      cva:
+        specifier: 'catalog:'
+        version: 1.0.0-beta.4(typescript@5.9.2)
       dompurify:
         specifier: ^3.2.5
         version: 3.2.5
@@ -4669,6 +4675,14 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  cva@1.0.0-beta.4:
+    resolution: {integrity: sha512-F/JS9hScapq4DBVQXcK85l9U91M6ePeXoBMSp7vypzShoefUBxjQTo3g3935PUHgQd+IW77DjbPRIxugy4/GCQ==}
+    peerDependencies:
+      typescript: '>= 4.5.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -12808,6 +12822,12 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  cva@1.0.0-beta.4(typescript@5.9.2):
+    dependencies:
+      clsx: 2.1.1
+    optionalDependencies:
+      typescript: 5.9.2
+
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 682e80044..1a48dfd5d 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -47,6 +47,7 @@ catalog:
   algoliasearch: ^5.21.0
   axios: ^1.8.2
   cross-env: ^10.1.0
+  cva: 1.0.0-beta.4
   dotenv: ^16.4.5
   eslint: ^9.39.1
   eslint-config-prettier: ^10.1.8
diff --git a/src/components/button/TextButton.stories.ts b/src/components/button/TextButton.stories.ts
deleted file mode 100644
index 9c055a48b..000000000
--- a/src/components/button/TextButton.stories.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import TextButton from './TextButton.vue'
-
-const meta: Meta<typeof TextButton> = {
-  title: 'Components/Button/TextButton',
-  component: TextButton,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      defaultValue: 'Click me'
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md'],
-      defaultValue: 'md'
-    },
-    border: {
-      control: 'boolean',
-      description: 'Toggle border attribute'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Toggle disable status'
-    },
-    type: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'transparent'],
-      defaultValue: 'primary'
-    },
-    onClick: { action: 'clicked' }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    label: 'Primary Button',
-    type: 'primary',
-    size: 'md'
-  }
-}
-
-export const Secondary: Story = {
-  args: {
-    label: 'Secondary Button',
-    type: 'secondary',
-    size: 'md'
-  }
-}
-
-export const Transparent: Story = {
-  args: {
-    label: 'Transparent Button',
-    type: 'transparent',
-    size: 'md'
-  }
-}
-
-export const Small: Story = {
-  args: {
-    label: 'Small Button',
-    type: 'primary',
-    size: 'sm'
-  }
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: { TextButton },
-    template: `
-      <div class="flex flex-col gap-4">
-        <div class="flex gap-2 items-center">
-          <TextButton label="Primary Small" type="primary" size="sm" @click="() => {}" />
-          <TextButton label="Primary Medium" type="primary" size="md" @click="() => {}" />
-        </div>
-        <div class="flex gap-2 items-center">
-          <TextButton label="Secondary Small" type="secondary" size="sm" @click="() => {}" />
-          <TextButton label="Secondary Medium" type="secondary" size="md" @click="() => {}" />
-        </div>
-        <div class="flex gap-2 items-center">
-          <TextButton label="Transparent Small" type="transparent" size="sm" @click="() => {}" />
-          <TextButton label="Transparent Medium" type="transparent" size="md" @click="() => {}" />
-        </div>
-      </div>
-    `
-  })
-}
diff --git a/src/components/button/TextButton.vue b/src/components/button/TextButton.vue
deleted file mode 100644
index 4dbe53b9c..000000000
--- a/src/components/button/TextButton.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <span>{{ label }}</span>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { computed } from 'vue'
-
-import type { BaseButtonProps } from '@/types/buttonTypes'
-import {
-  getBaseButtonClasses,
-  getBorderButtonTypeClasses,
-  getButtonSizeClasses,
-  getButtonTypeClasses
-} from '@/types/buttonTypes'
-import { cn } from '@/utils/tailwindUtil'
-
-interface TextButtonProps extends BaseButtonProps {
-  label: string
-  onClick: () => void
-}
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const {
-  size = 'md',
-  type = 'primary',
-  border = false,
-  disabled = false,
-  class: className,
-  label,
-  onClick
-} = defineProps<TextButtonProps>()
-
-const buttonStyle = computed(() => {
-  const baseClasses = getBaseButtonClasses()
-  const sizeClasses = getButtonSizeClasses(size)
-  const typeClasses = border
-    ? getBorderButtonTypeClasses(type)
-    : getButtonTypeClasses(type)
-
-  return cn(baseClasses, sizeClasses, typeClasses, className)
-})
-</script>
diff --git a/src/components/dialog/confirm/ConfirmFooter.vue b/src/components/dialog/confirm/ConfirmFooter.vue
index f7d68b674..9cdd6e37b 100644
--- a/src/components/dialog/confirm/ConfirmFooter.vue
+++ b/src/components/dialog/confirm/ConfirmFooter.vue
@@ -1,19 +1,16 @@
 <template>
   <section class="w-full flex gap-2 justify-end px-2 pb-2">
-    <TextButton
-      :label="cancelTextX"
+    <Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
+      {{ cancelTextX }}
+    </Button>
+    <Button
       :disabled
-      type="transparent"
-      autofocus
-      @click="$emit('cancel')"
-    />
-    <TextButton
-      :label="confirmTextX"
-      :disabled
-      type="transparent"
+      variant="textonly"
       :class="confirmClass"
       @click="$emit('confirm')"
-    />
+    >
+      {{ confirmTextX }}
+    </Button>
   </section>
 </template>
 <script setup lang="ts">
@@ -21,7 +18,7 @@ import { computed, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 
 const { t } = useI18n()
 
diff --git a/src/components/dialog/content/MissingNodesFooter.vue b/src/components/dialog/content/MissingNodesFooter.vue
index 68f733aa8..4849f3149 100644
--- a/src/components/dialog/content/MissingNodesFooter.vue
+++ b/src/components/dialog/content/MissingNodesFooter.vue
@@ -18,22 +18,16 @@
         <i class="icon-[lucide--info]"></i>
       </template>
     </IconTextButton>
-    <TextButton
-      :label="$t('missingNodes.cloud.gotIt')"
-      type="secondary"
-      size="md"
-      @click="handleGotItClick"
-    />
+    <Button variant="secondary" size="md" @click="handleGotItClick">{{
+      $t('missingNodes.cloud.gotIt')
+    }}</Button>
   </div>
 
   <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <TextButton
-      :label="$t('g.openManager')"
-      type="transparent"
-      size="sm"
-      @click="openManager"
-    />
+    <Button variant="textonly" size="sm" @click="openManager">{{
+      $t('g.openManager')
+    }}</Button>
     <PackInstallButton
       v-if="showInstallAllButton"
       type="secondary"
@@ -57,7 +51,7 @@ import { computed, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 2c2271c31..aaa372d73 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -62,7 +62,7 @@
       // Option row hover and focus tone
       option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'flex gap-2 items-center h-10 px-2 rounded-lg',
+          'flex gap-2 items-center h-10 px-2 rounded-lg cursor-pointer',
           'hover:bg-secondary-background-hover',
           // Add focus/highlight state for keyboard navigation
           context?.focused &&
@@ -112,14 +112,14 @@
                 : $t('g.itemSelected', { selectedCount })
             }}
           </span>
-          <TextButton
+          <Button
             v-if="showClearButton"
-            :label="$t('g.clearAll')"
-            type="transparent"
-            size="fit-content"
-            class="text-sm text-text-primary"
+            variant="textonly"
+            size="md"
             @click.stop="selectedItems = []"
-          />
+          >
+            {{ $t('g.clearAll') }}
+          </Button>
         </div>
         <div class="my-4 h-px bg-border-default"></div>
       </div>
@@ -145,9 +145,13 @@
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
     <template #option="slotProps">
-      <div class="flex items-center gap-2" :style="popoverStyle">
+      <div
+        role="button"
+        class="flex items-center gap-2 cursor-pointer"
+        :style="popoverStyle"
+      >
         <div
-          class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+          class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
               ? 'bg-primary-background'
@@ -159,11 +163,9 @@
             class="text-bold icon-[lucide--check] text-xs text-white"
           />
         </div>
-        <Button
-          class="border-none bg-transparent text-left outline-none"
-          unstyled
-          >{{ slotProps.option.name }}</Button
-        >
+        <span>
+          {{ slotProps.option.name }}
+        </span>
       </div>
     </template>
   </MultiSelect>
@@ -172,17 +174,16 @@
 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import Button from 'primevue/button'
 import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
 import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
-import TextButton from '../button/TextButton.vue'
 import type { SelectOption } from './types'
 
 type Option = SelectOption
diff --git a/src/components/queue/QueueOverlayActive.vue b/src/components/queue/QueueOverlayActive.vue
index abb3ae982..c31504fe8 100644
--- a/src/components/queue/QueueOverlayActive.vue
+++ b/src/components/queue/QueueOverlayActive.vue
@@ -80,12 +80,14 @@
         </div>
       </div>
 
-      <TextButton
-        class="h-6 min-w-[120px] flex-1 px-2 py-0 text-[12px]"
-        type="secondary"
-        :label="t('sideToolbar.queueProgressOverlay.viewAllJobs')"
+      <Button
+        class="min-w-30 flex-1 px-2 py-0"
+        variant="secondary"
+        size="sm"
         @click="$emit('viewAllJobs')"
-      />
+      >
+        {{ t('sideToolbar.queueProgressOverlay.viewAllJobs') }}
+      </Button>
     </div>
   </div>
 </template>
@@ -95,7 +97,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 
 defineProps<{
diff --git a/src/components/queue/dialogs/QueueClearHistoryDialog.vue b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
index 49283b717..06a34568a 100644
--- a/src/components/queue/dialogs/QueueClearHistoryDialog.vue
+++ b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
@@ -31,20 +31,17 @@
     </div>
 
     <footer class="flex items-center justify-end px-4 py-4">
-      <div class="flex items-center gap-4 text-[14px] leading-none">
-        <TextButton
-          class="min-h-[24px] px-1 py-1 text-[14px] leading-[1] text-text-secondary hover:text-text-primary"
-          type="transparent"
-          :label="t('g.cancel')"
-          @click="onCancel"
-        />
-        <TextButton
-          class="min-h-[32px] px-4 py-2 text-[12px] font-normal leading-[1]"
-          type="secondary"
-          :label="t('g.clear')"
+      <div class="flex items-center gap-4 leading-none">
+        <Button variant="muted-textonly" size="lg" @click="onCancel">
+          {{ t('g.cancel') }}
+        </Button>
+        <Button
+          variant="secondary"
+          size="lg"
           :disabled="isClearing"
           @click="onConfirm"
-        />
+          >{{ t('g.clear') }}</Button
+        >
       </div>
     </footer>
   </section>
@@ -55,7 +52,7 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useQueueStore } from '@/stores/queueStore'
diff --git a/src/components/queue/job/JobFiltersBar.vue b/src/components/queue/job/JobFiltersBar.vue
index c6796428a..d7695ba03 100644
--- a/src/components/queue/job/JobFiltersBar.vue
+++ b/src/components/queue/job/JobFiltersBar.vue
@@ -2,17 +2,16 @@
   <div class="flex items-center justify-between gap-2 px-3">
     <div class="min-w-0 flex-1 overflow-x-auto">
       <div class="inline-flex items-center gap-1 whitespace-nowrap">
-        <TextButton
+        <Button
           v-for="tab in visibleJobTabs"
           :key="tab"
-          class="h-6 px-3 py-1 text-[12px] leading-none hover:opacity-90"
-          :type="selectedJobTab === tab ? 'secondary' : 'transparent'"
-          :class="[
-            selectedJobTab === tab ? 'text-text-primary' : 'text-text-secondary'
-          ]"
-          :label="tabLabel(tab)"
+          :variant="selectedJobTab === tab ? 'secondary' : 'muted-textonly'"
+          size="sm"
+          class="px-3"
           @click="$emit('update:selectedJobTab', tab)"
-        />
+        >
+          {{ tabLabel(tab) }}
+        </Button>
       </div>
     </div>
     <div class="ml-2 flex shrink-0 items-center gap-2">
@@ -155,7 +154,7 @@ import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes, jobTabs } from '@/composables/queue/useJobList'
 import type { JobSortMode, JobTab } from '@/composables/queue/useJobList'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
diff --git a/src/components/queue/job/QueueJobItem.vue b/src/components/queue/job/QueueJobItem.vue
index afc603c17..b9e05374b 100644
--- a/src/components/queue/job/QueueJobItem.vue
+++ b/src/components/queue/job/QueueJobItem.vue
@@ -154,14 +154,14 @@
             >
               <i class="icon-[lucide--x] size-4" />
             </IconButton>
-            <TextButton
+            <Button
               v-else-if="props.state === 'completed'"
-              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-2 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
-              type="transparent"
-              :label="t('menuLabels.View')"
-              :aria-label="t('menuLabels.View')"
+              class="transform bg-modal-card-button-surface px-2 py-0 transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              variant="textonly"
+              size="sm"
               @click.stop="emit('view')"
-            />
+              >{{ t('menuLabels.View') }}</Button
+            >
             <IconButton
               v-if="props.showMenu !== undefined ? props.showMenu : true"
               v-tooltip.top="moreTooltipConfig"
@@ -204,9 +204,9 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 87d58f8bb..7c640a858 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -112,18 +112,20 @@
       >
         <div class="flex-1 pl-4">
           <div ref="selectionCountButtonRef" class="inline-flex w-48">
-            <TextButton
-              :label="
+            <Button
+              variant="secondary"
+              size="lg"
+              :class="cn(isCompact && 'text-left')"
+              @click="handleDeselectAll"
+            >
+              {{
                 isHoveringSelectionCount
                   ? $t('mediaAsset.selection.deselectAll')
                   : $t('mediaAsset.selection.selectedCount', {
                       count: totalOutputCount
                     })
-              "
-              type="secondary"
-              :class="isCompact ? 'text-left' : ''"
-              @click="handleDeselectAll"
-            />
+              }}
+            </Button>
           </div>
         </div>
         <div class="flex gap-2 pr-4">
@@ -179,10 +181,10 @@ import { Divider } from 'primevue'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
@@ -190,7 +192,7 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
-import { t } from '@/i18n'
+import Button from '@/components/ui/button/Button.vue'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
@@ -203,6 +205,9 @@ import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
 import { ResultItemImpl } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()
 
 const activeTab = ref<'input' | 'output'>('output')
 const folderPromptId = ref<string | null>(null)
diff --git a/src/components/ui/button/Button.stories.ts b/src/components/ui/button/Button.stories.ts
new file mode 100644
index 000000000..5ffd6c1b3
--- /dev/null
+++ b/src/components/ui/button/Button.stories.ts
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Button from './Button.vue'
+import { FOR_STORIES } from '@/components/ui/button/button.variants'
+
+const { variants, sizes } = FOR_STORIES
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+      defaultValue: 'md'
+    },
+    variant: {
+      control: { type: 'select' },
+      options: variants,
+      defaultValue: 'primary'
+    },
+    as: { defaultValue: 'button' },
+    asChild: { defaultValue: false },
+    default: {
+      defaultValue: 'Button'
+    }
+  },
+  args: {
+    variant: 'secondary',
+    size: 'md',
+    default: 'Button'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleButton: Story = {
+  args: {
+    variant: 'primary',
+    size: 'lg'
+  }
+}
+
+function generateVariants() {
+  const variantButtons: string[] = []
+  for (const variant of variants) {
+    for (const size of sizes) {
+      variantButtons.push(
+        `<Button variant="${variant}" size="${size}">${size === 'icon' ? `<i class="icon-[lucide--settings]" />` : variant}</Button>`
+      )
+    }
+  }
+  return variantButtons
+}
+
+// Note: Keep the number of columns here aligned with the number of sizes above.
+export const AllVariants: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="grid grid-cols-4 gap-4 place-items-center-safe">
+      ${generateVariants().join('\n')}
+        
+      </div>
+    `
+  })
+}
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
new file mode 100644
index 000000000..3b9612948
--- /dev/null
+++ b/src/components/ui/button/Button.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+import type { ButtonVariants } from './button.variants'
+import { buttonVariants } from './button.variants'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const { as = 'button', class: customClass = '' } = defineProps<Props>()
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    :class="cn(buttonVariants({ variant, size }), customClass)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts
new file mode 100644
index 000000000..45114393c
--- /dev/null
+++ b/src/components/ui/button/button.variants.ts
@@ -0,0 +1,49 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const buttonVariants = cva({
+  base: 'inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  variants: {
+    variant: {
+      secondary:
+        'bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover',
+      primary:
+        'bg-primary-background text-base-foreground hover:bg-primary-background-hover',
+      inverted:
+        'bg-base-foreground text-base-background hover:bg-base-foreground/80',
+      destructive:
+        'bg-destructive-background text-base-foreground hover:bg-destructive-background-hover',
+      textonly:
+        'text-base-foreground bg-transparent hover:bg-secondary-background-hover',
+      'muted-textonly':
+        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover'
+    },
+    size: {
+      sm: 'h-6 rounded-sm px-2 py-1 text-xs',
+      md: 'h-8 rounded-lg p-2 text-xs',
+      lg: 'h-10 rounded-lg px-4 py-2 text-sm',
+      icon: 'size-9'
+    }
+  },
+
+  defaultVariants: {
+    variant: 'secondary',
+    size: 'md'
+  }
+})
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+const variants = [
+  'secondary',
+  'primary',
+  'inverted',
+  'destructive',
+  'textonly',
+  'muted-textonly'
+] as const satisfies Array<ButtonVariants['variant']>
+const sizes = ['sm', 'md', 'lg', 'icon'] as const satisfies Array<
+  ButtonVariants['size']
+>
+
+export const FOR_STORIES = { variants, sizes } as const
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 82f597dd7..68c9bcdff 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -13,24 +13,26 @@
         <i class="icon-[lucide--circle-question-mark]" />
       </template>
     </IconTextButton>
-    <TextButton
+    <Button
       v-if="currentStep === 1"
-      :label="$t('g.cancel')"
-      type="transparent"
-      size="md"
+      variant="muted-textonly"
+      size="lg"
       data-attr="upload-model-step1-cancel-button"
       :disabled="isFetchingMetadata || isUploading"
       @click="emit('close')"
-    />
-    <TextButton
+    >
+      {{ $t('g.cancel') }}
+    </Button>
+    <Button
       v-if="currentStep !== 1 && currentStep !== 3"
-      :label="$t('g.back')"
-      type="transparent"
-      size="md"
+      variant="muted-textonly"
+      size="lg"
       :data-attr="`upload-model-step${currentStep}-back-button`"
       :disabled="isFetchingMetadata || isUploading"
       @click="emit('back')"
-    />
+    >
+      {{ $t('g.back') }}
+    </Button>
     <span v-else />
 
     <IconTextButton
@@ -65,14 +67,14 @@
         />
       </template>
     </IconTextButton>
-    <TextButton
+    <Button
       v-else-if="currentStep === 3 && uploadStatus === 'success'"
-      :label="$t('assetBrowser.finish')"
-      type="secondary"
-      size="md"
+      variant="secondary"
       data-attr="upload-model-step3-finish-button"
       @click="emit('close')"
-    />
+    >
+      {{ $t('assetBrowser.finish') }}
+    </Button>
     <VideoHelpDialog
       v-model="showVideoHelp"
       video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
@@ -85,7 +87,7 @@
 import { ref } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
 
 const showVideoHelp = ref(false)
diff --git a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
index 8439c16ec..b030a7c3a 100644
--- a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
+++ b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
@@ -9,23 +9,17 @@
       <i class="icon-[lucide--external-link]" />
       <span>{{ $t('g.learnMore') }}</span>
     </a>
-    <TextButton
-      :label="$t('g.close')"
-      type="transparent"
-      size="md"
-      @click="emit('close')"
-    />
-    <TextButton
-      :label="$t('subscription.required.subscribe')"
-      type="secondary"
-      size="md"
-      @click="emit('subscribe')"
-    />
+    <Button variant="textonly" @click="emit('close')">{{
+      $t('g.close')
+    }}</Button>
+    <Button variant="secondary" @click="emit('subscribe')">
+      {{ $t('subscription.required.subscribe') }}
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 
 const emit = defineEmits<{
   close: []
diff --git a/vite.config.mts b/vite.config.mts
index b85a41110..956bbc7e6 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -27,6 +27,7 @@ const ANALYZE_BUNDLE = process.env.ANALYZE_BUNDLE === 'true'
 const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
 const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
 const GENERATE_SOURCEMAP = process.env.GENERATE_SOURCEMAP !== 'false'
+const IS_STORYBOOK = process.env.npm_lifecycle_event === 'storybook'
 
 // Open Graph / Twitter Meta Tags Constants
 const VITE_OG_URL = 'https://cloud.comfy.org'
@@ -53,7 +54,8 @@ const DISTRIBUTION: 'desktop' | 'localhost' | 'cloud' =
 // Disable Vue DevTools for production cloud distribution
 const DISABLE_VUE_PLUGINS =
   process.env.DISABLE_VUE_PLUGINS === 'true' ||
-  (DISTRIBUTION === 'cloud' && !IS_DEV)
+  (DISTRIBUTION === 'cloud' && !IS_DEV) ||
+  IS_STORYBOOK
 
 const DEV_SEVER_FALLBACK_URL =
   DISTRIBUTION === 'cloud'