diff --git a/scripts/generate-nutui-taro-vue.cjs b/scripts/generate-nutui-taro-vue.cjs
index a98f37d3a6..b5e11054f7 100644
--- a/scripts/generate-nutui-taro-vue.cjs
+++ b/scripts/generate-nutui-taro-vue.cjs
@@ -11,14 +11,20 @@ declare module 'vue' {
 const packages = [];
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, exclude, taro } = element;
+    let { name, exclude, taro, setup } = element;
     if (taro == true) {
-      dts += `    Nut${name}: typeof import('@/packages/__VUE/${name.toLowerCase()}/index.taro.vue')['default']\n`
-      const filePath = path.join(`src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
-      if (name !== 'Icon') {
-        importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index${
-          fs.existsSync(filePath) ? '.taro' : ''
-        }.vue';\n`;
+      if (setup === true) {
+        dts += `    Nut${name}: typeof import('@/packages/__VUE/${name.toLowerCase()}/index.taro')['default']\n`
+        importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index.taro';\n`;
+        importStr += `export * from './__VUE/${name.toLowerCase()}/index.taro';\n`;
+      } else {
+        dts += `    Nut${name}: typeof import('@/packages/__VUE/${name.toLowerCase()}/index.taro.vue')['default']\n`
+        const filePath = path.join(`src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
+        if (name !== 'Icon') {
+          importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index${
+            fs.existsSync(filePath) ? '.taro' : ''
+          }.vue';\n`;
+        }
       }
       importScssStr += `import './__VUE/${name.toLowerCase()}/index.scss';\n`;
       if (exclude != true) {
diff --git a/scripts/generate-nutui.cjs b/scripts/generate-nutui.cjs
index bb2e89aba0..49fea83374 100644
--- a/scripts/generate-nutui.cjs
+++ b/scripts/generate-nutui.cjs
@@ -12,14 +12,20 @@ const packages = [];
 const methods = [];
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, type, exclude } = element;
-    dts += `    Nut${name}: typeof import('./__VUE/${name.toLowerCase()}/index.vue')['default']\n`
-    if (name !== 'Icon') {
-      importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index.vue';\n`;
-    }
-    if (type === 'methods') {
-      importStr += `import { show${name} } from './__VUE/${name.toLowerCase()}/index';\n`;
-      methods.push(`show${name}`);
+    let { name, type, exclude, setup } = element;
+    if (setup === true) {
+      dts += `    Nut${name}: typeof import('./__VUE/${name.toLowerCase()}/index')['default']\n`
+      importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index';\n`;
+      importStr += `export * from './__VUE/${name.toLowerCase()}/index';\n`;
+    } else {
+      dts += `    Nut${name}: typeof import('./__VUE/${name.toLowerCase()}/index.vue')['default']\n`
+      if (name !== 'Icon') {
+        importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index.vue';\n`;
+      }
+      if (type === 'methods') {
+        importStr += `import { show${name} } from './__VUE/${name.toLowerCase()}/index';\n`;
+        methods.push(`show${name}`);
+      }
     }
     importScssStr += `import './__VUE/${name.toLowerCase()}/index.scss';\n`;
     if (exclude != true) {
diff --git a/scripts/generate-types-taro.cjs b/scripts/generate-types-taro.cjs
index 51524c3faa..c66a77d635 100644
--- a/scripts/generate-types-taro.cjs
+++ b/scripts/generate-types-taro.cjs
@@ -44,7 +44,13 @@ const getCompName = (name) => {
     });
   }
   const packageName = packages.find((item) => item.name.toLowerCase() === name.toLowerCase());
-  return packageName ? packageName.name : '';
+  if (packageName) {
+    if (packageName?.setup === true) {
+      return [packageName.name, true]
+    }
+    return [packageName.name, false]
+  }
+  return ''
 };
 
 const getLocale = () => {
@@ -101,16 +107,23 @@ fs.cp(sourceDir, toDir, { recursive: true }, (err) => {
     if (inputs && inputs.length) {
       let name = item.substring(0, item.lastIndexOf('/'));
       name = name.substring(name.lastIndexOf('/') + 1);
-      const componentName = getCompName(name);
-      if (componentName) {
+      const _ComponentName = getCompName(name);
+      if (_ComponentName) {
+        const [componentName, setup] = _ComponentName;
         let remain = `
 declare module 'vue' {
     interface GlobalComponents {
         Nut${componentName}: typeof _default;
     }
 }`;
-        let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
-        fs.writeFileSync(item, changeContent);
+        if (setup) {
+          let changeContent = content.replace('export default _default;', `declare const _nut_default: WithInstall<typeof _default>;\nexport default _nut_default;\n${remain}`);
+          changeContent = `import type { WithInstall } from '../../utils';\n` + changeContent
+          fs.writeFileSync(item, changeContent);
+        } else {
+          let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
+          fs.writeFileSync(item, changeContent);
+        }
       }
     }
   });
diff --git a/scripts/generate-types.cjs b/scripts/generate-types.cjs
index 211743d3c8..df5d68fc13 100644
--- a/scripts/generate-types.cjs
+++ b/scripts/generate-types.cjs
@@ -44,7 +44,13 @@ const getCompName = (name) => {
     });
   }
   const packageName = packages.find((item) => item.name.toLowerCase() === name.toLowerCase());
-  return packageName ? packageName.name : '';
+  if (packageName) {
+    if (packageName?.setup === true) {
+      return [packageName.name, true]
+    }
+    return [packageName.name, false]
+  }
+  return ''
 };
 
 const getLocale = () => {
@@ -101,16 +107,23 @@ fs.cp(sourceDir, toDir, { recursive: true }, (err) => {
     if (inputs && inputs.length) {
       let name = item.substring(0, item.lastIndexOf('/'));
       name = name.substring(name.lastIndexOf('/') + 1);
-      const componentName = getCompName(name);
-      if (componentName) {
+      const _ComponentName = getCompName(name);
+      if (_ComponentName) {
+        const [componentName, setup] = _ComponentName;
         let remain = `
 declare module 'vue' {
     interface GlobalComponents {
         Nut${componentName}: typeof _default;
     }
 }`;
-        let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
-        fs.writeFileSync(item, changeContent);
+        if (setup) {
+          let changeContent = content.replace('export default _default;', `declare const _nut_default: WithInstall<typeof _default>;\nexport default _nut_default;\n${remain}`);
+          changeContent = `import type { WithInstall } from '../../utils';\n` + changeContent
+          fs.writeFileSync(item, changeContent);
+        } else {
+          let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
+          fs.writeFileSync(item, changeContent);
+        }
       }
     }
   });
diff --git a/src/config.json b/src/config.json
index f438350529..9278951dd6 100644
--- a/src/config.json
+++ b/src/config.json
@@ -86,6 +86,7 @@
           "cName": "按钮",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "按钮用于触发一个操作，如提交表单。",
           "author": "richard1015"
         },
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
index e7ed8951a1..1d845e7d64 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
@@ -46,7 +46,7 @@ import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.taro.vue';
-import NutButton from '../../button/index.taro.vue';
+import NutButton from '../../button/index.taro';
 import NutSwipe from '../../swipe/index.taro.vue';
 
 export default create({
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.vue b/src/packages/__VUE/addresslist/components/GeneralShell.vue
index de9130c582..7ffaa183e3 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.vue
@@ -46,7 +46,7 @@ import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.vue';
-import NutButton from '../../button/index.vue';
+import NutButton from '../../button';
 import NutSwipe from '../../swipe/index.vue';
 
 export default create({
diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
index 06cfbdbb39..498bd19cf1 100644
--- a/src/packages/__VUE/addresslist/index.taro.vue
+++ b/src/packages/__VUE/addresslist/index.taro.vue
@@ -41,7 +41,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.taro.vue';
 import { floatData } from '@/packages/utils/util';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 import { useLocale } from '@/packages/utils/useLocale';
 
 const cN = 'NutAddressList';
diff --git a/src/packages/__VUE/addresslist/index.vue b/src/packages/__VUE/addresslist/index.vue
index 6c3d282109..9da07f30bd 100644
--- a/src/packages/__VUE/addresslist/index.vue
+++ b/src/packages/__VUE/addresslist/index.vue
@@ -41,7 +41,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { useLocale } from '@/packages/utils/useLocale';
 
 const cN = 'NutAddressList';
diff --git a/src/packages/__VUE/audiooperate/index.vue b/src/packages/__VUE/audiooperate/index.vue
index 55fd89e400..b83907620e 100644
--- a/src/packages/__VUE/audiooperate/index.vue
+++ b/src/packages/__VUE/audiooperate/index.vue
@@ -25,7 +25,7 @@
 <script lang="ts">
 import { toRefs, ref, useSlots, reactive, inject, type PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { useLocale } from '@/packages/utils/useLocale';
 import type { AudioOperateType } from './types';
 
diff --git a/src/packages/__VUE/avatarcropper/index.taro.vue b/src/packages/__VUE/avatarcropper/index.taro.vue
index 6402a8d309..3789765cbf 100644
--- a/src/packages/__VUE/avatarcropper/index.taro.vue
+++ b/src/packages/__VUE/avatarcropper/index.taro.vue
@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { watch, ref, reactive, toRefs, computed, PropType, onMounted } from 'vue';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 import { createComponent } from '@/packages/utils/create';
 import type {
   AvatarCropperToolbarPosition,
diff --git a/src/packages/__VUE/avatarcropper/index.vue b/src/packages/__VUE/avatarcropper/index.vue
index 0fdf517a0c..ca11f100d1 100644
--- a/src/packages/__VUE/avatarcropper/index.vue
+++ b/src/packages/__VUE/avatarcropper/index.vue
@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { watch, ref, reactive, toRefs, computed, Ref, PropType } from 'vue';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { createComponent } from '@/packages/utils/create';
 import type { AvatarCropperToolbarPosition, AvatarCropperShape } from './types';
 const { create } = createComponent('avatar-cropper');
diff --git a/src/packages/__VUE/button/__tests__/button.spec.ts b/src/packages/__VUE/button/__tests__/button.spec.ts
index 72f3cd140a..caed5e95b3 100644
--- a/src/packages/__VUE/button/__tests__/button.spec.ts
+++ b/src/packages/__VUE/button/__tests__/button.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Button from '../index.vue';
+import Button from '../';
 import { nextTick } from 'vue';
 import { StarFill } from '@nutui/icons-vue';
 test('emit click event', () => {
@@ -55,3 +55,19 @@ test('should find nut-icon class of an svg tag when using icon slot', () => {
   expect(icons.length).toEqual(1);
   expect(icons[0].element.classList).toContain('nut-icon');
 });
+test('props color & plain', async () => {
+  const wrapper = mount(Button, {
+    props: {
+      color: 'blue'
+    }
+  });
+
+  const btn = wrapper.findComponent(Button);
+  expect(btn.html()).toContain('background: blue');
+
+  wrapper.setProps({
+    plain: true
+  });
+  await nextTick();
+  expect(btn.html()).toContain('border-color: blue');
+});
diff --git a/src/packages/__VUE/button/button.taro.vue b/src/packages/__VUE/button/button.taro.vue
new file mode 100644
index 0000000000..cfff16cfee
--- /dev/null
+++ b/src/packages/__VUE/button/button.taro.vue
@@ -0,0 +1,109 @@
+<template>
+  <button
+    :class="classes"
+    :style="getStyle"
+    :type="Taro.getEnv() === Taro.ENV_TYPE.WEB ? formType : undefined"
+    :formType="formType === 'button' ? undefined : formType"
+    @click="handleClick"
+  >
+    <view class="nut-button__wrap">
+      <Loading v-if="loading" class="nut-icon-loading" />
+      <slot v-if="$slots.icon && !loading" name="icon"></slot>
+      <view v-if="$slots.default" :class="{ 'nut-button__text': $slots.icon || loading }">
+        <slot></slot>
+      </view>
+    </view>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { PropType, CSSProperties, toRefs, computed } from 'vue';
+import { Loading } from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
+import type { ButtonShape, ButtonType, ButtonSize, ButtonFormType } from './types';
+
+defineOptions({
+  name: 'NutButton'
+});
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: ''
+  },
+  shape: {
+    type: String as PropType<ButtonShape>,
+    default: 'round'
+  },
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'default'
+  },
+  formType: {
+    type: String as PropType<ButtonFormType>,
+    default: 'button'
+  },
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: 'normal'
+  },
+  block: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['click']);
+
+const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
+
+const handleClick = (event: MouseEvent) => {
+  if (!loading.value && !disabled.value) {
+    emit('click', event);
+  }
+};
+
+const classes = computed(() => {
+  const prefixCls = 'nut-button';
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--${type.value}`]: type.value,
+    [`${prefixCls}--${size.value}`]: size.value,
+    [`${prefixCls}--${shape.value}`]: shape.value,
+    [`${prefixCls}--plain`]: plain.value,
+    [`${prefixCls}--block`]: block.value,
+    [`${prefixCls}--disabled`]: disabled.value,
+    [`${prefixCls}--loading`]: loading.value
+  };
+});
+
+const getStyle = computed(() => {
+  const style: CSSProperties = {};
+  if (color?.value) {
+    if (plain.value) {
+      style.color = color.value;
+      style.background = '#fff';
+      if (!color.value?.includes('gradient')) {
+        style.borderColor = color.value;
+      }
+    } else {
+      style.color = '#fff';
+      style.background = color.value;
+    }
+  }
+
+  return style;
+});
+</script>
diff --git a/src/packages/__VUE/button/button.vue b/src/packages/__VUE/button/button.vue
new file mode 100644
index 0000000000..ebc0959dc2
--- /dev/null
+++ b/src/packages/__VUE/button/button.vue
@@ -0,0 +1,98 @@
+<template>
+  <view :class="classes" :style="getStyle" @click="handleClick">
+    <view class="nut-button__wrap">
+      <Loading v-if="loading" class="nut-icon-loading" />
+      <slot v-if="$slots.icon && !loading" name="icon"></slot>
+      <view v-if="$slots.default" :class="{ 'nut-button__text': $slots.icon || loading }">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { PropType, CSSProperties, toRefs, computed } from 'vue';
+import type { ButtonShape, ButtonType, ButtonSize } from './types';
+import { Loading } from '@nutui/icons-vue';
+
+defineOptions({
+  name: 'NutButton'
+});
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: ''
+  },
+  shape: {
+    type: String as PropType<ButtonShape>,
+    default: 'round'
+  },
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'default'
+  },
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: 'normal'
+  },
+  block: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['click']);
+
+const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
+
+const handleClick = (event: MouseEvent) => {
+  if (!loading.value && !disabled.value) {
+    emit('click', event);
+  }
+};
+
+const classes = computed(() => {
+  const prefixCls = 'nut-button';
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--${type.value}`]: type.value,
+    [`${prefixCls}--${size.value}`]: size.value,
+    [`${prefixCls}--${shape.value}`]: shape.value,
+    [`${prefixCls}--plain`]: plain.value,
+    [`${prefixCls}--block`]: block.value,
+    [`${prefixCls}--disabled`]: disabled.value,
+    [`${prefixCls}--loading`]: loading.value
+  };
+});
+
+const getStyle = computed(() => {
+  const style: CSSProperties = {};
+  if (color?.value) {
+    if (plain.value) {
+      style.color = color.value;
+      style.background = '#fff';
+      if (!color.value?.includes('gradient')) {
+        style.borderColor = color.value;
+      }
+    } else {
+      style.color = '#fff';
+      style.background = color.value;
+    }
+  }
+
+  return style;
+});
+</script>
diff --git a/src/packages/__VUE/button/doc.en-US.md b/src/packages/__VUE/button/doc.en-US.md
index b4d12c60a8..de9e01b8ca 100644
--- a/src/packages/__VUE/button/doc.en-US.md
+++ b/src/packages/__VUE/button/doc.en-US.md
@@ -92,6 +92,20 @@ The color of the button can be customized through the color property.
 | --- | --- | --- |
 | click | Emitted when component is clicked | `event: MouseEvent` |
 
+### Types
+
+The component exports the following type definitions:
+
+```js
+import type {
+  ButtonType,
+  ButtonSize,
+  ButtonShape,
+  ButtonFormType,
+  ButtonInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/button/doc.md b/src/packages/__VUE/button/doc.md
index a4b3c5ceec..5bd8b8c007 100644
--- a/src/packages/__VUE/button/doc.md
+++ b/src/packages/__VUE/button/doc.md
@@ -92,6 +92,20 @@ app.use(Button);
 | --- | --- | --- |
 | click | 点击按钮时触发 | `event: MouseEvent` |
 
+### 类型定义
+
+组件导出以下类型定义：
+
+```js
+import type {
+  ButtonType,
+  ButtonSize,
+  ButtonShape,
+  ButtonFormType,
+  ButtonInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/button/doc.taro.md b/src/packages/__VUE/button/doc.taro.md
index 7ed3185348..1f2fe67473 100644
--- a/src/packages/__VUE/button/doc.taro.md
+++ b/src/packages/__VUE/button/doc.taro.md
@@ -93,6 +93,20 @@ app.use(Button);
 | --- | --- | --- |
 | click | 点击按钮时触发 | `event: MouseEvent` |
 
+### 类型定义
+
+组件导出以下类型定义：
+
+```js
+import type {
+  ButtonType,
+  ButtonSize,
+  ButtonShape,
+  ButtonFormType,
+  ButtonInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/button/index.taro.ts b/src/packages/__VUE/button/index.taro.ts
new file mode 100644
index 0000000000..a2fbc407b2
--- /dev/null
+++ b/src/packages/__VUE/button/index.taro.ts
@@ -0,0 +1,11 @@
+import Button from './button.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Button);
+
+export type { ButtonType, ButtonSize, ButtonShape, ButtonFormType } from './types';
+
+export type ButtonInstance = ComponentPublicInstance & InstanceType<typeof Button>;
+
+export { Button, Button as default };
diff --git a/src/packages/__VUE/button/index.taro.vue b/src/packages/__VUE/button/index.taro.vue
deleted file mode 100644
index 1845bb284b..0000000000
--- a/src/packages/__VUE/button/index.taro.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <button
-    :class="classes"
-    :style="getStyle"
-    :type="Taro.getEnv() === Taro.ENV_TYPE.WEB ? formType : undefined"
-    :formType="formType === 'button' ? undefined : formType"
-    @click="handleClick"
-  >
-    <view class="nut-button__wrap">
-      <Loading v-if="loading" class="nut-icon-loading" />
-      <slot v-if="$slots.icon && !loading" name="icon"></slot>
-      <view v-if="$slots.default" :class="{ 'nut-button__text': $slots.icon || loading }">
-        <slot></slot>
-      </view>
-    </view>
-  </button>
-</template>
-
-<script lang="ts">
-import { PropType, CSSProperties, toRefs, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { Loading } from '@nutui/icons-vue-taro';
-import Taro from '@tarojs/taro';
-import { ButtonShape, ButtonType, ButtonSize, ButtonFormType } from './type';
-const { componentName, create } = createComponent('button');
-export default create({
-  components: { Loading },
-  props: {
-    color: String,
-    shape: {
-      type: String as PropType<ButtonShape>,
-      default: 'round'
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String as PropType<ButtonType>,
-      default: 'default'
-    },
-    formType: {
-      type: String as PropType<ButtonFormType>,
-      default: 'button'
-    },
-    size: {
-      type: String as PropType<ButtonSize>,
-      default: 'normal'
-    },
-    block: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
-
-    const handleClick = (event: MouseEvent) => {
-      if (!loading.value && !disabled.value) {
-        emit('click', event);
-      }
-    };
-
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--${type.value}`]: type.value,
-        [`${prefixCls}--${size.value}`]: size.value,
-        [`${prefixCls}--${shape.value}`]: shape.value,
-        [`${prefixCls}--plain`]: plain.value,
-        [`${prefixCls}--block`]: block.value,
-        [`${prefixCls}--disabled`]: disabled.value,
-        [`${prefixCls}--loading`]: loading.value
-      };
-    });
-
-    const getStyle = computed(() => {
-      const style: CSSProperties = {};
-      if (color?.value) {
-        if (plain.value) {
-          style.color = color.value;
-          style.background = '#fff';
-          if (!color.value?.includes('gradient')) {
-            style.borderColor = color.value;
-          }
-        } else {
-          style.color = '#fff';
-          style.background = color.value;
-        }
-      }
-
-      return style;
-    });
-
-    return {
-      handleClick,
-      classes,
-      getStyle,
-      Taro
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/button/index.ts b/src/packages/__VUE/button/index.ts
new file mode 100644
index 0000000000..c96ee08d20
--- /dev/null
+++ b/src/packages/__VUE/button/index.ts
@@ -0,0 +1,11 @@
+import Button from './button.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Button);
+
+export type { ButtonType, ButtonSize, ButtonShape, ButtonFormType } from './types';
+
+export type ButtonInstance = ComponentPublicInstance & InstanceType<typeof Button>;
+
+export { Button, Button as default };
diff --git a/src/packages/__VUE/button/index.vue b/src/packages/__VUE/button/index.vue
deleted file mode 100644
index b582188a2b..0000000000
--- a/src/packages/__VUE/button/index.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <view :class="classes" :style="getStyle" @click="handleClick">
-    <view class="nut-button__wrap">
-      <Loading v-if="loading" class="nut-icon-loading" />
-      <slot v-if="$slots.icon && !loading" name="icon"></slot>
-      <view v-if="$slots.default" :class="{ 'nut-button__text': $slots.icon || loading }">
-        <slot></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { PropType, CSSProperties, toRefs, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { ButtonShape, ButtonType, ButtonSize } from './type';
-import { Loading } from '@nutui/icons-vue';
-const { componentName, create } = createComponent('button');
-export default create({
-  components: { Loading },
-  props: {
-    color: String,
-    shape: {
-      type: String as PropType<ButtonShape>,
-      default: 'round'
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String as PropType<ButtonType>,
-      default: 'default'
-    },
-    size: {
-      type: String as PropType<ButtonSize>,
-      default: 'normal'
-    },
-    block: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
-
-    const handleClick = (event: MouseEvent) => {
-      if (!loading.value && !disabled.value) {
-        emit('click', event);
-      }
-    };
-
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--${type.value}`]: type.value,
-        [`${prefixCls}--${size.value}`]: size.value,
-        [`${prefixCls}--${shape.value}`]: shape.value,
-        [`${prefixCls}--plain`]: plain.value,
-        [`${prefixCls}--block`]: block.value,
-        [`${prefixCls}--disabled`]: disabled.value,
-        [`${prefixCls}--loading`]: loading.value
-      };
-    });
-
-    const getStyle = computed(() => {
-      const style: CSSProperties = {};
-      if (color?.value) {
-        if (plain.value) {
-          style.color = color.value;
-          style.background = '#fff';
-          if (!color.value?.includes('gradient')) {
-            style.borderColor = color.value;
-          }
-        } else {
-          style.color = '#fff';
-          style.background = color.value;
-        }
-      }
-
-      return style;
-    });
-
-    return {
-      handleClick,
-      classes,
-      getStyle
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/button/type.ts b/src/packages/__VUE/button/types.ts
similarity index 100%
rename from src/packages/__VUE/button/type.ts
rename to src/packages/__VUE/button/types.ts
diff --git a/src/packages/__VUE/countdown/__tests__/countdown.spec.ts b/src/packages/__VUE/countdown/__tests__/countdown.spec.ts
index c0471fbe52..360e0b0cb2 100644
--- a/src/packages/__VUE/countdown/__tests__/countdown.spec.ts
+++ b/src/packages/__VUE/countdown/__tests__/countdown.spec.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { nextTick, toRefs, reactive } from 'vue';
 import Countdown from '../index.vue';
-import Button from '../../button/index.vue';
+import Button from '../../button';
 import { sleep } from '@/packages/utils/unit';
 
 test('endTime props', async () => {
diff --git a/src/packages/__VUE/dialog/index.taro.vue b/src/packages/__VUE/dialog/index.taro.vue
index 2c0a0748d2..05121e501e 100644
--- a/src/packages/__VUE/dialog/index.taro.vue
+++ b/src/packages/__VUE/dialog/index.taro.vue
@@ -52,7 +52,7 @@ import { onMounted, computed, watch, ref, PropType, VNode, CSSProperties } from
 import { createComponent } from '@/packages/utils/create';
 import { popupProps } from '../popup/props';
 import NutPopup from '../popup/index.taro.vue';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 import { isPromise } from '@/packages/utils/util';
 import { useLocale } from '@/packages/utils/useLocale';
 
diff --git a/src/packages/__VUE/dialog/index.ts b/src/packages/__VUE/dialog/index.ts
index 783dd97446..3aae9f4a8f 100644
--- a/src/packages/__VUE/dialog/index.ts
+++ b/src/packages/__VUE/dialog/index.ts
@@ -1,7 +1,7 @@
 import Dialog from './index.vue';
 import { h, VNode, CSSProperties, Component, nextTick } from 'vue';
 import NutPopup from '../popup/index.vue';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import NutOverlay from '../overlay/index.vue';
 import { CreateComponent } from '@/packages/utils/create';
 export class DialogOptions {
diff --git a/src/packages/__VUE/dialog/index.vue b/src/packages/__VUE/dialog/index.vue
index 3fae50fd99..102707089d 100644
--- a/src/packages/__VUE/dialog/index.vue
+++ b/src/packages/__VUE/dialog/index.vue
@@ -52,7 +52,7 @@ import { createComponent } from '@/packages/utils/create';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { popupProps } from '../popup/props';
 import NutPopup from '../popup/index.vue';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { useLocale } from '@/packages/utils/useLocale';
 export type TextAlign = 'left' | 'center' | 'right' | 'top';
 
diff --git a/src/packages/__VUE/form/__tests__/index.spec.ts b/src/packages/__VUE/form/__tests__/index.spec.ts
index 8c7a1331de..a1663156cb 100644
--- a/src/packages/__VUE/form/__tests__/index.spec.ts
+++ b/src/packages/__VUE/form/__tests__/index.spec.ts
@@ -3,7 +3,7 @@ import Form from '../index.vue';
 import NutCellGroup from '../../cellgroup/index.vue';
 import FormItem from '../../formitem/index.vue';
 import NutCell from '../../cell/index.vue';
-import NutButton from '../../button/index.vue';
+import NutButton from '../../button';
 import NutTextarea from '../../textarea/index.vue';
 import NutSwitch from '../../switch/index.vue';
 import NutCheckbox from '../../checkbox/index.vue';
diff --git a/src/packages/__VUE/invoice/index.taro.vue b/src/packages/__VUE/invoice/index.taro.vue
index 96cbf8238b..f3a1aff42a 100644
--- a/src/packages/__VUE/invoice/index.taro.vue
+++ b/src/packages/__VUE/invoice/index.taro.vue
@@ -43,7 +43,7 @@ import NutForm from '../form/index.taro.vue';
 import NutFormItem from '../formitem/index.taro.vue';
 import NutRadio from '../radio/index.taro.vue';
 import NutRadioGroup from '../radiogroup/index.taro.vue';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 const { componentName, create } = createComponent('invoice');
 export default create({
   components: {
diff --git a/src/packages/__VUE/invoice/index.vue b/src/packages/__VUE/invoice/index.vue
index 2591a71f26..23978a33f6 100644
--- a/src/packages/__VUE/invoice/index.vue
+++ b/src/packages/__VUE/invoice/index.vue
@@ -43,7 +43,7 @@ import NutForm from '../form/index.vue';
 import NutFormItem from '../formitem/index.vue';
 import NutRadio from '../radio/index.vue';
 import NutRadioGroup from '../radiogroup/index.vue';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 const { componentName, create } = createComponent('invoice');
 export default create({
   components: {
diff --git a/src/packages/__VUE/signature/index.taro.vue b/src/packages/__VUE/signature/index.taro.vue
index 74234bd1ed..c5f417ecd8 100644
--- a/src/packages/__VUE/signature/index.taro.vue
+++ b/src/packages/__VUE/signature/index.taro.vue
@@ -22,7 +22,7 @@
 import Taro from '@tarojs/taro';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('signature');
 
diff --git a/src/packages/__VUE/signature/index.vue b/src/packages/__VUE/signature/index.vue
index 3a70522648..e7079abb73 100644
--- a/src/packages/__VUE/signature/index.vue
+++ b/src/packages/__VUE/signature/index.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { ref, reactive, onMounted, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('signature');
 
diff --git a/src/packages/__VUE/space/__tests__/space.spec.ts b/src/packages/__VUE/space/__tests__/space.spec.ts
index d38fda94e7..53c92ee815 100644
--- a/src/packages/__VUE/space/__tests__/space.spec.ts
+++ b/src/packages/__VUE/space/__tests__/space.spec.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import Space from '../index.vue';
-import NutButton from '../../button/index.vue';
+import NutButton from '../../button';
 import { h } from 'vue';
 
 const prefixCls = 'nut-space';
diff --git a/src/packages/__VUE/steps/__tests__/index.spec.tsx b/src/packages/__VUE/steps/__tests__/index.spec.tsx
index 8512202c32..c2826fa51c 100644
--- a/src/packages/__VUE/steps/__tests__/index.spec.tsx
+++ b/src/packages/__VUE/steps/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import Steps from '../index.vue';
 import Step from '../../step/index.vue';
-import Button from '../../button/index.vue';
+import Button from '../../button';
 import { Service, People, Location2 } from '@nutui/icons-vue';
 import { nextTick, toRefs, reactive } from 'vue';
 
diff --git a/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx b/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
index c3124dbe0a..c10b5959bf 100644
--- a/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
+++ b/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
@@ -2,7 +2,7 @@ import { DOMWrapper, mount } from '@vue/test-utils';
 import Swipe from '../index.vue';
 import SwipeGroup from '../../swipegroup/index.vue';
 import { nextTick } from 'vue';
-import Button from '../../button/index.vue';
+import Button from '../../button';
 import Cell from '../../cell/index.vue';
 import { triggerDrag, mockGetBoundingClientRect } from '@/packages/utils/unit';
 
diff --git a/src/packages/__VUE/table/__tests__/index.spec.ts b/src/packages/__VUE/table/__tests__/index.spec.ts
index 74ac4b7daf..02650443e3 100644
--- a/src/packages/__VUE/table/__tests__/index.spec.ts
+++ b/src/packages/__VUE/table/__tests__/index.spec.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import Table from '../index.vue';
 import { nextTick, h } from 'vue';
-import Button from '../../button/index.vue';
+import Button from '../../button';
 import { Dongdong } from '@nutui/icons-vue';
 
 const columns = [
diff --git a/src/packages/__VUE/uploader/index.taro.vue b/src/packages/__VUE/uploader/index.taro.vue
index 1b3d60278d..acd47f1ee9 100644
--- a/src/packages/__VUE/uploader/index.taro.vue
+++ b/src/packages/__VUE/uploader/index.taro.vue
@@ -77,7 +77,7 @@ import { UploaderTaro, UploadOptions } from './uploader';
 import { FileItem, MediaType, SizeType, SourceType } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import NutProgress from '../progress/index.taro.vue';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 import Taro from '@tarojs/taro';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue-taro';
 import { useLocale } from '@/packages/utils/useLocale';
diff --git a/src/packages/utils/index.ts b/src/packages/utils/index.ts
index d28bcc615f..0f2897866d 100644
--- a/src/packages/utils/index.ts
+++ b/src/packages/utils/index.ts
@@ -1 +1,2 @@
 export * from './useRelation';
+export * from './with-install';
diff --git a/src/packages/utils/with-install.ts b/src/packages/utils/with-install.ts
new file mode 100644
index 0000000000..8b8dac4aa0
--- /dev/null
+++ b/src/packages/utils/with-install.ts
@@ -0,0 +1,16 @@
+import type { App, Component } from 'vue';
+
+export type WithInstall<T> = T & {
+  install(app: App): void;
+};
+
+export const withInstall = <T extends Component>(comp: T) => {
+  const _comp = comp as WithInstall<T>;
+  _comp.install = (vue: App) => {
+    if (_comp.name) {
+      vue.component(_comp.name, _comp);
+    }
+  };
+
+  return _comp as WithInstall<T>;
+};
diff --git a/tsconfig.declaration.json b/tsconfig.declaration.json
index 8c7d413b3b..304348f82d 100644
--- a/tsconfig.declaration.json
+++ b/tsconfig.declaration.json
@@ -12,6 +12,6 @@
     "src/packages/resolver"
   ],
   "exclude": [
-    "node_modules",
+    "node_modules"
   ]
 }
diff --git a/tsconfig.declaration.taro.json b/tsconfig.declaration.taro.json
index 5c4f865b9d..31706beb43 100644
--- a/tsconfig.declaration.taro.json
+++ b/tsconfig.declaration.taro.json
@@ -12,6 +12,6 @@
     "src/packages/resolver"
   ],
   "exclude": [
-    "node_modules",
+    "node_modules"
   ]
 }
diff --git a/vite.config.build.disperse.ts b/vite.config.build.disperse.ts
index b2c17a9bfa..695589b143 100644
--- a/vite.config.build.disperse.ts
+++ b/vite.config.build.disperse.ts
@@ -7,9 +7,11 @@ let input = {};
 
 configPkg.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, type, exclude } = element;
+    const { name, type, exclude, setup } = element;
     if (exclude != true) {
-      input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${type === 'methods' ? '.ts' : '.vue'}`;
+      input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${
+        type === 'methods' || setup === true ? '.ts' : '.vue'
+      }`;
     }
   });
 });
diff --git a/vite.config.build.taro.vue.disperse.ts b/vite.config.build.taro.vue.disperse.ts
index d8e9459ff2..5342265561 100644
--- a/vite.config.build.taro.vue.disperse.ts
+++ b/vite.config.build.taro.vue.disperse.ts
@@ -8,11 +8,15 @@ const input = {};
 
 configPkg.nav.map((item) => {
   item.packages.forEach((element) => {
-    const { name, exclude, taro } = element;
+    const { name, exclude, taro, setup } = element;
     if (taro === false) return; // 排除非 Taro 组件
     if (exclude != true) {
-      const filePath = path.join(`./src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
-      input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${fs.existsSync(filePath) ? '.taro' : ''}.vue`;
+      if (setup === true) {
+        input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index.taro.ts`;
+      } else {
+        const filePath = path.join(`./src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
+        input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${fs.existsSync(filePath) ? '.taro' : ''}.vue`;
+      }
     }
     // }
   });