diff --git a/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index 9da307c..c4c7da4 100644
--- a/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -1,15 +1,16 @@
-import type { AsTag } from 'radix-vue';
-
 import type { Component } from 'vue';
 
-import type { ButtonVariants, ButtonVariantSize } from '../../ui';
+import type {
+  ButtonVariants,
+  ButtonVariantSize,
+} from '../../ui/button/types';
 
 export interface VbenButtonProps {
   /**
    * The element or component this component should render as. Can be overwrite by `asChild`
    * @defaultValue "div"
    */
-  as?: AsTag | Component;
+  as?: Component | string;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    *
diff --git a/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
index cb9b3e5..adb0d46 100644
--- a/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
+++ b/web/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { VbenButtonProps } from './button';
 
-import { computed } from 'vue';
+import { computed, useAttrs } from 'vue';
 
 import { LoaderCircle } from '@vben-core/icons';
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
-
-import { buttonVariants } from '../../ui';
+import { buttonVariants } from '../../ui/button/button';
 
 interface Props extends VbenButtonProps {}
 
@@ -20,23 +18,26 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'default',
   variant: 'default',
 });
+defineOptions({ inheritAttrs: false });
 
 const isDisabled = computed(() => {
   return props.disabled || props.loading;
 });
+
+const attrs = useAttrs();
 </script>
 
 <template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
+  <component
+    :is="as"
     :class="cn(buttonVariants({ variant, size }), props.class)"
     :disabled="isDisabled"
+    v-bind="attrs"
   >
     <LoaderCircle
       v-if="loading"
       class="text-md mr-2 size-4 flex-shrink-0 animate-spin"
     />
     <slot></slot>
-  </Primitive>
+  </component>
 </template>
diff --git a/web/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue b/web/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
index ac626c1..cf2efdb 100644
--- a/web/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
+++ b/web/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
@@ -2,13 +2,14 @@
 import type { ButtonVariants } from '../../ui';
 import type { VbenButtonProps } from './button';
 
-import { computed, useSlots } from 'vue';
+import { computed, defineAsyncComponent, useSlots } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { VbenTooltip } from '../tooltip';
 import VbenButton from './button.vue';
 
+const VbenTooltip = defineAsyncComponent(() => import('../tooltip/tooltip.vue'));
+
 interface Props extends VbenButtonProps {
   class?: any;
   disabled?: boolean;