Component: Button migration 1: TextButton (#7537)

## 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    ## Screenshots (if applicable)  ┆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>
2026-01-26 19:09:52 +00:00 · 2025-12-16 20:38:24 -08:00
parent ab76d02823
commit 8d7dd9ed67
19 changed files with 275 additions and 260 deletions
--- 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",
--- 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
--- 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
--- a/src/components/button/TextButton.stories.ts
+++ b/src/components/button/TextButton.stories.ts
@@ -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>
-    `
-  })
-}
--- a/src/components/button/TextButton.vue
+++ b/src/components/button/TextButton.vue
@@ -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>
--- 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()

--- 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'
--- 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
--- 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<{
--- 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'
--- 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'
--- 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'
--- 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)
--- a/src/components/ui/button/Button.stories.ts
+++ 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>
+    `
+  })
+}
--- a/src/components/ui/button/Button.vue
+++ 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>
--- a/src/components/ui/button/button.variants.ts
+++ 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
--- 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)
--- 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: []
--- 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'