Component: The Rest of the PrimeVue buttons (#7649)

## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/components/MenuHamburger.vue

@@ -5,23 +5,23 @@
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      icon="pi pi-bars"
-      severity="secondary"
-      text
-      size="large"
+      variant="muted-textonly"
+      size="lg"
       :aria-label="$t('menu.showMenu')"
       aria-live="assertive"
       @click="exitFocusMode"
       @contextmenu="showNativeSystemMenu"
-    />
+    >
+      <i class="pi pi-bars" />
+    </Button>
     <div class="window-actions-spacer" />
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { watchEffect } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -22,12 +22,13 @@
             value: item.tooltip,
             showDelay: 600
           }"
-          :label="String(item.label ?? '')"
-          :icon="item.icon"
-          :severity="item.key === queueMode ? 'primary' : 'secondary'"
-          size="small"
-          text
-        />
+          :variant="item.key === queueMode ? 'primary' : 'secondary'"
+          size="sm"
+          class="w-full justify-start"
+        >
+          <i v-if="item.icon" :class="item.icon" />
+          {{ String(item.label ?? '') }}
+        </Button>
       </template>
     </SplitButton>
     <BatchCountEdit />
@@ -36,12 +37,12 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
 import type { MenuItem } from 'primevue/menuitem'
 import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'

src/components/bottomPanel/BottomPanel.vue

@@ -46,21 +46,22 @@
           <div class="flex items-center gap-2">
             <Button
               v-if="isShortcutsTabActive"
-              :label="$t('shortcuts.manageShortcuts')"
-              icon="pi pi-cog"
-              severity="secondary"
-              size="small"
-              text
+              variant="muted-textonly"
+              size="sm"
               @click="openKeybindingSettings"
-            />
+            >
+              <i class="pi pi-cog" />
+              {{ $t('shortcuts.manageShortcuts') }}
+            </Button>
             <Button
               class="justify-self-end"
-              icon="pi pi-times"
-              severity="secondary"
-              size="small"
-              text
+              variant="muted-textonly"
+              size="sm"
+              :aria-label="t('g.close')"
               @click="closeBottomPanel"
-            />
+            >
+              <i class="pi pi-times" />
+            </Button>
           </div>
         </div>
       </TabList>
@@ -79,7 +80,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Tab from 'primevue/tab'
 import type { TabPassThroughMethodOptions } from 'primevue/tab'
 import TabList from 'primevue/tablist'
@@ -88,6 +88,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -11,9 +11,8 @@
         value: tooltipText,
         showDelay: 300
       }"
-      icon="pi pi-copy"
-      severity="secondary"
-      size="small"
+      variant="secondary"
+      size="sm"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
           'opacity-0 pointer-events-none select-none': !isHovered
@@ -21,18 +20,20 @@
       "
       :aria-label="tooltipText"
       @click="handleCopy"
-    />
+    >
+      <i class="pi pi-copy" />
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
-import Button from 'primevue/button'
 import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'

src/components/common/BackgroundImageUpload.vue

@@ -7,20 +7,24 @@
     />
     <Button
       v-tooltip="$t('g.upload')"
-      :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
-      size="small"
+      variant="secondary"
+      size="sm"
+      :aria-label="$t('g.upload')"
       :disabled="isUploading"
       @click="triggerFileInput"
-    />
+    >
+      <i :class="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'" />
+    </Button>
     <Button
       v-tooltip="$t('g.clear')"
-      outlined
-      icon="pi pi-trash"
-      severity="danger"
-      size="small"
+      variant="destructive"
+      size="sm"
+      :aria-label="$t('g.clear')"
       :disabled="!modelValue"
       @click="clearImage"
-    />
+    >
+      <i class="pi pi-trash" />
+    </Button>
     <input
       ref="fileInput"
       type="file"
@@ -32,10 +36,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 

src/components/common/CustomizationDialog.vue

@@ -27,24 +27,19 @@
       </div>
     </div>
     <template #footer>
-      <Button
-        :label="$t('g.reset')"
-        icon="pi pi-refresh"
-        class="p-button-text"
-        @click="resetCustomization"
-      />
-      <Button
-        :label="$t('g.confirm')"
-        icon="pi pi-check"
-        autofocus
-        @click="confirmCustomization"
-      />
+      <Button variant="textonly" @click="resetCustomization">
+        <i class="pi pi-refresh" />
+        {{ $t('g.reset') }}
+      </Button>
+      <Button autofocus @click="confirmCustomization">
+        <i class="pi pi-check" />
+        {{ $t('g.confirm') }}
+      </Button>
     </template>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Divider from 'primevue/divider'
 import SelectButton from 'primevue/selectbutton'
@@ -52,6 +47,7 @@ import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ColorCustomizationSelector from '@/components/common/ColorCustomizationSelector.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 
 const { t } = useI18n()

src/components/common/ElectronFileDownload.vue

@@ -16,20 +16,22 @@
         <Button
           v-if="status === null || status === 'error'"
           class="file-action-button"
-          :label="$t('g.download') + ' (' + fileSize + ')'"
-          size="small"
-          outlined
+          variant="secondary"
+          size="sm"
           :disabled="!!props.error"
-          icon="pi pi-download"
           @click="triggerDownload"
-        />
+        >
+          <i class="pi pi-download" />
+          {{ $t('g.download') + ' (' + fileSize + ')' }}
+        </Button>
         <Button
           v-if="(status === null || status === 'error') && !!props.url"
-          :label="$t('g.copyURL')"
-          size="small"
-          outlined
+          variant="secondary"
+          size="sm"
           @click="copyURL"
-        />
+        >
+          {{ $t('g.copyURL') }}
+        </Button>
       </div>
     </div>
     <div
@@ -49,44 +51,48 @@
         v-if="status === 'in_progress'"
         v-tooltip.top="t('electronFileDownload.pause')"
         class="file-action-button"
-        size="small"
-        outlined
+        variant="secondary"
+        size="sm"
         :disabled="!!props.error"
-        icon="pi pi-pause-circle"
         @click="triggerPauseDownload"
-      />
+      >
+        <i class="pi pi-pause-circle" />
+      </Button>
 
       <Button
         v-if="status === 'paused'"
         v-tooltip.top="t('electronFileDownload.resume')"
         class="file-action-button"
-        size="small"
-        outlined
+        variant="secondary"
+        size="sm"
+        :aria-label="t('electronFileDownload.resume')"
         :disabled="!!props.error"
-        icon="pi pi-play-circle"
         @click="triggerResumeDownload"
-      />
+      >
+        <i class="pi pi-play-circle" />
+      </Button>
 
       <Button
         v-tooltip.top="t('electronFileDownload.cancel')"
         class="file-action-button"
-        size="small"
-        outlined
+        variant="destructive"
+        size="sm"
+        :aria-label="t('electronFileDownload.cancel')"
         :disabled="!!props.error"
-        icon="pi pi-times-circle"
-        severity="danger"
         @click="triggerCancelDownload"
-      />
+      >
+        <i class="pi pi-times-circle" />
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'

src/components/common/FileDownload.vue

@@ -22,31 +22,27 @@
     </div>
     <div>
       <Button
-        :label="$t('g.download') + ' (' + fileSize + ')'"
-        size="small"
-        outlined
+        variant="secondary"
         :disabled="!!props.error"
         :title="props.url"
         @click="download.triggerBrowserDownload"
-      />
+      >
+        {{ $t('g.download') + ' (' + fileSize + ')' }}
+      </Button>
     </div>
     <div>
-      <Button
-        :label="$t('g.copyURL')"
-        size="small"
-        outlined
-        :disabled="!!props.error"
-        @click="copyURL"
-      />
+      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
+        {{ $t('g.copyURL') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { formatSize } from '@/utils/formatUtil'

src/components/common/FormImageUpload.vue

@@ -14,21 +14,20 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <Button
-          icon="pi pi-upload"
-          :label="$t('g.upload')"
-          size="small"
-          @click="triggerFileInput"
-        />
+        <Button size="sm" @click="triggerFileInput">
+          <i class="pi pi-upload" />
+          {{ $t('g.upload') }}
+        </Button>
         <Button
           v-if="modelValue"
           class="w-full"
-          outlined
-          icon="pi pi-trash"
-          severity="danger"
-          size="small"
+          variant="destructive"
+          size="sm"
+          :aria-label="$t('g.delete')"
           @click="clearImage"
-        />
+        >
+          <i class="pi pi-trash" />
+        </Button>
       </div>
     </div>
     <input
@@ -42,9 +41,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 defineProps<{
   modelValue: string
 }>()

src/components/common/NoResultsPlaceholder.vue

@@ -10,10 +10,11 @@
           </p>
           <Button
             v-if="buttonLabel"
-            :label="buttonLabel"
-            class="p-button-text"
+            variant="textonly"
             @click="$emit('action')"
-          />
+          >
+            {{ buttonLabel }}
+          </Button>
         </div>
       </template>
     </Card>
@@ -21,9 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Card from 'primevue/card'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const props = defineProps<{
   class?: string
   icon?: string

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -11,24 +11,25 @@
     <ApiNodesList :node-names="apiNodeNames" />
 
     <div class="flex items-center justify-between">
-      <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
+      <Button variant="textonly" @click="handleLearnMoreClick">
+        {{ t('g.learnMore') }}
+      </Button>
       <div class="flex gap-2">
-        <Button
-          :label="t('g.cancel')"
-          outlined
-          severity="secondary"
-          @click="onCancel?.()"
-        />
-        <Button :label="t('g.login')" @click="onLogin?.()" />
+        <Button variant="secondary" @click="onCancel?.()">
+          {{ t('g.cancel') }}
+        </Button>
+        <Button @click="onLogin?.()">
+          {{ t('g.login') }}
+        </Button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
 
 const { t } = useI18n()

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -31,69 +31,64 @@
         }}</label>
       </div>
 
-      <Button
-        :label="$t('g.cancel')"
-        icon="pi pi-undo"
-        severity="secondary"
-        autofocus
-        @click="onCancel"
-      />
-      <Button
-        v-if="type === 'default'"
-        :label="$t('g.confirm')"
-        severity="primary"
-        icon="pi pi-check"
-        @click="onConfirm"
-      />
+      <Button variant="secondary" autofocus @click="onCancel">
+        <i class="pi pi-undo" />
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button v-if="type === 'default'" variant="primary" @click="onConfirm">
+        <i class="pi pi-check" />
+        {{ $t('g.confirm') }}
+      </Button>
       <Button
         v-else-if="type === 'delete'"
-        :label="$t('g.delete')"
-        severity="danger"
-        icon="pi pi-trash"
+        variant="destructive"
         @click="onConfirm"
-      />
+      >
+        <i class="pi pi-trash" />
+        {{ $t('g.delete') }}
+      </Button>
       <Button
         v-else-if="type === 'overwrite' || type === 'overwriteBlueprint'"
-        :label="$t('g.overwrite')"
-        severity="warn"
-        icon="pi pi-save"
+        variant="destructive"
         @click="onConfirm"
-      />
+      >
+        <i class="pi pi-save" />
+        {{ $t('g.overwrite') }}
+      </Button>
       <template v-else-if="type === 'dirtyClose'">
-        <Button
-          :label="$t('g.no')"
-          severity="secondary"
-          icon="pi pi-times"
-          @click="onDeny"
-        />
-        <Button :label="$t('g.save')" icon="pi pi-save" @click="onConfirm" />
+        <Button variant="secondary" @click="onDeny">
+          <i class="pi pi-times" />
+          {{ $t('g.no') }}
+        </Button>
+        <Button @click="onConfirm">
+          <i class="pi pi-save" />
+          {{ $t('g.save') }}
+        </Button>
       </template>
       <Button
         v-else-if="type === 'reinstall'"
-        :label="$t('desktopMenu.reinstall')"
-        severity="warn"
-        icon="pi pi-eraser"
+        variant="destructive"
         @click="onConfirm"
-      />
+      >
+        <i class="pi pi-eraser" />
+        {{ $t('desktopMenu.reinstall') }}
+      </Button>
       <!-- Invalid - just show a close button. -->
-      <Button
-        v-else
-        :label="$t('g.close')"
-        severity="primary"
-        icon="pi pi-times"
-        @click="onCancel"
-      />
+      <Button v-else variant="primary" @click="onCancel">
+        <i class="pi pi-times" />
+        {{ $t('g.close') }}
+      </Button>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'

src/components/dialog/content/ErrorDialogContent.vue

@@ -14,18 +14,16 @@
     </template>
 
     <div class="flex justify-center gap-2">
+      <Button v-show="!reportOpen" variant="textonly" @click="showReport">
+        {{ $t('g.showReport') }}
+      </Button>
       <Button
         v-show="!reportOpen"
-        text
-        :label="$t('g.showReport')"
-        @click="showReport"
-      />
-      <Button
-        v-show="!reportOpen"
-        text
-        :label="$t('issueReport.helpFix')"
+        variant="textonly"
         @click="showContactSupport"
-      />
+      >
+        {{ $t('issueReport.helpFix') }}
+      </Button>
     </div>
     <template v-if="reportOpen">
       <Divider />
@@ -40,18 +38,15 @@
         :repo-owner="repoOwner"
         :repo-name="repoName"
       />
-      <Button
-        v-if="reportOpen"
-        :label="$t('g.copyToClipboard')"
-        icon="pi pi-copy"
-        @click="copyReportToClipboard"
-      />
+      <Button v-if="reportOpen" @click="copyReportToClipboard">
+        <i class="pi pi-copy" />
+        {{ $t('g.copyToClipboard') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import { useToast } from 'primevue/usetoast'
@@ -60,6 +55,7 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'

src/components/dialog/content/PromptDialogContent.vue

@@ -18,11 +18,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import FloatLabel from 'primevue/floatlabel'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{

src/components/dialog/content/SignInContent.vue

@@ -51,8 +51,7 @@
           <Button
             type="button"
             class="h-10"
-            severity="secondary"
-            outlined
+            variant="secondary"
             @click="signInWithGoogle"
           >
             <i class="pi pi-google mr-2"></i>
@@ -66,8 +65,7 @@
           <Button
             type="button"
             class="h-10"
-            severity="secondary"
-            outlined
+            variant="secondary"
             @click="signInWithGithub"
           >
             <i class="pi pi-github mr-2"></i>
@@ -82,8 +80,7 @@
         <Button
           type="button"
           class="h-10"
-          severity="secondary"
-          outlined
+          variant="secondary"
           @click="showApiKeyForm = true"
         >
           <img
@@ -142,12 +139,12 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -58,26 +58,27 @@
     <Button
       :disabled="!selectedCredits || loading"
       :loading="loading"
-      severity="primary"
-      :label="$t('credits.topUp.buy')"
-      :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
-      :pt="{ label: { class: 'text-primary-foreground' } }"
+      variant="primary"
+      :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
       @click="handleBuy"
-    />
+    >
+      {{ $t('credits.topUp.buy') }}
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { creditsToUsd } from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
+import { cn } from '@/utils/tailwindUtil'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
 

src/components/dialog/content/UpdatePasswordContent.vue

@@ -7,12 +7,9 @@
     <PasswordFields />
 
     <!-- Submit Button -->
-    <Button
-      type="submit"
-      :label="$t('userSettings.updatePassword')"
-      class="mt-4 h-10 font-medium"
-      :loading="loading"
-    />
+    <Button type="submit" class="mt-4 h-10 font-medium" :loading="loading">
+      {{ $t('userSettings.updatePassword') }}
+    </Button>
   </Form>
 </template>
 
@@ -20,10 +17,10 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
 import { ref } from 'vue'
 
 import PasswordFields from '@/components/dialog/content/signin/PasswordFields.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { updatePasswordSchema } from '@/schemas/signInSchema'
 

src/components/dialog/content/error/FindIssueButton.vue

@@ -1,16 +1,14 @@
 <template>
-  <Button
-    :label="$t('g.findIssues')"
-    severity="secondary"
-    icon="pi pi-github"
-    @click="openGitHubIssues"
-  />
+  <Button variant="secondary" @click="openGitHubIssues">
+    <i class="pi pi-github" />
+    {{ $t('g.findIssues') }}
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 
 const props = defineProps<{

src/components/dialog/content/setting/CurrentUserMessage.vue

@@ -10,15 +10,23 @@
       <div>
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
-      <Button icon="pi pi-sign-out" text @click="logout" />
+      <Button
+        class="text-inherit"
+        variant="textonly"
+        size="icon"
+        :aria-label="$t('menuLabels.Sign Out')"
+        @click="logout"
+      >
+        <i class="pi pi-sign-out" />
+      </Button>
     </div>
   </Message>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Message from 'primevue/message'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useUserStore } from '@/stores/userStore'
 
 const userStore = useUserStore()

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -23,24 +23,33 @@
         <template #body="slotProps">
           <div class="actions invisible flex flex-row">
             <Button
-              icon="pi pi-pencil"
-              class="p-button-text"
+              variant="textonly"
+              size="icon"
+              :aria-label="$t('g.edit')"
               @click="editKeybinding(slotProps.data)"
-            />
+            >
+              <i class="pi pi-pencil" />
+            </Button>
             <Button
-              icon="pi pi-replay"
-              class="p-button-text p-button-warn"
+              variant="textonly"
+              size="icon"
+              :aria-label="$t('g.reset')"
               :disabled="
                 !keybindingStore.isCommandKeybindingModified(slotProps.data.id)
               "
               @click="resetKeybinding(slotProps.data)"
-            />
+            >
+              <i class="pi pi-replay" />
+            </Button>
             <Button
-              icon="pi pi-trash"
-              class="p-button-text p-button-danger"
+              variant="textonly"
+              size="icon"
+              :aria-label="$t('g.delete')"
               :disabled="!slotProps.data.keybinding"
               @click="removeKeybinding(slotProps.data)"
-            />
+            >
+              <i class="pi pi-trash" />
+            </Button>
           </div>
         </template>
       </Column>
@@ -104,30 +113,31 @@
       </div>
       <template #footer>
         <Button
-          :label="existingKeybindingOnCombo ? 'Overwrite' : 'Save'"
-          :icon="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
-          :severity="existingKeybindingOnCombo ? 'warn' : undefined"
+          :variant="existingKeybindingOnCombo ? 'destructive' : 'primary'"
           autofocus
           @click="saveKeybinding"
-        />
+        >
+          <i
+            :class="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
+          />
+          {{ existingKeybindingOnCombo ? $t('g.overwrite') : $t('g.save') }}
+        </Button>
       </template>
     </Dialog>
     <Button
       v-tooltip="$t('g.resetAllKeybindingsTooltip')"
-      class="mt-4"
-      :label="$t('g.resetAll')"
-      icon="pi pi-replay"
-      severity="danger"
-      fluid
-      text
+      class="mt-4 w-full"
+      variant="destructive-textonly"
       @click="resetAllKeybindings"
-    />
+    >
+      <i class="pi pi-replay" />
+      {{ $t('g.resetAll') }}
+    </Button>
   </PanelTemplate>
 </template>
 
 <script setup lang="ts">
 import { FilterMatchMode } from '@primevue/core/api'
-import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
@@ -139,6 +149,7 @@ import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import {

src/components/dialog/content/setting/LegacyCreditsPanel.vue

@@ -17,10 +17,11 @@
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
             v-else-if="isActiveSubscription"
-            :label="$t('credits.purchaseCredits')"
             :loading="loading"
             @click="handlePurchaseCreditsClick"
-          />
+          >
+            {{ $t('credits.purchaseCredits') }}
+          </Button>
         </div>
         <div class="flex flex-row items-center">
           <Skeleton
@@ -33,25 +34,26 @@
             {{ $t('credits.lastUpdated') }}: {{ formattedLastUpdateTime }}
           </div>
           <Button
-            icon="pi pi-refresh"
-            text
-            size="small"
-            severity="secondary"
+            variant="muted-textonly"
+            size="icon-sm"
+            :aria-label="$t('g.refresh')"
             @click="() => authActions.fetchBalance()"
-          />
+          >
+            <i class="pi pi-refresh" />
+          </Button>
         </div>
       </div>
 
       <div class="flex items-center justify-between">
         <h3>{{ $t('credits.activity') }}</h3>
         <Button
-          :label="$t('credits.invoiceHistory')"
-          text
-          severity="secondary"
-          icon="pi pi-arrow-up-right"
+          variant="muted-textonly"
           :loading="loading"
           @click="handleCreditsHistoryClick"
-        />
+        >
+          <i class="pi pi-arrow-up-right" />
+          {{ $t('credits.invoiceHistory') }}
+        </Button>
       </div>
 
       <template v-if="creditHistory.length > 0">
@@ -86,34 +88,24 @@
       <UsageLogsTable ref="usageLogsTableRef" />
 
       <div class="flex flex-row gap-2">
-        <Button
-          :label="$t('credits.faqs')"
-          text
-          severity="secondary"
-          icon="pi pi-question-circle"
-          @click="handleFaqClick"
-        />
-        <Button
-          :label="$t('subscription.partnerNodesCredits')"
-          text
-          severity="secondary"
-          icon="pi pi-question-circle"
-          @click="handleOpenPartnerNodesInfo"
-        />
-        <Button
-          :label="$t('credits.messageSupport')"
-          text
-          severity="secondary"
-          icon="pi pi-comments"
-          @click="handleMessageSupport"
-        />
+        <Button variant="muted-textonly" @click="handleFaqClick">
+          <i class="pi pi-question-circle" />
+          {{ $t('credits.faqs') }}
+        </Button>
+        <Button variant="muted-textonly" @click="handleOpenPartnerNodesInfo">
+          <i class="pi pi-question-circle" />
+          {{ $t('subscription.partnerNodesCredits') }}
+        </Button>
+        <Button variant="muted-textonly" @click="handleMessageSupport">
+          <i class="pi pi-comments" />
+          {{ $t('credits.messageSupport') }}
+        </Button>
       </div>
     </div>
   </TabPanel>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
@@ -123,6 +115,7 @@ import { computed, ref, watch } from 'vue'
 
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'

src/components/dialog/content/setting/UsageLogsTable.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import Badge from 'primevue/badge'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import Column from 'primevue/column'
 import PrimeVue from 'primevue/config'
 import DataTable from 'primevue/datatable'

src/components/dialog/content/setting/UsageLogsTable.vue

@@ -78,9 +78,12 @@
                 }
               }
             }"
-            icon="pi pi-info-circle"
-            class="p-button-text p-button-sm"
-          />
+            variant="textonly"
+            size="icon-sm"
+            :aria-label="$t('credits.additionalInfo')"
+          >
+            <i class="pi pi-info-circle" />
+          </Button>
         </template>
       </Column>
     </DataTable>
@@ -89,13 +92,13 @@
 
 <script setup lang="ts">
 import Badge from 'primevue/badge'
-import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 import type { AuditLog } from '@/services/customerEventsService'
 import {

src/components/dialog/content/setting/UserPanel.vue

@@ -44,11 +44,12 @@
                 value: $t('userSettings.updatePassword'),
                 showDelay: 300
               }"
-              icon="pi pi-pen-to-square"
-              severity="secondary"
-              text
+              variant="muted-textonly"
+              size="icon-sm"
               @click="dialogService.showUpdatePasswordDialog()"
-            />
+            >
+              <i class="pi pi-pen-to-square" />
+            </Button>
           </div>
         </div>
 
@@ -58,21 +59,18 @@
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">
-          <Button
-            class="w-32"
-            severity="secondary"
-            :label="$t('auth.signOut.signOut')"
-            icon="pi pi-sign-out"
-            @click="handleSignOut"
-          />
+          <Button class="w-32" variant="secondary" @click="handleSignOut">
+            <i class="pi pi-sign-out" />
+            {{ $t('auth.signOut.signOut') }}
+          </Button>
           <Button
             v-if="!isApiKeyLogin"
             class="w-fit"
-            variant="text"
-            severity="danger"
-            :label="$t('auth.deleteAccount.deleteAccount')"
+            variant="destructive-textonly"
             @click="handleDeleteAccount"
-          />
+          >
+            {{ $t('auth.deleteAccount.deleteAccount') }}
+          </Button>
         </div>
       </div>
 
@@ -84,24 +82,25 @@
 
         <Button
           class="w-52"
-          severity="primary"
+          variant="primary"
           :loading="loading"
-          :label="$t('auth.login.signInOrSignUp')"
-          icon="pi pi-user"
           @click="handleSignIn"
-        />
+        >
+          <i class="pi pi-user" />
+          {{ $t('auth.login.signInOrSignUp') }}
+        </Button>
       </div>
     </div>
   </TabPanel>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import TabPanel from 'primevue/tabpanel'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useDialogService } from '@/services/dialogService'
 

src/components/dialog/content/signin/ApiKeyForm.test.ts

@@ -1,7 +1,7 @@
 import { Form } from '@primevue/forms'
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
@@ -99,9 +99,10 @@ describe('ApiKeyForm', () => {
     )
     await wrapper.find('form').trigger('submit')
 
-    const submitButton = wrapper
-      .findAllComponents(Button)
-      .find((btn) => btn.text() === 'Save')
+    const buttons = wrapper.findAllComponents(Button)
+    const submitButton = buttons.find(
+      (btn) => btn.attributes('type') === 'submit'
+    )
     expect(submitButton?.props('loading')).toBe(true)
   })
 

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -67,10 +67,15 @@
       </div>
 
       <div class="mt-4 flex items-center justify-between">
-        <Button type="button" link @click="$emit('back')">
+        <Button type="button" variant="textonly" @click="$emit('back')">
           {{ t('g.back') }}
         </Button>
-        <Button type="submit" :loading="loading" :disabled="loading">
+        <Button
+          type="submit"
+          variant="primary"
+          :loading="loading"
+          :disabled="loading"
+        >
           {{ t('g.save') }}
         </Button>
       </div>
@@ -82,12 +87,12 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {
   configValueOrDefault,

src/components/dialog/content/signin/SignInForm.test.ts

@@ -1,7 +1,7 @@
 import { Form } from '@primevue/forms'
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'

src/components/dialog/content/signin/SignInForm.vue

@@ -64,10 +64,11 @@
     <Button
       v-else
       type="submit"
-      :label="t('auth.login.loginButton')"
       class="mt-4 h-10 font-medium"
       :disabled="!$form.valid"
-    />
+    >
+      {{ t('auth.login.loginButton') }}
+    </Button>
   </Form>
 </template>
 
@@ -76,7 +77,6 @@ import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useThrottleFn } from '@vueuse/core'
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -84,6 +84,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'

src/components/dialog/content/signin/SignUpForm.vue

@@ -33,10 +33,11 @@
     <Button
       v-else
       type="submit"
-      :label="t('auth.signup.signUpButton')"
       class="mt-4 h-10 font-medium"
       :disabled="!$form.valid"
-    />
+    >
+      {{ t('auth.signup.signUpButton') }}
+    </Button>
   </Form>
 </template>
 
@@ -45,12 +46,12 @@ import type { FormSubmitEvent } from '@primevue/forms'
 import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useThrottleFn } from '@vueuse/core'
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { signUpSchema } from '@/schemas/signInSchema'
 import type { SignUpData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'

src/components/graph/CanvasModeSelector.vue

@@ -1,21 +1,19 @@
 <template>
   <Button
     ref="buttonRef"
-    severity="secondary"
+    variant="secondary"
     class="group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-button-hover-surface!"
     :style="buttonStyles"
     @click="toggle"
   >
-    <template #default>
-      <div class="flex items-center gap-1 pr-0.5">
-        <div
-          class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
-        >
-          <i :class="currentModeIcon" class="block h-4 w-4" />
-        </div>
-        <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+    <div class="flex items-center gap-1 pr-0.5">
+      <div
+        class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
+      >
+        <i :class="currentModeIcon" class="block h-4 w-4" />
       </div>
-    </template>
+      <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+    </div>
   </Button>
 
   <Popover
@@ -56,10 +54,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/GraphCanvasMenu.vue

@@ -24,22 +24,18 @@
 
       <Button
         v-tooltip.top="fitViewTooltip"
-        severity="secondary"
-        icon="pi pi-expand"
+        variant="secondary"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
         class="h-8 w-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
-        <template #icon>
-          <i class="icon-[lucide--focus] h-4 w-4" />
-        </template>
+        <i class="icon-[lucide--focus] h-4 w-4" />
       </Button>
 
       <Button
         v-tooltip.top="t('zoomControls.label')"
-        severity="secondary"
-        :label="t('zoomControls.label')"
+        variant="secondary"
         :class="zoomButtonClass"
         :aria-label="t('zoomControls.label')"
         data-testid="zoom-controls-button"
@@ -56,16 +52,14 @@
 
       <Button
         v-tooltip.top="minimapTooltip"
-        severity="secondary"
+        variant="secondary"
         :aria-label="minimapTooltip"
         data-testid="toggle-minimap-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         :class="minimapButtonClass"
         @click="onMinimapToggleClick"
       >
-        <template #icon>
-          <i class="icon-[lucide--map] h-4 w-4" />
-        </template>
+        <i class="icon-[lucide--map] h-4 w-4" />
       </Button>
 
       <Button
@@ -77,27 +71,25 @@
             }
           }
         }"
-        severity="secondary"
+        variant="secondary"
         :class="linkVisibleClass"
         :aria-label="linkVisibilityAriaLabel"
         data-testid="toggle-link-visibility-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="onLinkVisibilityToggleClick"
       >
-        <template #icon>
-          <i class="icon-[lucide--route-off] h-4 w-4" />
-        </template>
+        <i class="icon-[lucide--route-off] h-4 w-4" />
       </Button>
     </ButtonGroup>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'

src/components/graph/selectionToolbox/BypassButton.vue

@@ -4,21 +4,18 @@
       value: $t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label')"
     data-testid="bypass-button"
     class="hover:bg-secondary-background"
     @click="toggleBypass"
   >
-    <template #icon>
-      <i class="icon-[lucide--redo-dot] h-4 w-4" />
-    </template>
+    <i class="icon-[lucide--redo-dot] size-4" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
 
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -6,19 +6,13 @@
         showDelay: 1000
       }"
       data-testid="color-picker-button"
-      severity="secondary"
-      text
+      variant="muted-textonly"
+      :aria-label="t('g.color')"
       @click="() => (showColorPicker = !showColorPicker)"
     >
       <div class="flex items-center gap-1 px-0">
-        <i
-          class="pi pi-circle-fill h-4 w-4"
-          :style="{ color: currentColor ?? '' }"
-        />
-        <i
-          class="pi pi-chevron-down h-4 w-4 py-1"
-          :style="{ fontSize: '0.5rem' }"
-        />
+        <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
+        <i class="icon-[lucide--chevron-down]" />
       </div>
     </Button>
     <div
@@ -48,12 +42,12 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
 import type { Raw } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import type {
   ColorOption as CanvasColorOption,
   Positionable

src/components/graph/selectionToolbox/ConfigureSubgraph.vue

@@ -4,15 +4,15 @@
       value: $t('commands.Comfy_Graph_EditSubgraphWidgets.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon="icon-[lucide--settings-2]"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Graph_EditSubgraphWidgets.label')"
     @click="handleClick"
-  />
+  >
+    <i class="icon-[lucide--settings-2]" />
+  </Button>
 </template>
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
 const rightSidePanelStore = useRightSidePanelStore()

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -5,14 +5,12 @@
       value: $t('commands.Comfy_Graph_UnpackSubgraph.label'),
       showDelay: 1000
     }"
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Graph_UnpackSubgraph.label')"
     data-testid="convert-to-subgraph-button"
-    text
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
-    <template #icon>
-      <i class="icon-[lucide--expand] h-4 w-4" />
-    </template>
+    <i class="icon-[lucide--expand] size-4" />
   </Button>
   <Button
     v-else-if="isConvertVisible"
@@ -20,21 +18,20 @@
       value: $t('commands.Comfy_Graph_ConvertToSubgraph.label'),
       showDelay: 1000
     }"
-    severity="secondary"
+    variant="muted-textonly"
+    size="icon"
+    :aria-label="$t('commands.Comfy_Graph_ConvertToSubgraph.label')"
     data-testid="convert-to-subgraph-button"
-    text
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
-    <template #icon>
-      <i class="icon-[lucide--shrink]" />
-    </template>
+    <i class="icon-[lucide--shrink] size-4" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -5,19 +5,19 @@
       value: $t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon-class="w-4 h-4"
-    icon="pi pi-trash"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Canvas_DeleteSelectedItems.label')"
     data-testid="delete-button"
     @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
-  />
+  >
+    <i class="icon-[lucide--trash-2]" />
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -4,21 +4,21 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="size-8 bg-primary-background text-white p-0"
-    text
+    variant="primary"
+    :aria-label="t('selectionToolbox.executeButton.tooltip')"
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i class="icon-[lucide--play] size-4" />
+    <i class="icon-[lucide--play]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -5,17 +5,20 @@
         st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon-class="w-4 h-4"
-    :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
+    variant="muted-textonly"
+    :aria-label="st(`commands.${normalizeI18nKey(command.id)}.label`, '')"
     @click="() => commandStore.execute(command.id)"
-  />
+  >
+    <i
+      :class="[
+        typeof command.icon === 'function' ? command.icon() : command.icon
+      ]"
+    />
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { st } from '@/i18n'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useCommandStore } from '@/stores/commandStore'

src/components/graph/selectionToolbox/FrameNodes.vue

@@ -4,18 +4,16 @@
       value: $t('g.frameNodes'),
       showDelay: 1000
     }"
-    class="frame-nodes-button"
-    text
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('g.frameNodes')"
     @click="frameNodes"
   >
-    <i class="icon-[lucide--frame] h-4 w-4" />
+    <i class="icon-[lucide--frame]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useFrameNodes } from '@/composables/graph/useFrameNodes'
 
 const { frameNodes } = useFrameNodes()

src/components/graph/selectionToolbox/InfoButton.vue

@@ -5,17 +5,16 @@
       showDelay: 1000
     }"
     data-testid="info-button"
-    text
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('g.info')"
     @click="onInfoClick"
   >
-    <i class="icon-[lucide--info] size-4" />
+    <i class="icon-[lucide--info]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 

src/components/graph/selectionToolbox/Load3DViewerButton.vue

@@ -4,17 +4,16 @@
       value: $t('commands.Comfy_3DViewer_Open3DViewer.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon="pi pi-pencil"
-    icon-class="w-4 h-4"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_3DViewer_Open3DViewer.label')"
     @click="open3DViewer"
-  />
+  >
+    <i class="icon-[lucide--pencil]" />
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
 
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -5,17 +5,16 @@
       value: $t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_MaskEditor_OpenMaskEditor.label')"
     @click="openMaskEditor"
   >
-    <i-comfy:mask class="!h-4 !w-4" />
+    <i class="icon-[comfy--mask]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/selectionToolbox/NodeOptionsButton.vue

@@ -5,18 +5,16 @@
       showDelay: 1000
     }"
     data-testid="more-options-button"
-    text
-    class="h-8 w-8 px-0"
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('g.moreOptions')"
     @click="handleClick"
   >
-    <i class="icon-[lucide--more-vertical] h-4 w-4" />
+    <i class="icon-[lucide--more-vertical]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 
 const handleClick = (event: Event) => {

src/components/graph/selectionToolbox/RefreshSelectionButton.vue

@@ -2,19 +2,19 @@
   <Button
     v-show="isRefreshable"
     v-tooltip.top="t('g.refreshNode')"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="t('g.refreshNode')"
     data-testid="refresh-button"
     @click="refreshSelected"
   >
-    <i class="icon-[lucide--refresh-cw] h-4 w-4" />
+    <i class="icon-[lucide--refresh-cw]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
 
 const { t } = useI18n()

src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue

@@ -5,20 +5,18 @@
       value: $t('commands.Comfy_PublishSubgraph.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_PublishSubgraph.label')"
     @click="() => commandStore.execute('Comfy.PublishSubgraph')"
   >
-    <template #icon>
-      <i class="icon-[lucide--book-open]" />
-    </template>
+    <i class="icon-[lucide--book-open]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'

src/components/load3d/Load3DControls.vue

@@ -7,7 +7,13 @@
     @wheel.stop
   >
     <div class="show-menu relative">
-      <Button class="p-button-rounded p-button-text" @click="toggleMenu">
+      <Button
+        variant="textonly"
+        size="icon"
+        :aria-label="$t('menu.showMenu')"
+        class="rounded-full"
+        @click="toggleMenu"
+      >
         <i class="pi pi-bars text-lg text-white" />
       </Button>
 
@@ -19,8 +25,13 @@
           <Button
             v-for="category in availableCategories"
             :key="category"
-            class="p-button-text flex w-full items-center justify-start"
-            :class="{ 'bg-smoke-600': activeCategory === category }"
+            variant="textonly"
+            :class="
+              cn(
+                'flex w-full items-center justify-start',
+                activeCategory === category && 'bg-smoke-600'
+              )
+            "
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)" />
@@ -72,7 +83,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
@@ -80,12 +90,14 @@ import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type {
   CameraConfig,
   LightConfig,
   ModelConfig,
   SceneConfig
 } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@/utils/tailwindUtil'
 
 const { isSplatModel = false, isPlyModel = false } = defineProps<{
   isSplatModel?: boolean

src/components/load3d/Load3dViewerContent.vue

@@ -72,12 +72,10 @@
 
       <div class="p-4">
         <div class="flex gap-2">
-          <Button
-            icon="pi pi-times"
-            severity="secondary"
-            :label="t('g.cancel')"
-            @click="handleCancel"
-          />
+          <Button variant="secondary" @click="handleCancel">
+            <i class="pi pi-times" />
+            {{ t('g.cancel') }}
+          </Button>
         </div>
       </div>
     </div>
@@ -85,7 +83,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/viewer/ViewerCameraControls.vue'
@@ -93,6 +90,7 @@ import ExportControls from '@/components/load3d/controls/viewer/ViewerExportCont
 import LightControls from '@/components/load3d/controls/viewer/ViewerLightControls.vue'
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import { t } from '@/i18n'

src/components/load3d/controls/AnimationControls.vue

@@ -3,7 +3,13 @@
     v-if="animations && animations.length > 0"
     class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
   >
-    <Button class="p-button-rounded p-button-text" @click="togglePlay">
+    <Button
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="$t('g.playPause')"
+      @click="togglePlay"
+    >
       <i
         :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-lg text-white']"
       />
@@ -28,9 +34,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'
 
+import Button from '@/components/ui/button/Button.vue'
+
 type Animation = { name: string; index: number }
 
 const animations = defineModel<Animation[]>('animations')

src/components/load3d/controls/CameraControls.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="flex flex-col">
-    <Button class="p-button-rounded p-button-text" @click="switchCamera">
-      <i
-        v-tooltip.right="{
-          value: $t('load3d.switchCamera'),
-          showDelay: 300
-        }"
-        :class="['pi', 'pi-camera', 'text-lg text-white']"
-      />
+    <Button
+      v-tooltip.right="{
+        value: $t('load3d.switchCamera'),
+        showDelay: 300
+      }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="$t('load3d.switchCamera')"
+      @click="switchCamera"
+    >
+      <i :class="['pi', 'pi-camera', 'text-lg text-white']" />
     </Button>
     <PopupSlider
       v-if="showFOVButton"
@@ -18,10 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
 
 const cameraType = defineModel<CameraType>('cameraType')

src/components/load3d/controls/ExportControls.vue

@@ -2,16 +2,17 @@
   <div class="flex flex-col">
     <div class="show-export-formats relative">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.exportModel'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.exportModel')"
         @click="toggleExportFormats"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.exportModel'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-lg text-white"
-        />
+        <i class="pi pi-download text-lg text-white" />
       </Button>
       <div
         v-show="showExportFormats"
@@ -21,7 +22,8 @@
           <Button
             v-for="format in exportFormats"
             :key="format.value"
-            class="p-button-text text-white"
+            variant="textonly"
+            class="text-white"
             @click="exportModel(format.value)"
           >
             {{ format.label }}
@@ -33,9 +35,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()
@@ -48,17 +51,17 @@ const exportFormats = [
   { label: 'STL', value: 'stl' }
 ]
 
-const toggleExportFormats = () => {
+function toggleExportFormats() {
   showExportFormats.value = !showExportFormats.value
 }
 
-const exportModel = (format: string) => {
+function exportModel(format: string) {
   emit('exportModel', format)
 
   showExportFormats.value = false
 }
 
-const closeExportFormatsList = (e: MouseEvent) => {
+function closeExportFormatsList(e: MouseEvent) {
   const target = e.target as HTMLElement
 
   if (!target.closest('.show-export-formats')) {

src/components/load3d/controls/LightControls.vue

@@ -2,16 +2,17 @@
   <div class="flex flex-col">
     <div v-if="showLightIntensityButton" class="show-light-intensity relative">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.lightIntensity'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.lightIntensity')"
         @click="toggleLightIntensity"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.lightIntensity'),
-            showDelay: 300
-          }"
-          class="pi pi-sun text-lg text-white"
-        />
+        <i class="pi pi-sun text-lg text-white" />
       </Button>
       <div
         v-show="showLightIntensity"
@@ -31,10 +32,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type { MaterialMode } from '@/extensions/core/load3d/interfaces'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
@@ -56,11 +57,11 @@ const lightAdjustmentIncrement = useSettingStore().get(
   'Comfy.Load3D.LightAdjustmentIncrement'
 )
 
-const toggleLightIntensity = () => {
+function toggleLightIntensity() {
   showLightIntensity.value = !showLightIntensity.value
 }
 
-const closeLightSlider = (e: MouseEvent) => {
+function closeLightSlider(e: MouseEvent) {
   const target = e.target as HTMLElement
 
   if (!target.closest('.show-light-intensity')) {

src/components/load3d/controls/ModelControls.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="flex flex-col">
     <div class="show-up-direction relative">
-      <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.upDirection'),
-            showDelay: 300
-          }"
-          class="pi pi-arrow-up text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.upDirection'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.upDirection')"
+        @click="toggleUpDirection"
+      >
+        <i class="pi pi-arrow-up text-lg text-white" />
       </Button>
       <div
         v-show="showUpDirection"
@@ -18,8 +22,10 @@
           <Button
             v-for="direction in upDirections"
             :key="direction"
-            class="p-button-text text-white"
-            :class="{ 'bg-blue-500': upDirection === direction }"
+            variant="textonly"
+            :class="
+              cn('text-white', upDirection === direction && 'bg-blue-500')
+            "
             @click="selectUpDirection(direction)"
           >
             {{ direction.toUpperCase() }}
@@ -30,16 +36,17 @@
 
     <div v-if="!hideMaterialMode" class="show-material-mode relative">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: t('load3d.materialMode'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.materialMode')"
         @click="toggleMaterialMode"
       >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.materialMode'),
-            showDelay: 300
-          }"
-          class="pi pi-box text-lg text-white"
-        />
+        <i class="pi pi-box text-lg text-white" />
       </Button>
       <div
         v-show="showMaterialMode"
@@ -49,8 +56,13 @@
           <Button
             v-for="mode in materialModes"
             :key="mode"
-            class="p-button-text whitespace-nowrap text-white"
-            :class="{ 'bg-blue-500': materialMode === mode }"
+            variant="textonly"
+            :class="
+              cn(
+                'whitespace-nowrap text-white',
+                materialMode === mode && 'bg-blue-500'
+              )
+            "
             @click="selectMaterialMode(mode)"
           >
             {{ formatMaterialMode(mode) }}
@@ -62,14 +74,15 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import { cn } from '@/utils/tailwindUtil'
 
 const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
   hideMaterialMode?: boolean
@@ -108,31 +121,31 @@ const materialModes = computed(() => {
   return modes
 })
 
-const toggleUpDirection = () => {
+function toggleUpDirection() {
   showUpDirection.value = !showUpDirection.value
   showMaterialMode.value = false
 }
 
-const selectUpDirection = (direction: UpDirection) => {
+function selectUpDirection(direction: UpDirection) {
   upDirection.value = direction
   showUpDirection.value = false
 }
 
-const toggleMaterialMode = () => {
+function toggleMaterialMode() {
   showMaterialMode.value = !showMaterialMode.value
   showUpDirection.value = false
 }
 
-const selectMaterialMode = (mode: MaterialMode) => {
+function selectMaterialMode(mode: MaterialMode) {
   materialMode.value = mode
   showMaterialMode.value = false
 }
 
-const formatMaterialMode = (mode: MaterialMode) => {
+function formatMaterialMode(mode: MaterialMode) {
   return t(`load3d.materialModes.${mode}`)
 }
 
-const closeSceneSlider = (e: MouseEvent) => {
+function closeSceneSlider(e: MouseEvent) {
   const target = e.target as HTMLElement
 
   if (!target.closest('.show-up-direction')) {

src/components/load3d/controls/PopupSlider.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="relative show-slider">
-    <Button class="p-button-rounded p-button-text" @click="toggleSlider">
-      <i
-        v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
-        :class="['pi', icon, 'text-lg text-white']"
-      />
+    <Button
+      v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="tooltipText"
+      @click="toggleSlider"
+    >
+      <i :class="['pi', icon, 'text-lg text-white']" />
     </Button>
     <div
       v-show="showSlider"
@@ -22,10 +26,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const {
   icon = 'pi-expand',
   min = 10,

src/components/load3d/controls/RecordingControls.vue

@@ -2,20 +2,26 @@
   <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
       <Button
-        class="p-button-rounded p-button-text"
-        :class="{
-          'p-button-danger': isRecording,
-          'recording-button-blink': isRecording
+        v-tooltip.right="{
+          value: isRecording
+            ? $t('load3d.stopRecording')
+            : $t('load3d.startRecording'),
+          showDelay: 300
         }"
+        size="icon"
+        variant="textonly"
+        :class="
+          cn(
+            'rounded-full',
+            isRecording && 'text-red-500 recording-button-blink'
+          )
+        "
+        :aria-label="
+          isRecording ? $t('load3d.stopRecording') : $t('load3d.startRecording')
+        "
         @click="toggleRecording"
       >
         <i
-          v-tooltip.right="{
-            value: isRecording
-              ? $t('load3d.stopRecording')
-              : $t('load3d.startRecording'),
-            showDelay: 300
-          }"
           :class="[
             'pi',
             isRecording ? 'pi-circle-fill' : 'pi-video',
@@ -26,30 +32,32 @@
 
       <Button
         v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.exportRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.exportRecording')"
         @click="handleExportRecording"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.exportRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-lg text-white"
-        />
+        <i class="pi pi-download text-lg text-white" />
       </Button>
 
       <Button
         v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.clearRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.clearRecording')"
         @click="handleClearRecording"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.clearRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-trash text-lg text-white"
-        />
+        <i class="pi pi-trash text-lg text-white" />
       </Button>
 
       <div
@@ -63,7 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
 
 const hasRecording = defineModel<boolean>('hasRecording')
 const isRecording = defineModel<boolean>('isRecording')
@@ -76,7 +85,7 @@ const emit = defineEmits<{
   (e: 'clearRecording'): void
 }>()
 
-const toggleRecording = () => {
+function toggleRecording() {
   if (isRecording.value) {
     emit('stopRecording')
   } else {
@@ -84,15 +93,15 @@ const toggleRecording = () => {
   }
 }
 
-const handleExportRecording = () => {
+function handleExportRecording() {
   emit('exportRecording')
 }
 
-const handleClearRecording = () => {
+function handleClearRecording() {
   emit('clearRecording')
 }
 
-const formatDuration = (seconds: number): string => {
+function formatDuration(seconds: number): string {
   const minutes = Math.floor(seconds / 60)
   const remainingSeconds = Math.floor(seconds % 60)
   return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`

src/components/load3d/controls/SceneControls.vue

@@ -1,25 +1,29 @@
 <template>
   <div class="flex flex-col">
     <Button
-      class="p-button-rounded p-button-text"
-      :class="{ 'p-button-outlined': showGrid }"
+      v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
+      variant="textonly"
+      size="icon"
+      :class="cn('rounded-full', showGrid && 'ring-2 ring-white/50')"
+      :aria-label="$t('load3d.showGrid')"
       @click="toggleGrid"
     >
-      <i
-        v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
-        class="pi pi-table text-lg text-white"
-      />
+      <i class="pi pi-table text-lg text-white" />
     </Button>
 
     <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openColorPicker">
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.backgroundColor'),
-            showDelay: 300
-          }"
-          class="pi pi-palette text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.backgroundColor'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.backgroundColor')"
+        @click="openColorPicker"
+      >
+        <i class="pi pi-palette text-lg text-white" />
         <input
           ref="colorPickerRef"
           type="color"
@@ -33,14 +37,18 @@
     </div>
 
     <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openImagePicker">
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.uploadBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-image text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.uploadBackgroundImage'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.uploadBackgroundImage')"
+        @click="openImagePicker"
+      >
+        <i class="pi pi-image text-lg text-white" />
         <input
           ref="imagePickerRef"
           type="file"
@@ -53,17 +61,22 @@
 
     <div v-if="hasBackgroundImage">
       <Button
-        class="p-button-rounded p-button-text"
-        :class="{ 'p-button-outlined': backgroundRenderMode === 'panorama' }"
+        v-tooltip.right="{
+          value: $t('load3d.panoramaMode'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        :class="
+          cn(
+            'rounded-full',
+            backgroundRenderMode === 'panorama' && 'ring-2 ring-white/50'
+          )
+        "
+        :aria-label="$t('load3d.panoramaMode')"
         @click="toggleBackgroundRenderMode"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.panoramaMode'),
-            showDelay: 300
-          }"
-          class="pi pi-globe text-lg text-white"
-        />
+        <i class="pi pi-globe text-lg text-white" />
       </Button>
     </div>
 
@@ -75,27 +88,29 @@
 
     <div v-if="hasBackgroundImage">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.removeBackgroundImage'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.removeBackgroundImage')"
         @click="removeBackgroundImage"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.removeBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-times text-lg text-white"
-        />
+        <i class="pi pi-times text-lg text-white" />
       </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 
 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@/utils/tailwindUtil'
 
 const emit = defineEmits<{
   (e: 'updateBackgroundImage', file: File | null): void

src/components/load3d/controls/ViewerControls.vue

@@ -1,23 +1,26 @@
 <template>
   <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
-      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.openIn3DViewer'),
-            showDelay: 300
-          }"
-          class="pi pi-expand text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.openIn3DViewer'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.openIn3DViewer')"
+        @click="openIn3DViewer"
+      >
+        <i class="pi pi-expand text-lg text-white" />
       </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'

src/components/load3d/controls/viewer/ViewerExportControls.vue

@@ -9,9 +9,8 @@
     </Select>
 
     <Button
-      severity="secondary"
-      text
-      rounded
+      variant="muted-textonly"
+      class="rounded-full"
       @click="exportModel(exportFormat)"
     >
       {{ $t('load3d.export') }}
@@ -20,10 +19,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -15,13 +15,10 @@
     </div>
 
     <div v-if="!hasBackgroundImage && !disableBackgroundUpload">
-      <Button
-        severity="secondary"
-        :label="$t('load3d.uploadBackgroundImage')"
-        icon="pi pi-image"
-        class="w-full"
-        @click="openImagePicker"
-      />
+      <Button variant="secondary" class="w-full" @click="openImagePicker">
+        <i class="pi pi-image" />
+        {{ $t('load3d.uploadBackgroundImage') }}
+      </Button>
       <input
         ref="imagePickerRef"
         type="file"
@@ -34,38 +31,38 @@
     <div v-if="hasBackgroundImage" class="space-y-2">
       <div class="flex gap-2">
         <Button
-          :severity="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
-          :label="$t('load3d.tiledMode')"
-          icon="pi pi-th-large"
+          :variant="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
           class="flex-1"
           @click="setBackgroundRenderMode('tiled')"
-        />
+        >
+          <i class="pi pi-th-large" />
+          {{ $t('load3d.tiledMode') }}
+        </Button>
         <Button
-          :severity="
+          :variant="
             backgroundRenderMode === 'panorama' ? 'primary' : 'secondary'
           "
-          :label="$t('load3d.panoramaMode')"
-          icon="pi pi-globe"
           class="flex-1"
           @click="setBackgroundRenderMode('panorama')"
-        />
+        >
+          <i class="pi pi-globe" />
+          {{ $t('load3d.panoramaMode') }}
+        </Button>
       </div>
-      <Button
-        severity="secondary"
-        :label="$t('load3d.removeBackgroundImage')"
-        icon="pi pi-times"
-        class="w-full"
-        @click="removeBackgroundImage"
-      />
+      <Button variant="secondary" class="w-full" @click="removeBackgroundImage">
+        <i class="pi pi-times" />
+        {{ $t('load3d.removeBackgroundImage') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const backgroundColor = defineModel<string>('backgroundColor')
 const showGrid = defineModel<boolean>('showGrid')
 const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(

src/components/maskeditor/dialog/TopBarHeader.vue

@@ -46,28 +46,22 @@
     </div>
 
     <div class="flex gap-3">
-      <Button
-        :label="saveButtonText"
-        icon="pi pi-check"
-        size="small"
-        :disabled="!saveEnabled"
-        @click="handleSave"
-      />
-      <Button
-        :label="t('g.cancel')"
-        icon="pi pi-times"
-        size="small"
-        severity="secondary"
-        @click="handleCancel"
-      />
+      <Button variant="primary" :disabled="!saveEnabled" @click="handleSave">
+        <i class="pi pi-check" />
+        {{ saveButtonText }}
+      </Button>
+      <Button variant="secondary" @click="handleCancel">
+        <i class="pi pi-times" />
+        {{ t('g.cancel') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
 import { useMaskEditorSaver } from '@/composables/maskeditor/useMaskEditorSaver'
 import { t } from '@/i18n'

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { watchDebounced } from '@vueuse/core'
-import Button from 'primevue/button'
 import {
   computed,
   customRef,
@@ -10,6 +9,7 @@ import {
   triggerRef
 } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import {
   demoteWidget,
   isRecommendedWidget,
@@ -315,7 +315,7 @@ onBeforeUnmount(() => {
         class="flex justify-center border-t border-interface-stroke py-4"
       >
         <Button
-          size="small"
+          size="sm"
           class="rounded border-none px-3 py-0.5"
           @click.stop="showRecommended"
         >

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 import type { ClassValue } from '@/utils/tailwindUtil'
 
@@ -43,13 +42,13 @@ function getIcon() {
       <div class="text-sm line-clamp-1 leading-8">{{ widgetName }}</div>
     </div>
     <Button
-      size="small"
-      text
-      :icon="getIcon()"
+      variant="muted-textonly"
+      size="sm"
       :disabled="isPhysical"
-      severity="secondary"
       @click.stop="$emit('toggleVisibility')"
-    />
+    >
+      <i :class="getIcon()" />
+    </Button>
     <div
       v-if="isDraggable"
       class="size-4 pointer-events-none icon-[lucide--grip-vertical]"

src/components/searchbox/NodeSearchBox.vue

@@ -14,11 +14,13 @@
     </div>
 
     <Button
-      icon="pi pi-filter"
-      severity="secondary"
+      variant="secondary"
+      :aria-label="$t('g.addNodeFilterCondition')"
       class="filter-button z-10"
       @click="nodeSearchFilterVisible = true"
-    />
+    >
+      <i class="pi pi-filter" />
+    </Button>
     <Dialog
       v-model:visible="nodeSearchFilterVisible"
       class="min-w-96"
@@ -79,7 +81,6 @@
 
 <script setup lang="ts">
 import { debounce } from 'es-toolkit/compat'
-import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -88,6 +89,7 @@ import NodePreview from '@/components/node/NodePreview.vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'

src/components/searchbox/NodeSearchFilter.vue

@@ -17,16 +17,16 @@
     />
   </div>
   <div class="_footer">
-    <Button type="button" :label="$t('g.add')" @click="submit" />
+    <Button type="button" @click="submit">{{ $t('g.add') }}</Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'

src/components/sidebar/SidebarBottomPanelToggleButton.vue

@@ -1,14 +1,11 @@
 <template>
   <SidebarIcon
+    icon="icon-[ph--terminal-bold]"
     :label="$t('sideToolbar.labels.console')"
     :tooltip="$t('menu.toggleBottomPanel')"
     :selected="bottomPanelStore.activePanel == 'terminal'"
     @click="toggleConsole"
-  >
-    <template #icon>
-      <i-ph:terminal-bold />
-    </template>
-  </SidebarIcon>
+  />
 </template>
 
 <script setup lang="ts">

src/components/sidebar/SidebarIcon.test.ts

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils'
-import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import OverlayBadge from 'primevue/overlaybadge'
 import Tooltip from 'primevue/tooltip'
@@ -35,22 +34,21 @@ describe('SidebarIcon', () => {
       global: {
         plugins: [PrimeVue, i18n],
         directives: { tooltip: Tooltip },
-        components: { OverlayBadge, Button }
+        components: { OverlayBadge }
       },
       props: { ...exampleProps, ...props },
       ...options
     })
   }
 
-  it('renders label', () => {
+  it('renders button element', () => {
     const wrapper = mountSidebarIcon({})
-    expect(wrapper.find('.p-button.p-component').exists()).toBe(true)
-    expect(wrapper.find('.p-button-label').exists()).toBe(true)
+    expect(wrapper.find('button.side-bar-button').exists()).toBe(true)
   })
 
   it('renders icon', () => {
     const wrapper = mountSidebarIcon({})
-    expect(wrapper.find('.p-button-icon-only').exists()).toBe(true)
+    expect(wrapper.find('.side-bar-button-icon').exists()).toBe(true)
   })
 
   it('creates badge when iconBadge prop is set', () => {

src/components/sidebar/SidebarIcon.vue

@@ -5,52 +5,51 @@
       showDelay: 300,
       hideDelay: 300
     }"
-    text
-    :pt="{
-      root: {
-        class: `side-bar-button p-button-secondary ${
-          selected ? 'side-bar-button-selected' : ''
-        }`,
-        'aria-label': computedTooltip
-      }
-    }"
+    :class="
+      cn(
+        'side-bar-button cursor-pointer border-none',
+        selected && 'side-bar-button-selected'
+      )
+    "
+    variant="muted-textonly"
+    :aria-label="computedTooltip"
     @click="emit('click', $event)"
   >
-    <template #icon>
-      <div class="side-bar-button-content">
-        <slot name="icon">
-          <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
-            <i
-              v-if="typeof icon === 'string'"
-              :class="icon + ' side-bar-button-icon'"
-            />
-            <component :is="icon" v-else class="side-bar-button-icon" />
-          </OverlayBadge>
+    <div class="side-bar-button-content">
+      <slot name="icon">
+        <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
           <i
-            v-else-if="typeof icon === 'string'"
+            v-if="typeof icon === 'string'"
             :class="icon + ' side-bar-button-icon'"
           />
-          <component
-            :is="icon"
-            v-else-if="typeof icon === 'object'"
-            class="side-bar-button-icon"
-          />
-        </slot>
-        <span v-if="label && !isSmall" class="side-bar-button-label">{{
-          t(label)
-        }}</span>
-      </div>
-    </template>
+          <component :is="icon" v-else class="side-bar-button-icon" />
+        </OverlayBadge>
+        <i
+          v-else-if="typeof icon === 'string'"
+          :class="icon + ' side-bar-button-icon'"
+        />
+        <component
+          :is="icon"
+          v-else-if="typeof icon === 'object'"
+          class="side-bar-button-icon"
+        />
+      </slot>
+      <span v-if="label && !isSmall" class="side-bar-button-label">{{
+        t(label)
+      }}</span>
+    </div>
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
 import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
 const { t } = useI18n()
 const {
   icon = '',

src/components/sidebar/SidebarSettingsButton.vue

@@ -1,13 +1,10 @@
 <template>
   <SidebarIcon
+    icon="icon-[lucide--settings]"
     :label="$t('g.settings')"
     :tooltip="tooltipText"
     @click="showSettingsDialog"
-  >
-    <template #icon>
-      <i class="icon-[lucide--settings]" />
-    </template>
-  </SidebarIcon>
+  />
 </template>
 
 <script setup lang="ts">

src/components/sidebar/SidebarShortcutsToggleButton.vue

@@ -1,14 +1,11 @@
 <template>
   <SidebarIcon
+    icon="icon-[lucide--keyboard]"
     :label="$t('shortcuts.shortcuts')"
     :tooltip="tooltipText"
     :selected="isShortcutsPanelVisible"
     @click="toggleShortcutsPanel"
-  >
-    <template #icon>
-      <i class="icon-[lucide--keyboard]" />
-    </template>
-  </SidebarIcon>
+  />
 </template>
 
 <script setup lang="ts">

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -3,18 +3,22 @@
     <template #tool-buttons>
       <Button
         v-tooltip.bottom="$t('g.refresh')"
-        icon="pi pi-refresh"
-        severity="secondary"
-        text
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('g.refresh')"
         @click="modelStore.loadModelFolders"
-      />
+      >
+        <i class="icon-[lucide--refresh-cw] size-4" />
+      </Button>
       <Button
         v-tooltip.bottom="$t('g.loadAllFolders')"
-        icon="pi pi-cloud-download"
-        severity="secondary"
-        text
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('g.loadAllFolders')"
         @click="modelStore.loadModels"
-      />
+      >
+        <i class="icon-[lucide--cloud-download] size-4" />
+      </Button>
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
@@ -46,7 +50,6 @@
 
 <script setup lang="ts">
 import { Divider } from 'primevue'
-import Button from 'primevue/button'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
@@ -54,6 +57,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useLitegraphService } from '@/services/litegraphService'

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -8,53 +8,63 @@
         <Button
           v-tooltip.bottom="$t('g.newFolder')"
           class="new-folder-button"
-          icon="pi pi-folder-plus"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon"
+          :aria-label="$t('g.newFolder')"
           @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
-        />
+        >
+          <i class="icon-[lucide--folder-plus] size-4" />
+        </Button>
         <Button
           v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
-          :icon="selectedGroupingIcon"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon"
+          :aria-label="$t('sideToolbar.nodeLibraryTab.groupBy')"
           @click="groupingPopover?.toggle($event)"
-        />
+        >
+          <i :class="[selectedGroupingIcon, 'size-4']" />
+        </Button>
         <Button
           v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
-          :icon="selectedSortingIcon"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon"
+          :aria-label="$t('sideToolbar.nodeLibraryTab.sortMode')"
           @click="sortingPopover?.toggle($event)"
-        />
+        >
+          <i :class="[selectedSortingIcon, 'size-4']" />
+        </Button>
         <Button
           v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
-          icon="pi pi-filter-slash"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon"
+          :aria-label="$t('sideToolbar.nodeLibraryTab.resetView')"
           @click="resetOrganization"
-        />
+        >
+          <i class="icon-[lucide--filter-x] size-4" />
+        </Button>
         <Button
           v-tooltip.bottom="$t('menu.refresh')"
-          icon="pi pi-refresh"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon"
+          :aria-label="$t('menu.refresh')"
           @click="() => commandStore.execute('Comfy.RefreshNodeDefinitions')"
-        />
+        >
+          <i class="icon-[lucide--refresh-cw] size-4" />
+        </Button>
         <Popover ref="groupingPopover">
           <div class="flex flex-col gap-1 p-2">
             <Button
               v-for="option in groupingOptions"
               :key="option.id"
-              :icon="option.icon"
-              :label="$t(option.label)"
-              text
-              :severity="
-                selectedGroupingId === option.id ? 'primary' : 'secondary'
+              :variant="
+                selectedGroupingId === option.id ? 'primary' : 'textonly'
               "
               class="justify-start"
               @click="selectGrouping(option.id)"
-            />
+            >
+              <i :class="[option.icon, 'size-4']" />
+              {{ $t(option.label) }}
+            </Button>
           </div>
         </Popover>
         <Popover ref="sortingPopover">
@@ -62,15 +72,15 @@
             <Button
               v-for="option in sortingOptions"
               :key="option.id"
-              :icon="option.icon"
-              :label="$t(option.label)"
-              text
-              :severity="
-                selectedSortingId === option.id ? 'primary' : 'secondary'
+              :variant="
+                selectedSortingId === option.id ? 'primary' : 'textonly'
               "
               class="justify-start"
               @click="selectSorting(option.id)"
-            />
+            >
+              <i :class="[option.icon, 'size-4']" />
+              {{ $t(option.label) }}
+            </Button>
           </div>
         </Popover>
       </template>
@@ -126,7 +136,6 @@
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
 import type { Ref } from 'vue'
@@ -140,6 +149,7 @@ import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import NodeHelpPage from '@/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import {

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -6,11 +6,13 @@
     <template #tool-buttons>
       <Button
         v-tooltip.bottom="$t('g.refresh')"
-        icon="pi pi-refresh"
-        severity="secondary"
-        text
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('g.refresh')"
         @click="workflowStore.syncWorkflows()"
-      />
+      >
+        <i class="icon-[lucide--refresh-cw] size-4" />
+      </Button>
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
@@ -52,16 +54,17 @@
                 <template #actions="{ node: treeNode }">
                   <Button
                     class="close-workflow-button"
-                    icon="pi pi-times"
-                    text
-                    :severity="
-                      workspaceStore.shiftDown ? 'danger' : 'secondary'
+                    :variant="
+                      workspaceStore.shiftDown ? 'destructive' : 'textonly'
                     "
-                    size="small"
+                    size="icon-sm"
+                    :aria-label="$t('g.close')"
                     @click.stop="
                       handleCloseWorkflow(treeNode.data as ComfyWorkflow)
                     "
-                  />
+                  >
+                    <i class="icon-[lucide--x] size-3" />
+                  </Button>
                 </template>
               </TreeExplorerTreeNode>
             </template>
@@ -131,7 +134,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ConfirmDialog from 'primevue/confirmdialog'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -143,6 +145,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'

src/components/sidebar/tabs/modelLibrary/DownloadItem.vue

@@ -30,43 +30,48 @@
       <Button
         v-if="download.status === 'in_progress'"
         v-tooltip.top="t('electronFileDownload.pause')"
-        class="file-action-button h-[22px] w-[22px]"
-        size="small"
-        rounded
-        icon="pi pi-pause"
+        class="size-[22px] rounded-full"
+        variant="secondary"
+        size="icon-sm"
+        :aria-label="t('electronFileDownload.pause')"
         @click="triggerPauseDownload"
-      />
+      >
+        <i class="icon-[lucide--pause] size-3" />
+      </Button>
 
       <Button
         v-if="download.status === 'paused'"
         v-tooltip.top="t('electronFileDownload.resume')"
-        class="file-action-button h-[22px] w-[22px]"
-        size="small"
-        rounded
-        icon="pi pi-play"
+        class="size-[22px] rounded-full"
+        variant="secondary"
+        size="icon-sm"
+        :aria-label="t('electronFileDownload.resume')"
         @click="triggerResumeDownload"
-      />
+      >
+        <i class="icon-[lucide--play] size-3" />
+      </Button>
 
       <Button
         v-if="['in_progress', 'paused'].includes(download.status ?? '')"
         v-tooltip.top="t('electronFileDownload.cancel')"
-        class="file-action-button p-red h-[22px] w-[22px]"
-        size="small"
-        rounded
-        severity="danger"
-        icon="pi pi-times-circle"
+        class="size-[22px] rounded-full"
+        variant="destructive"
+        size="icon-sm"
+        :aria-label="t('electronFileDownload.cancel')"
         @click="triggerCancelDownload"
-      />
+      >
+        <i class="icon-[lucide--x-circle] size-3" />
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Chip from 'primevue/chip'
 import ProgressBar from 'primevue/progressbar'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { ElectronDownload } from '@/stores/electronDownloadStore'
 

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -5,11 +5,13 @@
     >
       <Button
         v-tooltip.bottom="$t('g.back')"
-        icon="pi pi-arrow-left"
-        text
-        severity="secondary"
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('g.back')"
         @click="$emit('close')"
-      />
+      >
+        <i class="icon-[lucide--arrow-left] size-4" />
+      </Button>
       <span class="ml-2 font-semibold">{{ node.display_name }}</span>
     </div>
     <div class="grow p-4">
@@ -20,10 +22,10 @@
 
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -18,42 +18,49 @@
         #actions
       >
         <Button
-          size="small"
-          icon="pi pi-trash"
-          text
-          severity="danger"
+          variant="destructive"
+          size="icon-sm"
+          :aria-label="$t('g.delete')"
           @click.stop="deleteBlueprint"
         >
+          <i class="icon-[lucide--trash-2] size-3.5" />
         </Button>
         <Button
-          size="small"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon-sm"
+          :aria-label="$t('g.edit')"
           @click.stop="editBlueprint"
         >
-          <template #icon>
-            <i class="icon-[lucide--square-pen]" />
-          </template>
+          <i class="icon-[lucide--square-pen] size-3.5" />
         </Button>
       </template>
       <template v-else #actions>
         <Button
           class="bookmark-button"
-          size="small"
-          :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon-sm"
+          :aria-label="$t('icon.bookmark')"
           @click.stop="toggleBookmark"
-        />
+        >
+          <i
+            :class="
+              cn(
+                isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
+                'size-3.5'
+              )
+            "
+          />
+        </Button>
         <Button
           v-tooltip.bottom="$t('g.learnMore')"
           class="help-button"
-          size="small"
-          icon="pi pi-question"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon-sm"
+          :aria-label="$t('g.learnMore')"
           @click.stop="props.openNodeHelp(nodeDef)"
-        />
+        >
+          <i class="pi pi-question size-3.5" />
+        </Button>
       </template>
     </TreeExplorerTreeNode>
 
@@ -67,7 +74,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
@@ -77,11 +83,13 @@ import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
 

src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue

@@ -2,21 +2,27 @@
   <TreeExplorerTreeNode :node="node">
     <template #actions>
       <Button
-        :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
-        text
-        severity="secondary"
-        size="small"
+        variant="muted-textonly"
+        size="icon-sm"
+        :aria-label="$t('icon.bookmark')"
         @click.stop="handleBookmarkClick"
-      />
+      >
+        <i
+          :class="[
+            isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
+            'size-3.5'
+          ]"
+        />
+      </Button>
     </template>
   </TreeExplorerTreeNode>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowBookmarkStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'

src/components/toast/RerouteMigrationToast.vue

@@ -5,13 +5,9 @@
         <div class="my-4 text-lg font-medium">
           {{ t('toastMessages.migrateToLitegraphReroute') }}
         </div>
-        <Button
-          class="self-end"
-          size="small"
-          :label="t('g.migrate')"
-          severity="warn"
-          @click="migrateToLitegraphReroute"
-        />
+        <Button class="self-end" size="sm" @click="migrateToLitegraphReroute">
+          {{ t('g.migrate') }}
+        </Button>
       </div>
     </template>
   </Toast>
@@ -19,10 +15,10 @@
 
 <script setup lang="ts">
 import { useToast } from 'primevue'
-import Button from 'primevue/button'
 import Toast from 'primevue/toast'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { WorkflowJSON04 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { app } from '@/scripts/app'

src/components/topbar/ActionBarButtons.vue

@@ -4,26 +4,23 @@
       v-for="(button, index) in actionBarButtonStore.buttons"
       :key="index"
       v-tooltip.bottom="button.tooltip"
-      :label="isMobile ? undefined : button.label"
       :aria-label="button.tooltip || button.label"
       :class="button.class"
-      text
-      rounded
-      severity="secondary"
-      class="h-7"
+      variant="muted-textonly"
+      size="sm"
+      class="h-7 rounded-full"
       @click="button.onClick"
     >
-      <template #icon>
-        <i :class="button.icon" />
-      </template>
+      <i :class="button.icon" />
+      <span v-if="!isMobile && button.label">{{ button.label }}</span>
     </Button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import Button from 'primevue/button'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
 
 const actionBarButtonStore = useActionBarButtonStore()

src/components/topbar/CurrentUserButton.test.ts

@@ -1,6 +1,6 @@
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 import { createI18n } from 'vue-i18n'

src/components/topbar/CurrentUserButton.vue

@@ -3,9 +3,8 @@
   <div>
     <Button
       v-if="isLoggedIn"
-      class="user-profile-button p-1 hover:bg-transparent"
-      severity="secondary"
-      text
+      class="p-1 hover:bg-transparent"
+      variant="muted-textonly"
       :aria-label="$t('g.currentUser')"
       @click="popover?.toggle($event)"
     >
@@ -14,7 +13,7 @@
       >
         <UserAvatar :photo-url="photoURL" />
 
-        <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.6rem' }" />
+        <i class="icon-[lucide--chevron-down] size-3 px-1" />
       </div>
     </Button>
 
@@ -33,11 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 
 import CurrentUserPopover from './CurrentUserPopover.vue'

src/components/topbar/CurrentUserPopover.vue

@@ -46,20 +46,21 @@
         class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
       />
       <Button
-        :label="$t('subscription.addCredits')"
-        severity="secondary"
-        size="small"
+        variant="secondary"
+        size="sm"
         class="text-base-foreground"
         data-testid="add-credits-button"
         @click="handleTopUp"
-      />
+      >
+        {{ $t('subscription.addCredits') }}
+      </Button>
     </div>
 
     <div v-else class="flex justify-center px-4">
       <SubscribeButton
         :fluid="false"
         :label="$t('subscription.subscribeToComfyCloud')"
-        size="small"
+        size="sm"
         variant="gradient"
         @subscribed="handleSubscribed"
       />
@@ -135,7 +136,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted } from 'vue'
@@ -143,6 +143,7 @@ import { useI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'

src/components/topbar/LoginButton.vue

@@ -1,17 +1,15 @@
 <template>
   <Button
     v-if="!isLoggedIn"
-    outlined
-    rounded
-    severity="secondary"
-    class="size-8 bg-secondary-background text-base-foreground hover:bg-secondary-background-hover"
+    variant="secondary"
+    size="icon"
+    class="rounded-full bg-secondary-background text-base-foreground hover:bg-secondary-background-hover"
+    :aria-label="t('g.login')"
     @click="handleSignIn()"
     @mouseenter="showPopover"
     @mouseleave="hidePopover"
   >
-    <template #icon>
-      <i class="icon-[lucide--user] size-4" />
-    </template>
+    <i class="icon-[lucide--user] size-4" />
   </Button>
   <Popover
     ref="popoverRef"
@@ -32,10 +30,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { t } from '@/i18n'

src/components/topbar/WorkflowOverflowMenu.vue

@@ -2,13 +2,14 @@
   <div>
     <Button
       v-tooltip="{ value: $t('g.moreWorkflows'), showDelay: 300 }"
-      class="rounded-none"
-      icon="pi pi-ellipsis-h"
-      text
-      severity="secondary"
+      class="rounded-none h-full w-auto aspect-square"
+      variant="muted-textonly"
+      size="icon"
       :aria-label="$t('g.moreWorkflows')"
       @click="menu?.toggle($event)"
-    />
+    >
+      <i class="pi pi-ellipsis-h" />
+    </Button>
     <Menu
       ref="menu"
       :model="menuItems"
@@ -19,10 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Menu from 'primevue/menu'
 import { computed, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 

src/components/topbar/WorkflowTab.vue

@@ -18,12 +18,13 @@
       >
       <Button
         class="close-button invisible w-auto p-0"
-        icon="pi pi-times"
-        text
-        severity="secondary"
-        size="small"
+        variant="muted-textonly"
+        size="icon-sm"
+        :aria-label="t('g.close')"
         @click.stop="onCloseWorkflow(workflowOption)"
-      />
+      >
+        <i class="pi pi-times" />
+      </Button>
     </div>
   </div>
 
@@ -36,10 +37,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import {
   usePragmaticDraggable,
   usePragmaticDroppable

src/components/topbar/WorkflowTabs.vue

@@ -6,13 +6,15 @@
   >
     <Button
       v-if="showOverflowArrows"
-      icon="pi pi-chevron-left"
-      text
-      severity="secondary"
-      class="overflow-arrow overflow-arrow-left"
+      variant="muted-textonly"
+      size="icon"
+      class="overflow-arrow overflow-arrow-left h-full w-auto aspect-square"
+      :aria-label="$t('g.scrollLeft')"
       :disabled="!leftArrowEnabled"
       @mousedown="whileMouseDown($event, () => scroll(-1))"
-    />
+    >
+      <i class="icon-[lucide--chevron-left] size-full" />
+    </Button>
     <ScrollPanel
       class="no-drag overflow-hidden"
       :pt:content="{
@@ -41,13 +43,15 @@
     </ScrollPanel>
     <Button
       v-if="showOverflowArrows"
-      icon="pi pi-chevron-right"
-      text
-      severity="secondary"
-      class="overflow-arrow overflow-arrow-right"
+      variant="muted-textonly"
+      size="icon"
+      class="overflow-arrow overflow-arrow-right h-full w-auto aspect-square"
+      :aria-label="$t('g.scrollRight')"
       :disabled="!rightArrowEnabled"
       @mousedown="whileMouseDown($event, () => scroll(1))"
-    />
+    >
+      <i class="icon-[lucide--chevron-right] size-full" />
+    </Button>
     <WorkflowOverflowMenu
       v-if="showOverflowArrows"
       :workflows="workflowStore.openWorkflows"
@@ -55,13 +59,14 @@
     />
     <Button
       v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
-      class="new-blank-workflow-button no-drag shrink-0 rounded-none"
-      icon="pi pi-plus"
-      text
-      severity="secondary"
+      class="new-blank-workflow-button no-drag shrink-0 rounded-none h-full w-auto aspect-square"
+      variant="muted-textonly"
+      size="icon"
       :aria-label="$t('sideToolbar.newBlankWorkflow')"
       @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
-    />
+    >
+      <i class="pi pi-plus" />
+    </Button>
     <ContextMenu ref="menu" :model="contextMenuItems" />
     <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
   </div>
@@ -69,7 +74,6 @@
 
 <script setup lang="ts">
 import { useScroll } from '@vueuse/core'
-import Button from 'primevue/button'
 import ContextMenu from 'primevue/contextmenu'
 import ScrollPanel from 'primevue/scrollpanel'
 import SelectButton from 'primevue/selectbutton'
@@ -78,6 +82,7 @@ import type { WatchStopHandle } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'

src/components/ui/button/Button.vue

@@ -12,17 +12,26 @@ interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
   class?: HTMLAttributes['class']
+  loading?: boolean
+  disabled?: boolean
 }
 
-const { as = 'button', class: customClass = '' } = defineProps<Props>()
+const {
+  as = 'button',
+  class: customClass = '',
+  loading = false,
+  disabled = false
+} = defineProps<Props>()
 </script>
 
 <template>
   <Primitive
     :as
     :as-child
+    :disabled="disabled || loading"
     :class="cn(buttonVariants({ variant, size }), customClass)"
   >
-    <slot />
+    <i v-if="loading" class="pi pi-spin pi-spinner" />
+    <slot v-if="!loading" />
   </Primitive>
 </template>

src/components/ui/button/button.variants.ts

@@ -16,7 +16,9 @@ export const buttonVariants = cva({
       textonly:
         'text-base-foreground bg-transparent hover:bg-secondary-background-hover',
       'muted-textonly':
-        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover'
+        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
+      'destructive-textonly':
+        'text-destructive-background bg-transparent hover:bg-destructive-background/10'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
@@ -41,7 +43,8 @@ const variants = [
   'inverted',
   'destructive',
   'textonly',
-  'muted-textonly'
+  'muted-textonly',
+  'destructive-textonly'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
   ButtonVariants['size']