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/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'