From a21c813d11e4c1a009b99076d15614757ec1e3bf Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Tue, 25 Nov 2025 02:12:30 +0100
Subject: [PATCH] Style button widgets (#6900)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This pull request introduces improvements to widget customization and UI
consistency in the application. The most notable changes are the
addition of support for icon classes in widget options, updates to
button rendering logic, and enhanced visual consistency for button
components.

Widget customization enhancements:
* Added an optional `iconClass` property to the `IWidgetOptions`
interface in `widgets.ts`, allowing widgets to specify custom icons.

UI and rendering updates:
* Updated `WidgetButton.vue` to render the widget label and, if
provided, an icon using the new `iconClass` option. Also standardized
button styling and label usage.
* Improved button styling in `WidgetRecordAudio.vue` for better visual
consistency with other components.
<img width="662" height="534" alt="Screenshot 2025-11-25 at 01 36 45"
src="https://github.com/user-attachments/assets/43bbe226-07fd-48be-9b98-78b08a726b1b"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6900-Style-button-widgets-2b66d73d3650818ebeadd9315a47ba0f)
by [Unito](https://www.unito.io)
---
 src/lib/litegraph/src/types/widgets.ts                   | 1 +
 .../vueNodes/widgets/components/WidgetButton.vue         | 9 +++++----
 .../vueNodes/widgets/components/WidgetRecordAudio.vue    | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts
index 16fb791c46..5f0d1b9a35 100644
--- a/src/lib/litegraph/src/types/widgets.ts
+++ b/src/lib/litegraph/src/types/widgets.ts
@@ -32,6 +32,7 @@ export interface IWidgetOptions<TValues = unknown[]> {
   /** Optional function to format values for display (e.g., hash → human-readable name) */
   getOptionLabel?: (value?: string | null) => string
   callback?: IWidget['callback']
+  iconClass?: string
 }
 
 interface IWidgetSliderOptions extends IWidgetOptions<number[]> {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 96a24ced1b..6e5a349d44 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="flex flex-col gap-1">
     <Button
+      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
       v-bind="filteredProps"
-      :aria-label="widget.name || widget.label"
+      :aria-label="widget.label"
       size="small"
+      :text="true"
       @click="handleClick"
     >
-      <template v-if="widget.name">
-        {{ widget.name }}
-      </template>
+      {{ widget.label ?? widget.name }}
+      <i v-if="widget.options?.iconClass" :class="widget.options.iconClass" />
     </Button>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index bc0a910ecd..fb556ee71e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -2,7 +2,7 @@
   <div class="relative">
     <div class="mb-4">
       <Button
-        class="text-text-secondary w-full border-0 bg-secondary-background hover:bg-secondary-background-hover"
+        class="text-base-foreground w-full border-0 bg-secondary-background hover:bg-secondary-background-hover"
         :disabled="isRecording || readonly"
         @click="handleStartRecording"
       >