diff --git a/examples/sites/demos/mobile/app/button/base.vue b/examples/sites/demos/mobile/app/button/base.vue
new file mode 100644
index 000000000..a7b3bf36f
--- /dev/null
+++ b/examples/sites/demos/mobile/app/button/base.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="button-wrap">
+    <p>按钮类型</p>
+    <tiny-button type="primary" reset-time="500">主要按钮</tiny-button>
+    <tiny-button type="secondary">次要按钮</tiny-button>
+    <tiny-button type="danger">危险按钮</tiny-button>
+    <tiny-button type="text">文字按钮</tiny-button>
+    <tiny-button type="icon" :icon="IconMail"></tiny-button>
+    <tiny-button type="icon" :icon="IconMail" text="图标按钮"></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconMail: iconMail()
+    }
+  }
+}
+</script>
+
+<style scoped>
+body {
+  overflow: hidden;
+}
+.button-wrap {
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
+}
+.button-wrap .tiny-mobile-button {
+  margin-right: 16px;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/button/disabled.vue b/examples/sites/demos/mobile/app/button/disabled.vue
new file mode 100644
index 000000000..df9667522
--- /dev/null
+++ b/examples/sites/demos/mobile/app/button/disabled.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="button-wrap">
+    <h3>按钮不可用</h3>
+    <tiny-button type="primary" disabled>主要按钮不可用</tiny-button>
+    <tiny-button type="secondary" disabled>次要按钮不可用</tiny-button>
+    <tiny-button type="text" disabled>文字按钮不可用</tiny-button>
+    <tiny-button type="danger" disabled>危险按钮不可用</tiny-button>
+    <tiny-button type="icon" :icon="IconMail" disabled></tiny-button>
+    <tiny-button type="icon" :icon="IconMail" text="图标按钮" disabled></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconMail: iconMail()
+    }
+  }
+}
+</script>
+
+<style scoped>
+body {
+  overflow: hidden;
+}
+.button-wrap {
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
+}
+.button-wrap .tiny-mobile-button {
+  margin-right: 16px;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/button/event-click.vue b/examples/sites/demos/mobile/app/button/event-click.vue
deleted file mode 100644
index c8d9d57b4..000000000
--- a/examples/sites/demos/mobile/app/button/event-click.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button round>默认1秒</tiny-button>
-    <tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
-    <tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round disabled>主要按钮</tiny-button>
-    <tiny-button type="success" round disabled>成功按钮</tiny-button>
-    <tiny-button type="info" round disabled>信息按钮</tiny-button>
-    <tiny-button type="warning" round disabled>警告按钮</tiny-button>
-    <tiny-button type="danger" round disabled>危险按钮</tiny-button>
-    <tiny-button type="secondary" round disabled>次要按钮</tiny-button>
-    <tiny-button round disabled>弱按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    click() {
-      console.log('click event!!!')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/examples/sites/demos/mobile/app/button/event.vue b/examples/sites/demos/mobile/app/button/event.vue
new file mode 100644
index 000000000..ff77a2116
--- /dev/null
+++ b/examples/sites/demos/mobile/app/button/event.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="button-wrap">
+    <p>点击事件</p>
+    <tiny-button type="secondary" :loading="loading" @click="btnClick" size="small">点我加载</tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconMail: iconMail(),
+      loading: false
+    }
+  },
+  methods: {
+    btnClick() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+body {
+  overflow: hidden;
+}
+.button-wrap {
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
+}
+.button-wrap .tiny-mobile-button {
+  margin-right: 16px;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/button/icon.vue b/examples/sites/demos/mobile/app/button/icon.vue
index 56b2e66d4..2642342b8 100644
--- a/examples/sites/demos/mobile/app/button/icon.vue
+++ b/examples/sites/demos/mobile/app/button/icon.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="button-wrap">
-    <tiny-button :icon="IconSearch"></tiny-button>
-    <tiny-button type="primary" :icon="IconEdit">编辑</tiny-button>
-    <tiny-button type="success" :icon="IconYes" text="好的"></tiny-button>
-    <tiny-button type="info" :icon="IconMail"></tiny-button>
-    <tiny-button type="warning" :icon="IconStarO"></tiny-button>
-    <tiny-button type="danger" :icon="IconDel"></tiny-button>
+    <h3>图标</h3>
+    <tiny-button type="icon" :icon="IconSearch"></tiny-button>
+    <tiny-button type="icon" :icon="IconEdit" text="编辑"></tiny-button>
+    <tiny-button type="icon" :icon="IconYes" text="好的"></tiny-button>
+    <tiny-button type="icon" :icon="IconMail"></tiny-button>
+    <tiny-button type="icon" :icon="IconStarO"></tiny-button>
+    <tiny-button type="icon" :icon="IconDel" size="small"></tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
 import { iconDel, iconYes, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
 
diff --git a/examples/sites/demos/mobile/app/button/loading.vue b/examples/sites/demos/mobile/app/button/loading.vue
index 9117e1741..fe6f7a5bf 100644
--- a/examples/sites/demos/mobile/app/button/loading.vue
+++ b/examples/sites/demos/mobile/app/button/loading.vue
@@ -1,15 +1,12 @@
 <template>
   <div class="button-wrap">
-    <tiny-button loading>加载中</tiny-button>
-    <tiny-button type="primary" loading>加载中</tiny-button>
-    <tiny-button type="success" loading>加载中</tiny-button>
-    <tiny-button type="info" loading>加载中</tiny-button>
-    <tiny-button type="warning" loading>加载中</tiny-button>
-    <tiny-button type="danger" loading>加载中</tiny-button>
+    <h3>按钮加载状态</h3>
+    <tiny-button type="primary" loading>主要按钮-加载</tiny-button>
+    <tiny-button type="secondary" :loading="loading" @click="btnClick">点我加载</tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
 
 export default {
@@ -17,16 +14,31 @@ export default {
     TinyButton: Button
   },
   data() {
-    return {}
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    btnClick() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    }
   }
 }
 </script>
 
 <style scoped>
+body {
+  overflow: hidden;
+}
 .button-wrap {
   padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
 }
-.button-wrap .tiny-mobile-button:not(:nth-child(3n)) {
+.button-wrap .tiny-mobile-button {
   margin-right: 16px;
   margin-bottom: 16px;
 }
diff --git a/examples/sites/demos/mobile/app/button/native-type.vue b/examples/sites/demos/mobile/app/button/native-type.vue
deleted file mode 100644
index fdb3c546a..000000000
--- a/examples/sites/demos/mobile/app/button/native-type.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div class="demo-form-native-type">
-    <div class="page__hd">
-      <h1 class="page__title">Form</h1>
-      <p class="page__desc">表单（纯展示）</p>
-    </div>
-    <div class="demo-padds-native-type">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules">
-        <tiny-form-item label="优秀" prop="users" vertical>
-          <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
-        </tiny-form-item>
-        <tiny-form-item label="优秀" vertical>
-          <tiny-input
-            v-model="createData.user"
-            is-select
-            :select-menu="menus"
-            placeholder="请输入内容"
-            type="form"
-          ></tiny-input>
-        </tiny-form-item>
-        <tiny-form-item class="demo-form-base-item">
-          <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
-        </tiny-form-item>
-      </tiny-form>
-    </div>
-    <tiny-dialog-box
-      :visible="boxVisibility"
-      @update:visible="boxVisibility = $event"
-      :modal-append-to-body="false"
-      title="消息提示"
-    >
-      <span>reset</span>
-    </tiny-dialog-box>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
-  },
-  data() {
-    return {
-      createData: {
-        users: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      },
-      boxVisibility: false
-    }
-  },
-  methods: {
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-          this.$refs[formName].resetFields()
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.demo-padds-native-type {
-  padding: 15px;
-  background: white;
-  margin-bottom: 15px;
-}
-.page__hd {
-  padding: 40px;
-}
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
-}
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
-}
-.demo-form-native-type {
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>
-
-<style>
-.demo-form-native-type .tiny-form-item__label {
-  background: #fff;
-}
-.demo-padds-native-type .tiny-mobile-input-form__input {
-  text-align: right;
-}
-</style>
diff --git a/examples/sites/demos/mobile/app/button/plain.vue b/examples/sites/demos/mobile/app/button/plain.vue
deleted file mode 100644
index 2be4f855e..000000000
--- a/examples/sites/demos/mobile/app/button/plain.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button plain>朴素按钮</tiny-button>
-    <tiny-button type="primary" plain>主要按钮</tiny-button>
-    <tiny-button type="success" plain>成功按钮</tiny-button>
-    <tiny-button type="info" plain>信息按钮</tiny-button>
-    <tiny-button type="warning" plain>警告按钮</tiny-button>
-    <tiny-button type="danger" plain>危险按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button:not(:nth-child(3n)) {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/examples/sites/demos/mobile/app/button/reset-time.vue b/examples/sites/demos/mobile/app/button/reset-time.vue
index 8b8c75aa8..f937dcce3 100644
--- a/examples/sites/demos/mobile/app/button/reset-time.vue
+++ b/examples/sites/demos/mobile/app/button/reset-time.vue
@@ -1,35 +1,28 @@
 <template>
   <div class="button-wrap">
-    <tiny-button round>默认1秒</tiny-button>
-    <tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
-    <tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round disabled>主要按钮</tiny-button>
-    <tiny-button type="success" round disabled>成功按钮</tiny-button>
-    <tiny-button type="info" round disabled>信息按钮</tiny-button>
-    <tiny-button type="warning" round disabled>警告按钮</tiny-button>
-    <tiny-button type="danger" round disabled>危险按钮</tiny-button>
-    <tiny-button type="secondary" round disabled>次要按钮</tiny-button>
-    <tiny-button round disabled>弱按钮</tiny-button>
+    <p>按钮类型</p>
+    <tiny-button type="primary" reset-time="500">重置时间</tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
 
 export default {
   components: {
     TinyButton: Button
-  },
-  data() {
-    return {}
   }
 }
 </script>
 
 <style scoped>
+body {
+  overflow: hidden;
+}
 .button-wrap {
-  padding: 10px 20px;
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
 }
 .button-wrap .tiny-mobile-button {
   margin-right: 16px;
diff --git a/examples/sites/demos/mobile/app/button/round.vue b/examples/sites/demos/mobile/app/button/round.vue
deleted file mode 100644
index b40bf115a..000000000
--- a/examples/sites/demos/mobile/app/button/round.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round>主要按钮</tiny-button>
-    <tiny-button type="success" round>成功按钮</tiny-button>
-    <tiny-button type="info" round>信息按钮</tiny-button>
-    <tiny-button type="warning" round>警告按钮</tiny-button>
-    <tiny-button type="danger" round>危险按钮</tiny-button>
-    <tiny-button type="secondary" round>次要按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/examples/sites/demos/mobile/app/button/size.vue b/examples/sites/demos/mobile/app/button/size.vue
index 7cd74845b..e5beda15a 100644
--- a/examples/sites/demos/mobile/app/button/size.vue
+++ b/examples/sites/demos/mobile/app/button/size.vue
@@ -1,33 +1,50 @@
 <template>
   <div class="button-wrap">
-    <tiny-button round>默认尺寸</tiny-button>
-    <tiny-button type="primary" size="large" round>large</tiny-button>
-    <tiny-button type="success" size="medium" round>medium</tiny-button>
-    <tiny-button type="info" size="small" round>small</tiny-button>
-    <tiny-button type="warning" size="mini" round>mini</tiny-button>
-    <tiny-button type="primary" size="large" round>大号按钮</tiny-button>
-    <tiny-button type="success" size="medium" round>中号按钮</tiny-button>
-    <tiny-button type="info" size="small" round>小号按钮</tiny-button>
-    <tiny-button type="warning" size="mini" round>mini按钮</tiny-button>
+    <h3>按钮小尺寸</h3>
+    <tiny-button type="primary" size="small">主要按钮</tiny-button>
+    <tiny-button type="secondary" size="small">次要按钮</tiny-button>
+    <tiny-button type="danger" size="small">危险按钮</tiny-button>
+    <tiny-button type="text" size="small">文字按钮</tiny-button>
+    <tiny-button type="icon" :icon="IconMail" size="small"></tiny-button>
+    <tiny-button type="icon" :icon="IconMail" text="图标按钮" size="small"></tiny-button>
+    <tiny-button type="primary" loading size="small">主要按钮-加载</tiny-button>
+    <tiny-button type="secondary" :loading="loading" @click="btnClick" size="small">点我加载</tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyButton: Button
   },
   data() {
-    return {}
+    return {
+      IconMail: iconMail(),
+      loading: false
+    }
+  },
+  methods: {
+    btnClick() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    }
   }
 }
 </script>
 
 <style scoped>
+body {
+  overflow: hidden;
+}
 .button-wrap {
   padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
 }
 .button-wrap .tiny-mobile-button {
   margin-right: 16px;
diff --git a/examples/sites/demos/mobile/app/button/text.vue b/examples/sites/demos/mobile/app/button/text.vue
deleted file mode 100644
index 3a5962ea3..000000000
--- a/examples/sites/demos/mobile/app/button/text.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button round>默认1秒</tiny-button>
-    <tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
-    <tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round disabled>主要按钮</tiny-button>
-    <tiny-button type="success" round disabled>成功按钮</tiny-button>
-    <tiny-button type="info" round disabled>信息按钮</tiny-button>
-    <tiny-button type="warning" round disabled>警告按钮</tiny-button>
-    <tiny-button type="danger" round disabled>危险按钮</tiny-button>
-    <tiny-button type="secondary" round disabled>次要按钮</tiny-button>
-    <tiny-button round disabled>弱按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/examples/sites/demos/mobile/app/button/webdoc/button.js b/examples/sites/demos/mobile/app/button/webdoc/button.js
index 46c9385c9..9d4099645 100644
--- a/examples/sites/demos/mobile/app/button/webdoc/button.js
+++ b/examples/sites/demos/mobile/app/button/webdoc/button.js
@@ -3,28 +3,28 @@ export default {
   owner: '',
   demos: [
     {
-      demoId: 'event-click',
+      demoId: 'base',
       name: {
-        'zh-CN': '点击事件',
-        'en-US': 'button type'
+        'zh-CN': '基础用法',
+        'en-US': 'base'
       },
       desc: {
-        'zh-CN': '<p>单击事件</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': '<p>基础用法</p>',
+        'en-US': '<p>base</p>'
       },
-      codeFiles: ['event-click.vue']
+      codeFiles: ['base.vue']
     },
     {
-      demoId: 'icon',
+      demoId: 'disabled',
       name: {
-        'zh-CN': '图标按钮',
-        'en-US': 'button round'
+        'zh-CN': '不可用',
+        'en-US': 'disabled'
       },
       desc: {
-        'zh-CN': '<p>图标按钮</p>',
-        'en-US': '<p>button round</p>'
+        'zh-CN': '<p>不可用</p>',
+        'en-US': '<p>disabled</p>'
       },
-      codeFiles: ['icon.vue']
+      codeFiles: ['disabled.vue']
     },
     {
       demoId: 'loading',
@@ -38,55 +38,6 @@ export default {
       },
       codeFiles: ['loading.vue']
     },
-    {
-      demoId: 'native-type',
-      name: {
-        'zh-CN': '按钮属性',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过<code>native-type</code>属性可以设置原生 type 属性，该属性的可选值为 button / submit / reset</p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['native-type.vue']
-    },
-    {
-      demoId: 'plain',
-      name: {
-        'zh-CN': '朴素按钮',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>朴素按钮</p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['plain.vue']
-    },
-    {
-      demoId: 'reset-time',
-      name: {
-        'zh-CN': '禁用时间',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>通过<code>reset-time</code>属性可以设置按钮禁用时间，防止重复提交，单位毫秒,该属性默认为 1000</p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['reset-time.vue']
-    },
-    {
-      demoId: 'round',
-      name: {
-        'zh-CN': '圆角按钮',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>圆角按钮</p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['round.vue']
-    },
     {
       demoId: 'size',
       name: {
@@ -100,16 +51,40 @@ export default {
       codeFiles: ['size.vue']
     },
     {
-      demoId: 'text',
+      demoId: 'icon',
       name: {
-        'zh-CN': '文字按钮',
+        'zh-CN': '图标',
+        'en-US': 'icon'
+      },
+      desc: {
+        'zh-CN': '<p>图标</p>',
+        'en-US': '<p>icon</p>'
+      },
+      codeFiles: ['icon.vue']
+    },
+    {
+      demoId: 'reset-time',
+      name: {
+        'zh-CN': '重置时间',
+        'en-US': 'reset time'
+      },
+      desc: {
+        'zh-CN': '<p>重置时间</p>',
+        'en-US': '<p>reset-time</p>'
+      },
+      codeFiles: ['reset-time.vue']
+    },
+    {
+      demoId: 'event',
+      name: {
+        'zh-CN': '点击事件',
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>文字按钮</p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>点击事件</p>',
+        'en-US': '<p>button click</p>'
       },
-      codeFiles: ['text.vue']
+      codeFiles: ['event.vue']
     }
   ],
   apis: [
@@ -119,17 +94,17 @@ export default {
       properties: [
         {
           name: 'disabled',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: 'false',
           desc: {
             'zh-CN': '<p>设置按钮是否被禁用,该属性默认为false</p>',
             'en-US': 'display different button'
           },
-          demoId: ''
+          demoId: 'disabled'
         },
         {
           name: 'icon',
-          type: 'Object',
+          type: 'VueComponent',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>svg 图片对象</p>',
@@ -139,7 +114,7 @@ export default {
         },
         {
           name: 'loading',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: 'false',
           desc: {
             'zh-CN': '<p>svg 是否加载中状态，该属性默认为false</p>',
@@ -147,49 +122,19 @@ export default {
           },
           demoId: 'loading'
         },
-        {
-          name: 'native-type',
-          type: 'String',
-          defaultValue: 'button',
-          desc: {
-            'zh-CN': '<p>原生 type 属性,该属性默认为button</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'native-type'
-        },
-        {
-          name: 'plain',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否朴素按钮,该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'plain'
-        },
         {
           name: 'reset-time',
-          type: 'Number',
-          defaultValue: '1000',
+          type: 'number',
+          defaultValue: '0',
           desc: {
             'zh-CN': '<p>设置按钮禁用时间，防止重复提交，单位毫秒,该属性默认为1000</p>',
             'en-US': 'display different button'
           },
           demoId: 'reset-time'
         },
-        {
-          name: 'round',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否圆角按钮，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'round'
-        },
         {
           name: 'size',
-          type: 'String',
+          type: 'string',
           defaultValue: '"large" | "medium" | "small" | "mini"',
           desc: {
             'zh-CN': '<p>尺寸</p>',
@@ -199,13 +144,13 @@ export default {
         },
         {
           name: 'type',
-          type: '"primary" | "success" | "warning" |"info" | "danger"',
+          type: '"primary" | "secondary" | "text" |"icon" | "danger"',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>类型</p>',
             'en-US': 'display different button'
           },
-          demoId: 'icon'
+          demoId: 'base'
         },
         {
           name: 'text',
@@ -215,19 +160,19 @@ export default {
             'zh-CN': '<p>设置按钮显示的文本，可配置国际化 </p>',
             'en-US': 'display different button'
           },
-          demoId: 'icon'
+          demoId: 'base'
         }
       ],
       events: [
         {
           name: 'click',
-          type: '',
+          type: '(event: PointEvent) => void',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>设置当按钮被点击时触发的回调函数。</p>',
             'en-US': 'Click'
           },
-          demoId: 'event-click'
+          demoId: 'event'
         }
       ],
       slots: [
diff --git a/packages/theme-mobile/src/button/index.less b/packages/theme-mobile/src/button/index.less
index ac147ee5c..b12d32333 100644
--- a/packages/theme-mobile/src/button/index.less
+++ b/packages/theme-mobile/src/button/index.less
@@ -10,7 +10,6 @@
 *
 */
 
-@import '../mixins/button.less';
 @import '../custom.less';
 @import './vars.less';
 
@@ -19,21 +18,14 @@
 }
 
 @button-prefix-cls: ~'@{css-prefix}mobile-button';
-@svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{button-prefix-cls} {
   position: relative;
   margin: 0;
-  padding: 0;
-  height: var(--ti-mobile-button-height);
-  line-height: var(--ti-mobile-button-height);
-  font-size: var(--ti-mobile-button-font-size-default);
-  -webkit-text-size-adjust: 100%;
-  border-width: 1px;
+
+  text-size-adjust: 100%;
+  border-width: var(--ti-mobile-button-border-width);
   border-style: solid;
-  border-image: initial;
-  border-radius: 2px;
-  padding: 0 16px;
   transition:
     border 0.3s ease 0s,
     color 0.3s ease 0s,
@@ -42,173 +34,135 @@
   outline: 0;
   display: inline-block;
   user-select: none;
-  -webkit-appearance: none;
+  appearance: none;
   text-align: center;
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
+  padding: 0 var(--ti-mobile-button-padding-large);
+  height: var(--ti-mobile-button-height-large);
+  min-width: var(--ti-mobile-button-min-width-large);
+  line-height: var(--ti-mobile-button-height-large);
+  font-size: var(--ti-mobile-button-font-size-default);
 
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    border: inherit;
-    border-color: #000;
-    border-radius: inherit;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    content: ' ';
-  }
+  // 主要
+  &--primary {
+    color: var(--ti-mobile-button-text-color-white);
+    background-color: var(--ti-mobile-button-bg-color-black);
+    border-radius: 999px;
+    border: none;
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
+    &:active,
+    &.is-active {
+      background-color: var(--ti-mobile-button-bg-color-active);
+    }
 
-  &:active,
-  &.is-active {
-    &::before {
-      opacity: 0.1;
+    &.is-disabled {
+      cursor: not-allowed;
+      color: var(--ti-mobile-button-text-color-disabled);
+      background-color: var(--ti-mobile-button-bg-color-disabled);
+    }
+
+    &:hover {
+      background-color: var(--ti-mobile-button-bg-color-black);
+    }
+
+    &.is-loading {
+      background-color: var(--ti-mobile-button-bg-color-active);
     }
   }
 
-  &.is-disabled,
-  &.is-disabled:active,
-  &.is-disabled.is-active {
-    cursor: not-allowed;
-    .button-color(var(--ti-mobile-button-text-color-disabled),
-    var(--ti-mobile-button-bg-color-disabled),
-      var(--ti-mobile-button-bg-color-disabled));
-  }
-
-  .is-icon {
-    fill: var(--ti-mobile-button-text-color-white);
-    font-size: var(--ti-mobile-button-font-size-default);
-  }
-
-  &--default {
-    .button-color(var(--ti-mobile-button-text-color-default),
-      var(--ti-mobile-button-border-color),
-      var(--ti-mobile-button-bg-color-default));
+  &--icon {
+    color: var(--ti-mobile-button-text-color-black);
+    background-color: var(--ti-mobile-button-bg-color-white);
+    min-width: 0 !important;
+    padding: 0 !important;
+    line-height: 0;
+    border: none;
 
     .is-icon {
-      fill: var(--ti-mobile-button-text-color-default);
+      fill: var(--ti-mobile-button-text-color-black);
+      width: var(--ti-mobile-button-icon-size-large);
+      height: var(--ti-mobile-button-icon-size-large);
     }
 
+    .small {
+      width: var(--ti-mobile-button-icon-size-small);
+      height: var(--ti-mobile-button-icon-size-small);
+    }
+
+    &:active .is-icon,
+    &.is-active {
+      fill: var(--ti-mobile-button-bg-color-active);
+    }
+
+    &.is-disabled,
+    &.is-disabled:active,
+    &.is-disabled.is-active,
     &.is-disabled .is-icon {
-      fill: var(--ti-mobile-button-text-color-white);
+      cursor: not-allowed;
+      fill: var(--ti-mobile-button-text-color-disabled);
     }
-  }
 
-  &&--default {
-    &.is-loading svg {
-      fill: #666;
-    }
-  }
-
-  &--primary {
-    .button-type(var(--ti-mobile-button-text-color-white),
-      var(--ti-mobile-button-bg-color-primary));
-
-    &.is-plain {
-      .button-plain(var(--ti-mobile-button-bg-color-primary));
-    }
-  }
-
-  &--success {
-    .button-type(var(--ti-mobile-button-text-color-white),
-      var(--ti-mobile-button-bg-color-success));
-
-    &.is-plain {
-      .button-plain(var(--ti-mobile-button-bg-color-success));
-    }
-  }
-
-  &--warning {
-    .button-type(var(--ti-mobile-button-text-color-white),
-      var(--ti-mobile-button-bg-color-warning));
-
-    &.is-plain {
-      .button-plain(var(--ti-mobile-button-bg-color-warning));
+    &.is-disabled {
+      color: var(--ti-mobile-button-text-color-disabled);
+      background-color: var(--ti-mobile-button-bg-color-white);
     }
   }
 
   &--danger {
-    .button-type(var(--ti-mobile-button-text-color-white),
-      var(--ti-mobile-button-bg-color-danger));
+    color: var(--ti-mobile-button-text-color-danger);
+    background-color: var(--ti-mobile-button-bg-color-white);
+    border-color: var(--ti-mobile-button-text-color-danger);
+    border-radius: 999px;
 
-    &.is-plain {
-      .button-plain(var(--ti-mobile-button-bg-color-danger));
-    }
-  }
-
-  &--info {
-    .button-type(var(--ti-mobile-button-text-color-white),
-      var(--ti-mobile-button-bg-color-info));
-
-    &.is-plain {
-      .button-plain(var(--ti-mobile-button-bg-color-info));
+    &.is-disabled {
+      cursor: not-allowed;
+      color: var(--ti-mobile-button-text-color-disabled);
+      background-color: var(--ti-mobile-button-bg-color-disabled);
+      border: none;
     }
   }
 
   &--text {
-    .button-text(var(--ti-mobile-button-text-color),
-      var(--ti-mobile-button-text-color-hover),
-      var(--ti-mobile-button-text-color-active),
-      var(--ti-mobile-button-text-color-disabled));
+    color: var(--ti-mobile-button-text-color-blue);
+    background-color: var(--ti-mobile-button-bg-color-white);
+    border: none;
+    min-width: 0 !important;
+    padding: 0 !important;
+
+    &.is-disabled {
+      color: var(--ti-mobile-button-text-color-disabled);
+      background-color: var(--ti-mobile-button-bg-color-white);
+    }
   }
 
   &--secondary {
-    .button-type(var(--ti-mobile-button-text-color-default),
-       var(--ti-mobile-button-bg-color-secondary));
-
-    &.is-plain {
-      .button-plain(var(--ti-mobile-button-bg-color-secondary));
-    }
-  }
-
-  &--default {
-    .button-color(var(--ti-mobile-button-text-color-default),
-      var(--ti-mobile-button-text-color-disabled),
-      var(--ti-mobile-button-text-color-white));
+    color: var(--ti-mobile-button-text-color-black);
+    background-color: var(--ti-mobile-button-bg-color-white);
+    border-radius: 999px;
 
     &.is-disabled {
-      .button-color(var(--ti-mobile-button-text-color-disabled),
-        var(--ti-mobile-button-text-color-disabled),
-        var(--ti-mobile-button-bg-color-white));
+      cursor: not-allowed;
+      color: var(--ti-mobile-button-text-color-disabled);
+      background-color: var(--ti-mobile-button-bg-color-disabled);
+      border: none;
     }
   }
 
-  &--large {
-    padding: 0 20px;
-  }
-
-  &--medium {
-    padding: 0 16px;
-    line-height: 36px;
-
-    .button-size(var(--ti-mobile-button-height-medium),
-      var(--ti-mobile-button-font-size-medium,));
-  }
-
   &--small {
-    padding: 0 12px;
-    line-height: 28px;
+    padding: 0 var(--ti-mobile-button-padding-small);
+    height: var(--ti-mobile-button-height-small);
+    min-width: var(--ti-mobile-button-min-width-small);
+    line-height: var(--ti-mobile-button-height-small);
+    font-size: var(--ti-mobile-button-font-size-small);
 
-    .button-size(var(--ti-mobile-button-height-small),
-      var(--ti-mobile-button-font-size-small));
-  }
-
-  &--mini {
-    padding: 0 8px;
-    line-height: 22px;
-
-    .button-size(var(--ti-mobile-button-height-mini),
-      var(--ti-mobile-button-font-size-mini));
+    .is-icon {
+      width: var(--ti-mobile-button-icon-size-small);
+      height: var(--ti-mobile-button-icon-size-small);
+    }
   }
 
   &.is-loading {
@@ -220,17 +174,42 @@
       font-size: var(--ti-mobile-button-font-size-default);
     }
   }
-
-  &.is-round {
-    border-radius: 999px;
-  }
 }
 
-.@{css-prefix-iconfont}-loading {
-  margin-right: 4px;
-  font-size: 16px;
-  line-height: 1;
-  animation: rotating 2s linear infinite;
+.@{button-prefix-cls}-loading {
+  width: var(--ti-mobile-button-loading-size);
+  height: var(--ti-mobile-button-loading-size);
+  border-radius: 50%;
+  position: relative;
+  float: left;
+  animation: rotating 1.5s linear infinite;
+  top: calc(50% - 8px);
+  margin-right: var(--ti-mobile-button-loading-padding);
+
+  &-white {
+    background-image: conic-gradient(rgb(255 255 255/ 0%), rgb(255 255 255 / 100%));
+
+    .@{button-prefix-cls}-loading-inner {
+      background: var(--ti-mobile-button-bg-color-active);
+    }
+  }
+
+  &-black {
+    background-image: conic-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+
+    .@{button-prefix-cls}-loading-inner {
+      background: var(--ti-mobile-button-bg-color-white);
+    }
+  }
+
+  &-inner {
+    width: var(--ti-mobile-button-loading-size-inner);
+    height: var(--ti-mobile-button-loading-size-inner);
+    border-radius: 50%;
+    position: absolute;
+    top: var(--ti-mobile-button-loading-padding-size-inner);
+    left: var(--ti-mobile-button-loading-padding-size-inner);
+  }
 }
 
 @keyframes rotating {
diff --git a/packages/theme-mobile/src/button/vars.less b/packages/theme-mobile/src/button/vars.less
index 724060bb8..8c3d98df2 100644
--- a/packages/theme-mobile/src/button/vars.less
+++ b/packages/theme-mobile/src/button/vars.less
@@ -1,24 +1,52 @@
 :root {
-  --ti-mobile-button-height: 42px;
-  --ti-mobile-button-font-size-default: 16px;
-  --ti-mobile-button-text-color-white: var(--ti-mobile-common-color-text-white, #fff);
-  --ti-mobile-button-text-color-disabled: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb);
-  --ti-mobile-button-text-color-default: var(--ti-mobile-common-color-text-primary, #191919);
-  --ti-mobile-button-border-color: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb);
-  --ti-mobile-button-bg-color-default: var(--ti-mobile-common-bg-color-white, #fff);
-  --ti-mobile-button-bg-color-primary: var(--ti-mobile-common-color-error-figure-3, #1e8aff);
-  --ti-mobile-button-bg-color-success: var(--ti-mobile-common-color-warning-figure-3, #1ebe40);
-  --ti-mobile-button-bg-color-warning: var(--ti-mobile-common-color-error-figure-2, #fccd32);
-  --ti-mobile-button-bg-color-danger: var(--ti-mobile-common-color-error-figure-1, #eb5454);
-  --ti-mobile-button-bg-color-disabled: var(--ti-mobile-common-bg-color-disabled, #e8e8e8);
-  --ti-mobile-button-bg-color-info: #333;
-  --ti-mobile-button-height-medium: 36px;
-  --ti-mobile-button-font-size-medium: 14px;
+  // 按钮高度-大
+  --ti-mobile-button-height-large: 40px;
+  // 按钮文字大小-大
+  --ti-mobile-button-font-size-large: var(--ti-mobile-font-size-m, 14px);
+  // icon尺寸-大
+  --ti-mobile-button-icon-size-large: 24px;
+  // 按钮左右边距-大
+  --ti-mobile-button-padding-large: var(--ti-mobile-space-8x, 32px);
+  // 按钮最小宽度-大
+  --ti-mobile-button-min-width-large: 112px;
+  // 按钮高度-小
   --ti-mobile-button-height-small: 28px;
-  --ti-mobile-button-font-size-small: 12px;
-  --ti-mobile-button-height-mini: 22px;
-  --ti-mobile-button-font-size-mini: 10px;
-  --ti-mobile-button-text-color: var(--ti-mobile-common-color-link-highlight, #4a79fe);
-  --ti-mobile-button-text-color-hover: #6e94fe;
-  --ti-mobile-button-text-color-active: var(--ti-mobile-common-color-link-highlight, #4a79fe);
+  // 按钮文字大小-小
+  --ti-mobile-button-font-size-small: var(--ti-mobile-font-size-s, 12px);
+  // icon尺寸-小
+  --ti-mobile-button-icon-size-small: 16px;
+  // 按钮左右边距-小
+  --ti-mobile-button-padding-small: var(--ti-mobile-space-4x, 15px);
+  // 按钮最小宽度-小
+  --ti-mobile-button-min-width-small: 72px;
+  // 加载图标大小
+  --ti-mobile-button-loading-size: 16px;
+  // 加载图标和文字间距
+  --ti-mobile-button-loading-padding: var(--ti-mobile-space-1x, 4px);
+  // 边框尺寸
+  --ti-mobile-button-border-width: var(--ti-mobile-border-width, 1px);
+  // 加载图标内宽度
+  --ti-mobile-button-loading-size-inner: 12px;
+  // 加载图标内间距
+  --ti-mobile-button-loading-padding-size-inner: 2px;
+  // 按钮文字颜色-白
+  --ti-mobile-button-text-color-white: var(--ti-mobile-color-text-inverse, #fff);
+  // 按钮文字颜色-危险
+  --ti-mobile-button-text-color-danger: var(--ti-mobile-color-error, #f23030);
+  // 按钮文字颜色-不可用
+  --ti-mobile-button-text-color-disabled: var(--ti-mobile-color-text-disabled, #c2c2c2);
+  // 按钮文字颜色-黑
+  --ti-mobile-button-text-color-black: var(--ti-mobile-color-text-primary, #191919);
+  // 按钮文字颜色-蓝
+  --ti-mobile-button-text-color-blue: var(--ti-mobile-color-text-link, #1476ff);
+  // 边框颜色
+  --ti-mobile-button-border-color: var(--ti-mobile-color-border-default-2, #595959);
+  // 背景色-默认
+  --ti-mobile-button-bg-color-white: var(--ti-mobile-color-bg-container-1, #fff);
+  // 背景色-主要
+  --ti-mobile-button-bg-color-black: var(--ti-mobile-color-bg-primary-default, #191919);
+  // 背景色-不可用
+  --ti-mobile-button-bg-color-disabled: var(--ti-mobile-color-bg-disabled, #f0f0f0);
+  // 按钮点击背景色
+  --ti-mobile-button-bg-color-active: var(--ti-mobile-color-bg-primary-active, #595959);
 }
diff --git a/packages/vue/src/button/src/index.ts b/packages/vue/src/button/src/index.ts
index 27d538f3c..2c74bd21f 100644
--- a/packages/vue/src/button/src/index.ts
+++ b/packages/vue/src/button/src/index.ts
@@ -39,7 +39,7 @@ export const buttonProps = {
     type: String,
     default: '',
     validator(val: string) {
-      return ['large', 'medium', 'small', 'mini', ''].includes(val)
+      return ['large', 'medium', 'small', 'mini'].includes(val)
     }
   },
   round: Boolean,
diff --git a/packages/vue/src/button/src/mobile.vue b/packages/vue/src/button/src/mobile.vue
index a8c1dceae..685d53186 100644
--- a/packages/vue/src/button/src/mobile.vue
+++ b/packages/vue/src/button/src/mobile.vue
@@ -20,15 +20,23 @@
       size ? 'tiny-mobile-button--' + size : '',
       {
         'is-disabled': state.buttonDisabled,
-        'is-loading': loading,
-        'is-plain': state.plain,
-        'is-round': round
+        'is-loading': loading
       }
     ]"
     v-bind="a($attrs, ['class', 'style'], true)"
   >
-    <icon-loading v-if="loading" class="tiny-icon-loading" />
-    <component v-if="icon && !loading" :is="icon" class="tiny-icon is-icon" />
+    <template v-if="loading">
+      <div
+        :class="[
+          'tiny-mobile-button-loading',
+          'tiny-mobile-button-loading-' + (type === 'primary' ? 'white' : 'black')
+        ]"
+      >
+        <div class="tiny-mobile-button-loading-inner"></div>
+      </div>
+    </template>
+    <component v-if="icon && !loading" :is="icon" :class="['tiny-icon', 'is-icon', text ? 'small' : null]" />
+
     <slot>
       <span :style="{ marginLeft: text && (icon || loading) ? '4px' : 0 }">{{ text }}</span>
     </slot>
@@ -38,26 +46,12 @@
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/button/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
-import { iconLoading } from '@opentiny/vue-icon'
 import '@opentiny/vue-theme-mobile/button/index.less'
 
 export default defineComponent({
   emits: ['hook-updated', 'click'],
-  props: [
-    ...props,
-    'type',
-    'text',
-    'size',
-    'icon',
-    'resetTime',
-    'nativeType',
-    'loading',
-    'disabled',
-    'plain',
-    'round',
-    'customClass'
-  ],
-  components: { IconLoading: iconLoading() },
+  props: [...props, 'type', 'text', 'size', 'icon', 'resetTime', 'nativeType', 'loading', 'disabled', 'customClass'],
+  components: {},
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }