update buttons

src/components/searchbox/v2/NodeSearchCategorySidebar.vue

@@ -12,7 +12,7 @@
         :key="preset.id"
         as-child
       >
-        <button
+        <Button
           type="button"
           :data-testid="`category-${preset.id}`"
           :aria-current="selectedCategory === preset.id || undefined"
@@ -20,7 +20,7 @@
           @click="selectCategory(preset.id)"
         >
           {{ preset.label }}
-        </button>
+        </Button>
       </RovingFocusItem>
     </div>
 
@@ -62,6 +62,7 @@ import NodeSearchCategoryTreeNode, {
   CATEGORY_SELECTED_CLASS,
   CATEGORY_UNSELECTED_CLASS
 } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
 import { nodeOrganizationService } from '@/services/nodeOrganizationService'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -157,7 +158,7 @@ watch(
 
 function categoryBtnClass(id: string) {
   return cn(
-    'cursor-pointer rounded-lg border-none bg-transparent py-2.5 pr-3 text-left font-inter text-sm transition-colors',
+    'h-auto justify-start bg-transparent py-2.5 pr-3 text-sm font-normal',
     hideChevrons ? 'pl-3' : 'pl-9',
     selectedCategory.value === id
       ? CATEGORY_SELECTED_CLASS

src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue

@@ -10,7 +10,7 @@
     "
   >
     <RovingFocusItem as-child>
-      <button
+      <Button
         ref="buttonEl"
         type="button"
         role="treeitem"
@@ -20,7 +20,7 @@
         :style="{ paddingLeft: `${0.75 + depth * 1.25}rem` }"
         :class="
           cn(
-            'flex w-full cursor-pointer items-center gap-2 rounded-lg border-none bg-transparent py-2.5 pr-3 text-left font-inter text-sm transition-colors',
+            'h-auto w-full gap-2 bg-transparent py-2.5 pr-3 text-left text-sm font-normal',
             selectedCategory === node.key
               ? CATEGORY_SELECTED_CLASS
               : CATEGORY_UNSELECTED_CLASS
@@ -43,7 +43,7 @@
           "
         />
         <span class="flex-1 truncate">{{ node.label }}</span>
-      </button>
+      </Button>
     </RovingFocusItem>
     <div v-if="isExpanded && node.children?.length" role="group">
       <NodeSearchCategoryTreeNode
@@ -79,7 +79,7 @@ export const CATEGORY_UNSELECTED_CLASS =
 <script setup lang="ts">
 import { computed, nextTick, ref } from 'vue'
 import { RovingFocusItem } from 'reka-ui'
-
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {