diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
index a9719ec9d50..5def4fecb7f 100644
--- a/packages/varlet-ui/src/button/Button.vue
+++ b/packages/varlet-ui/src/button/Button.vue
@@ -16,7 +16,11 @@
     :disabled="disabled"
     @click="trigger"
   >
-    <varlet-loading v-if="loading"></varlet-loading>
+    <varlet-loading
+      :type="loadingType"
+      :size="loadingSize"
+      v-if="loading"
+    />
     <slot v-else/>
   </button>
 </template>
diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
index 62a3f302507..4f3240fa86a 100644
--- a/packages/varlet-ui/src/button/example/index.vue
+++ b/packages/varlet-ui/src/button/example/index.vue
@@ -1,20 +1,5 @@
 <template>
   <div class="example">
-    <varlet-button class="example__button" type="plain" size="large">测试</varlet-button>
-
-    <varlet-button class="example__button" type="primary" size="large">测试</varlet-button>
-    <varlet-button class="example__button" type="primary" size="normal">测试</varlet-button>
-    <varlet-button class="example__button" type="primary" size="small">测试</varlet-button>
-    <varlet-button class="example__button" type="primary" size="mini">测试</varlet-button>
-
-    <varlet-button class="example__button" type="danger" size="large">测试</varlet-button>
-    <varlet-button class="example__button" type="danger">测试</varlet-button>
-    <varlet-button class="example__button" type="danger" size="small">测试</varlet-button>
-    <varlet-button class="example__button" type="danger" size="mini">测试</varlet-button>
-
-    <varlet-button class="example__button" type="info" size="normal" block>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</varlet-button>
-    <varlet-button class="example__button" type="warning" size="large" block>测试</varlet-button>
-
     <varlet-button
       class="example__button"
       round
@@ -36,14 +21,164 @@
     <varlet-button class="example__button" type="primary" @click="trigger">切换状态</varlet-button>
     <varlet-button class="example__button" type="plain" size="large" :disabled="disabled">{{ disabled ? '禁用' : '启用' }}</varlet-button>
 
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="large"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
+    </varlet-button>
+
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="large"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
+    </varlet-button>
+
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="large"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
+    </varlet-button>
+
     <varlet-button
       class="example__button"
       type="success"
+      loading-type="disappear"
       size="large"
       v-model:loading="loading"
       @click="trigger"
     >
-      给老子转!
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="success"
+      loading-type="disappear"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="success"
+      loading-type="disappear"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="success"
+      loading-type="disappear"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
     </varlet-button>
   </div>
 </template>
diff --git a/packages/varlet-ui/src/button/propsEmits.ts b/packages/varlet-ui/src/button/propsEmits.ts
index dd09a5cdc29..02962924cb5 100644
--- a/packages/varlet-ui/src/button/propsEmits.ts
+++ b/packages/varlet-ui/src/button/propsEmits.ts
@@ -1,3 +1,9 @@
+import {
+  typeValidator as loadingTypeValidator,
+  sizeValidator as loadingSizeValidator,
+  getTypeDefault as getLoadingTypeDefault
+} from '../loading/propsEmits'
+
 function typeValidator(type: string): boolean {
   const validTypes = ['plain', 'primary', 'info', 'success', 'warning', 'danger']
 
@@ -28,6 +34,18 @@ export const props = {
     type: Boolean,
     default: false
   },
+  // 加载动画类型
+  loadingType: {
+    type: String,
+    default: getLoadingTypeDefault,
+    validator: loadingTypeValidator
+  },
+  // 加载动画尺寸
+  loadingSize: {
+    type: String,
+    default: (props: any) => props.size,
+    validator: loadingSizeValidator
+  },
   // 原型按钮
   round: {
     type: Boolean,
diff --git a/packages/varlet-ui/src/loading/propsEmits.ts b/packages/varlet-ui/src/loading/propsEmits.ts
index d75166c1961..85e91629bff 100644
--- a/packages/varlet-ui/src/loading/propsEmits.ts
+++ b/packages/varlet-ui/src/loading/propsEmits.ts
@@ -1,25 +1,29 @@
-function typeValidator(type: string): boolean {
+export function typeValidator(type: string): boolean {
 	const validTypes = ['wave', 'cube', 'rect', 'disappear']
 	return validTypes.includes(type)
 }
 
-function sizeValidator(size: string): boolean {
+export function sizeValidator(size: string): boolean {
 	const validSizes = ['normal', 'mini', 'small', 'large']
 
 	return validSizes.includes(size)
 }
 
+export const getTypeDefault = () => 'wave'
+
+export const getSizeDefault = () => 'normal'
+
 export const props = {
 	// loading类型
 	type: {
 		type: String,
-		default: 'wave',
+		default: getTypeDefault,
 		validator: typeValidator,
 	},
 	// loading尺寸
 	size: {
 		type: String,
-		default: 'normal',
+		default: getSizeDefault,
 		validator: sizeValidator,
 	},
 	// loading颜色