From 73e4ae2f704829099fe6a37f4400be665383f0bd Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Fri, 20 Feb 2026 01:35:24 -0800
Subject: [PATCH] refactor: replace raw buttons with Button component in
 WidgetActions (#8973)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #8889

Replaces custom-styled `<button>` elements in WidgetActions.vue with the
shared Button component for better consistency with the design system.
Uses `variant="textonly"` with `size="unset"` to match the existing
dropdown menu item styling.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8973-refactor-replace-raw-buttons-with-Button-component-in-WidgetActions-30c6d73d36508194beb2f5d810dde382)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 .../parameters/WidgetActions.vue              | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/rightSidePanel/parameters/WidgetActions.vue b/src/components/rightSidePanel/parameters/WidgetActions.vue
index 800fb556e1..86b67f3191 100644
--- a/src/components/rightSidePanel/parameters/WidgetActions.vue
+++ b/src/components/rightSidePanel/parameters/WidgetActions.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
 import { isEqual } from 'es-toolkit'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import MoreButton from '@/components/button/MoreButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
 import {
   demoteWidget,
@@ -123,12 +123,6 @@ function handleResetToDefault() {
   if (!hasDefault.value) return
   emit('resetToDefault', defaultValue.value)
 }
-
-const buttonClasses = cn([
-  'border-none bg-transparent',
-  'w-full flex items-center gap-2 rounded px-3 py-2 text-sm',
-  'cursor-pointer transition-all hover:bg-secondary-background-hover active:scale-95'
-])
 </script>
 
 <template>
@@ -137,8 +131,10 @@ const buttonClasses = cn([
     class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
   >
     <template #default="{ close }">
-      <button
-        :class="buttonClasses"
+      <Button
+        variant="textonly"
+        size="unset"
+        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleRename()
@@ -148,11 +144,13 @@ const buttonClasses = cn([
       >
         <i class="icon-[lucide--edit] size-4" />
         <span>{{ t('g.rename') }}</span>
-      </button>
+      </Button>
 
-      <button
+      <Button
         v-if="hasParents"
-        :class="buttonClasses"
+        variant="textonly"
+        size="unset"
+        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             if (isShownOnParents) handleHideInput()
@@ -169,10 +167,12 @@ const buttonClasses = cn([
           <i class="icon-[lucide--eye] size-4" />
           <span>{{ t('rightSidePanel.showInput') }}</span>
         </template>
-      </button>
+      </Button>
 
-      <button
-        :class="buttonClasses"
+      <Button
+        variant="textonly"
+        size="unset"
+        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleToggleFavorite()
@@ -181,18 +181,20 @@ const buttonClasses = cn([
         "
       >
         <template v-if="isFavorited">
-          <i class="icon-[lucide--star]" />
+          <i class="icon-[lucide--star] size-4" />
           <span>{{ t('rightSidePanel.removeFavorite') }}</span>
         </template>
         <template v-else>
-          <i class="icon-[lucide--star]" />
+          <i class="icon-[lucide--star] size-4" />
           <span>{{ t('rightSidePanel.addFavorite') }}</span>
         </template>
-      </button>
+      </Button>
 
-      <button
+      <Button
         v-if="hasDefault"
-        :class="cn(buttonClasses, isCurrentValueDefault && 'opacity-50')"
+        variant="textonly"
+        size="unset"
+        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
         :disabled="isCurrentValueDefault"
         @click="
           () => {
@@ -203,7 +205,7 @@ const buttonClasses = cn([
       >
         <i class="icon-[lucide--rotate-ccw] size-4" />
         <span>{{ t('rightSidePanel.resetToDefault') }}</span>
-      </button>
+      </Button>
     </template>
   </MoreButton>
 </template>