diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
index 73f0c449f..5abcf1eb2 100644
--- a/src/components/Button/src/BasicButton.vue
+++ b/src/components/Button/src/BasicButton.vue
@@ -10,14 +10,15 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue';
+  import { Button } from 'ant-design-vue';
   export default defineComponent({
     name: 'AButton',
+    extends: Button,
     inheritAttrs: false,
   });
 </script>
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
-  import { Button } from 'ant-design-vue';
   import Icon from '/@/components/Icon/src/Icon.vue';
   import { buttonProps } from './props';
   import { useAttrs } from '/@/hooks/core/useAttrs';
diff --git a/src/components/Button/src/props.ts b/src/components/Button/src/props.ts
index d79d378af..806d39577 100644
--- a/src/components/Button/src/props.ts
+++ b/src/components/Button/src/props.ts
@@ -1,5 +1,12 @@
+const validColors = ['error', 'warning', 'success', ''] as const;
+type ButtonColorType = typeof validColors[number];
+
 export const buttonProps = {
-  color: { type: String, validator: (v) => ['error', 'warning', 'success', ''].includes(v) },
+  color: {
+    type: String as PropType<ButtonColorType>,
+    validator: (v) => validColors.includes(v),
+    default: '',
+  },
   loading: { type: Boolean },
   disabled: { type: Boolean },
   /**