Component: Button Migration 3: IconTextButton (#7603)

## Summary

Replace all the `IconTextButton`s with `Button`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7603-WIP-Component-Button-Migraion-3-IconTextButton-2cd6d73d365081b7b742fa2172dc2ba8)
by [Unito](https://www.unito.io)

src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue

@@ -1,34 +1,31 @@
 <template>
-  <IconTextButton
-    v-bind="$attrs"
-    type="secondary"
-    :label="computedLabel"
-    :size="size"
+  <Button
+    variant="secondary"
+    :size
     :disabled="isLoading || isInstalling"
     @click="installAllPacks"
   >
-    <template #icon>
-      <i
-        v-if="hasConflict && !isInstalling && !isLoading"
-        class="pi pi-exclamation-triangle text-yellow-500"
-      />
-      <DotSpinner
-        v-else-if="isLoading || isInstalling"
-        duration="1s"
-        :size="size === 'sm' ? 12 : 16"
-      />
-    </template>
-  </IconTextButton>
+    <i
+      v-if="hasConflict && !isInstalling && !isLoading"
+      class="pi pi-exclamation-triangle text-yellow-500"
+    />
+    <DotSpinner
+      v-else-if="isLoading || isInstalling"
+      duration="1s"
+      :size="size === 'sm' ? 12 : 16"
+    />
+    <span>{{ computedLabel }}</span>
+  </Button>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import IconTextButton from '@/components/button/IconTextButton.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
-import { t } from '@/i18n'
+import Button from '@/components/ui/button/Button.vue'
+import type { ButtonVariants } from '@/components/ui/button/button.variants'
 import { useDialogService } from '@/services/dialogService'
-import type { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
@@ -51,13 +48,14 @@ const {
   nodePacks: NodePack[]
   isLoading?: boolean
   label?: string
-  size?: ButtonSize
+  size?: ButtonVariants['size']
   hasConflict?: boolean
   conflictInfo?: ConflictDetail[]
 }>()
 
 const managerStore = useComfyManagerStore()
 const { showNodeConflictDialog } = useDialogService()
+const { t } = useI18n()
 
 // Check if any of the packs are currently being installed
 const isInstalling = computed(() => {

src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue

@@ -1,22 +1,23 @@
 <template>
-  <IconTextButton
-    v-bind="$attrs"
-    type="transparent"
-    :label="
-      nodePacks.length > 1
-        ? $t('manager.uninstallSelected')
-        : $t('manager.uninstall')
-    "
-    :border="true"
-    :size="size"
-    class="border-red-500"
+  <Button
+    variant="textonly"
+    :size
+    class="border border-red-500"
     @click="uninstallItems"
-  />
+  >
+    {{
+      nodePacks.length > 1
+        ? t('manager.uninstallSelected')
+        : t('manager.uninstall')
+    }}
+  </Button>
 </template>
 
 <script setup lang="ts">
-import IconTextButton from '@/components/button/IconTextButton.vue'
-import type { ButtonSize } from '@/types/buttonTypes'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import type { ButtonVariants } from '@/components/ui/button/button.variants'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
@@ -25,10 +26,11 @@ type NodePack = components['schemas']['Node']
 
 const { nodePacks, size } = defineProps<{
   nodePacks: NodePack[]
-  size?: ButtonSize
+  size?: ButtonVariants['size']
 }>()
 
 const managerStore = useComfyManagerStore()
+const { t } = useI18n()
 
 const createPayload = (
   uninstallItem: NodePack

src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue

@@ -1,27 +1,24 @@
 <template>
-  <IconTextButton
+  <Button
     v-tooltip.top="
       hasDisabledUpdatePacks ? $t('manager.disabledNodesWontUpdate') : null
     "
-    v-bind="$attrs"
-    type="transparent"
-    :label="$t('manager.updateAll')"
-    :border="true"
+    variant="textonly"
+    class="border"
     size="sm"
     :disabled="isUpdating"
     @click="updateAllPacks"
   >
-    <template v-if="isUpdating" #icon>
-      <DotSpinner duration="1s" :size="12" />
-    </template>
-  </IconTextButton>
+    <DotSpinner v-if="isUpdating" duration="1s" :size="12" />
+    <span>{{ $t('manager.updateAll') }}</span>
+  </Button>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import IconTextButton from '@/components/button/IconTextButton.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'