Component: Button Migration 2: IconButton (#7598)

## Summary

Still a work in progress. Buttons with just icons are already in the
stories for button.

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

src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue

@@ -6,13 +6,20 @@
     <ContentDivider :width="0.3" />
     <Button
       v-if="isSmallScreen"
-      :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
-      severity="secondary"
-      filled
-      class="absolute top-1/2 z-10 -translate-y-1/2"
-      :class="isSideNavOpen ? 'left-[12rem]' : 'left-2'"
+      variant="secondary"
+      size="icon"
+      :class="
+        cn(
+          'absolute top-1/2 z-10 -translate-y-1/2',
+          isSideNavOpen ? 'left-[12rem]' : 'left-2'
+        )
+      "
       @click="toggleSideNav"
-    />
+    >
+      <i
+        :class="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
+      />
+    </Button>
     <div class="relative flex flex-1 overflow-hidden">
       <ManagerNavSidebar
         v-if="isSideNavOpen"
@@ -46,13 +53,14 @@
                 {{ $t('manager.conflicts.warningBanner.button') }}
               </p>
             </div>
-            <IconButton
+            <Button
               class="absolute top-0 right-0"
-              type="transparent"
+              variant="textonly"
+              size="icon"
               @click="dismissWarningBanner"
             >
               <i class="pi pi-times text-xs text-base-foreground"></i>
-            </IconButton>
+            </Button>
           </div>
           <RegistrySearchBar
             v-model:search-query="searchQuery"
@@ -125,7 +133,6 @@
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
 import { merge } from 'es-toolkit/compat'
-import Button from 'primevue/button'
 import {
   computed,
   onBeforeUnmount,
@@ -137,14 +144,15 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconButton from '@/components/button/IconButton.vue'
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { cn } from '@/utils/tailwindUtil'
 import ManagerNavSidebar from '@/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue'
 import InfoPanel from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue'
 import InfoPanelMultiItem from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue'