diff --git a/packages/devtools-ui-kit/src/components/NButton.ts b/packages/devtools-ui-kit/src/components/NButton.ts
new file mode 100644
index 0000000000..91b35ca12d
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NButton.ts
@@ -0,0 +1,46 @@
+import type { PropType } from 'vue'
+import { NuxtLink } from '#components'
+import { defineComponent, h, renderSlot } from 'vue'
+import NIcon from './NIcon.vue'
+
+// @unocss-include
+export default defineComponent({
+  name: 'NButton',
+  props: {
+    to: String,
+    icon: String,
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: Boolean,
+    type: {
+      type: String as PropType<'submit' | 'reset' | 'button'>,
+      default: 'button',
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => h(props.to ? NuxtLink : 'button', {
+      to: props.to,
+      ...attrs,
+      ...(!props.to && { type: props.type }),
+      ...(props.disabled ? { disabled: true } : { tabindex: 0 }),
+      // @ts-expect-error ignore type
+      class: [
+        props.border ? 'n-button-base active:n-button-active focus-visible:n-focus-base hover:n-button-hover' : '',
+        slots.default ? '' : 'n-icon-button',
+        'n-button n-transition n-disabled:n-disabled',
+      ].join(' '),
+    }, [
+      renderSlot(slots, 'icon', {}, () => props.icon
+        ? [
+            h(NIcon, {
+              icon: props.icon,
+              class: slots.default ? 'n-button-icon' : '',
+            }),
+          ]
+        : []),
+      renderSlot(slots, 'default'),
+    ])
+  },
+})
diff --git a/packages/devtools-ui-kit/src/components/NButton.vue b/packages/devtools-ui-kit/src/components/NButton.vue
deleted file mode 100644
index f268a1a537..0000000000
--- a/packages/devtools-ui-kit/src/components/NButton.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-// eslint-disable-next-line ts/ban-ts-comment
-// @ts-ignore tsconfig
-import { NuxtLink } from '#components'
-
-withDefaults(defineProps<{
-  to?: string
-  icon?: string
-  border?: boolean
-  disabled?: boolean
-  type?: 'submit' | 'reset' | 'button'
-}>(), {
-  border: true,
-  type: 'button',
-})
-</script>
-
-<template>
-  <Component
-    :is="to ? NuxtLink : 'button'"
-    :to="to"
-    v-bind="{ ...$attrs, ...(!to && { type }), ...(disabled ? { disabled: true } : { tabindex: 0 }) }"
-    :class="[
-      { 'n-button-base active:n-button-active focus-visible:n-focus-base hover:n-button-hover': border },
-      { 'n-icon-button': !$slots.default },
-    ]"
-    class="n-button n-transition n-disabled:n-disabled"
-  >
-    <slot name="icon">
-      <NIcon v-if="icon" :icon="icon" :class="{ 'n-button-icon': $slots.default }" />
-    </slot>
-    <slot />
-  </Component>
-</template>
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index c66bddade6..153f80699a 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -60,14 +60,14 @@ const MinimizeInactiveOptions = [
 
 const categories = getCategorizedTabs(useAllTabs())
 
-function toggleTab(name: string, v: boolean) {
+function toggleTab(name: string, v?: boolean) {
   if (v)
     hiddenTabs.value = hiddenTabs.value.filter(i => i !== name)
   else
     hiddenTabs.value.push(name)
 }
 
-function toggleTabCategory(name: string, v: boolean) {
+function toggleTabCategory(name: string, v?: boolean) {
   if (v)
     hiddenTabCategories.value = hiddenTabCategories.value.filter(i => i !== name)
   else
@@ -141,7 +141,7 @@ watchEffect(() => {
             <NSwitch
               flex="~ row-reverse" py1 pl2 pr1 n-lime
               :model-value="!hiddenTabCategories.includes(name)"
-              @update:model-value="(v: boolean) => toggleTabCategory(name, v)"
+              @update:model-value="(v) => toggleTabCategory(name, v)"
             >
               <div flex="~ gap-2" flex-auto items-center justify-start>
                 <span capitalize op75>{{ name }}</span>
@@ -154,7 +154,7 @@ watchEffect(() => {
               <NSwitch
                 flex="~ row-reverse" py1 pl2 pr1 n-primary
                 :model-value="!hiddenTabs.includes(tab.name)"
-                @update:model-value="(v: boolean) => toggleTab(tab.name, v)"
+                @update:model-value="(v) => toggleTab(tab.name, v)"
               >
                 <div flex="~ gap-2" flex-auto items-center justify-start of-hidden pr-4 :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
                   <TabIcon text-xl :icon="tab.icon" :title="tab.title" />