diff --git a/src/components/custom/button-icon.vue b/src/components/custom/button-icon.vue
index 9f6c5d5e..153953ae 100644
--- a/src/components/custom/button-icon.vue
+++ b/src/components/custom/button-icon.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { createReusableTemplate } from '@vueuse/core';
 import type { PopoverPlacement } from 'naive-ui';
 import { twMerge } from 'tailwind-merge';
 
@@ -28,37 +27,22 @@ const props = withDefaults(defineProps<Props>(), {
   zIndex: 98
 });
 
-const [DefineButton, Button] = createReusableTemplate();
-
 const DEFAULT_CLASS = 'h-[36px] text-icon';
 </script>
 
 <template>
-  <!-- define component start: Button -->
-  <DefineButton v-slot="{ $slots }">
-    <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
-      <div class="flex-center gap-8px">
-        <component :is="$slots.default" />
-      </div>
-    </NButton>
-  </DefineButton>
-  <!-- define component end: Button -->
-
-  <NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="zIndex">
+  <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
     <template #trigger>
-      <Button>
-        <slot>
-          <SvgIcon :icon="icon" />
-        </slot>
-      </Button>
+      <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
+        <div class="flex-center gap-8px">
+          <slot>
+            <SvgIcon :icon="icon" />
+          </slot>
+        </div>
+      </NButton>
     </template>
     {{ tooltipContent }}
   </NTooltip>
-  <Button v-else>
-    <slot>
-      <SvgIcon :icon="icon" />
-    </slot>
-  </Button>
 </template>
 
 <style scoped></style>