From 8ead3e56c787758fc4e67a16f12aa76f80bd41f7 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Fri, 21 Apr 2023 16:00:30 +0800
Subject: [PATCH] fix(button): using new style (#612)

* fix(button): using new style

* feat(button): finish new style

* refactor: remove button group

* fix: update common & test

* test: update snapshot
---
 src/_common                                   |    2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   36 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   72 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   48 +-
 src/button-group/button-group.md              |    1 -
 src/button-group/button-group.vue             |   26 -
 src/button-group/index.ts                     |    7 -
 src/button-group/style/css.js                 |    1 -
 src/button-group/style/index.js               |    1 -
 .../__test__/__snapshots__/demo.test.jsx.snap | 2815 ++++++++---------
 .../__snapshots__/index.test.jsx.snap         |   34 -
 src/button/__test__/demo.test.jsx             |   14 +-
 src/button/__test__/index.test.jsx            |   83 +-
 src/button/button.en-US.md                    |   27 +
 src/button/button.md                          |   11 +-
 src/button/button.vue                         |   40 +-
 src/button/demos/base.vue                     |   63 +-
 src/button/demos/block.vue                    |   11 +
 src/button/demos/ghost.vue                    |   19 +
 src/button/demos/group.vue                    |   15 +
 src/button/demos/icon.vue                     |   30 +
 src/button/demos/mobile.vue                   |   53 +-
 src/button/demos/shape.vue                    |   29 +
 src/button/demos/size.vue                     |   40 +-
 src/button/demos/status.vue                   |   66 +-
 src/button/demos/test.vue                     |   22 -
 src/button/demos/theme.vue                    |   38 +
 src/button/props.ts                           |   23 +-
 src/button/style/index.js                     |    2 +-
 src/button/type.ts                            |   18 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   72 +-
 .../__snapshots__/index.test.jsx.snap         |    6 +-
 src/components.ts                             |    1 -
 .../__test__/__snapshots__/demo.test.jsx.snap |  192 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   24 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   12 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   30 +-
 .../__snapshots__/index.test.jsx.snap         |    6 +-
 src/fab/__test__/index.test.jsx               |    4 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   42 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   54 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   12 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   12 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   18 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  108 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   12 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   84 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   24 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |    6 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   36 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  310 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |   18 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  132 +-
 53 files changed, 2548 insertions(+), 2314 deletions(-)
 delete mode 100644 src/button-group/button-group.md
 delete mode 100644 src/button-group/button-group.vue
 delete mode 100644 src/button-group/index.ts
 delete mode 100644 src/button-group/style/css.js
 delete mode 100644 src/button-group/style/index.js
 delete mode 100644 src/button/__test__/__snapshots__/index.test.jsx.snap
 create mode 100644 src/button/button.en-US.md
 create mode 100644 src/button/demos/block.vue
 create mode 100644 src/button/demos/ghost.vue
 create mode 100644 src/button/demos/group.vue
 create mode 100644 src/button/demos/icon.vue
 create mode 100644 src/button/demos/shape.vue
 delete mode 100644 src/button/demos/test.vue
 create mode 100644 src/button/demos/theme.vue

diff --git a/src/_common b/src/_common
index b3064b7c9..16fb8b742 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit b3064b7c99169817b49bef8822b5545c68ffa7cd
+Subproject commit 16fb8b742fd0c7b5ebb615392493486f06ed0116
diff --git a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
index 0ca7dfc86..a3614174d 100644
--- a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
@@ -11,18 +11,20 @@ exports[`ActionSheet > ActionSheet gridMultipleVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-1719f7aa=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         宫格型-多页
         
       </span>
+      <!---->
     </button>
   </div>
   <teleport-stub
@@ -1116,18 +1118,20 @@ exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-06f7cca3=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         宫格型
         
       </span>
+      <!---->
     </button>
   </div>
   <teleport-stub
@@ -1701,18 +1705,20 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-443785fb=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         列表型
         
       </span>
+      <!---->
     </button>
   </div>
   <teleport-stub
@@ -1852,18 +1858,20 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-443785fb=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             列表型
             
           </span>
+          <!---->
         </button>
       </div>
       <teleport-stub
@@ -1964,18 +1972,20 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-06f7cca3=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             宫格型
             
           </span>
+          <!---->
         </button>
       </div>
       <teleport-stub
@@ -2542,18 +2552,20 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-1719f7aa=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             宫格型-多页
             
           </span>
+          <!---->
         </button>
       </div>
       <teleport-stub
diff --git a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
index b970abe58..27cece922 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
@@ -11,33 +11,37 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-924378ec=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         半圆白底
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-924378ec=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         半圆黑底
         
       </span>
+      <!---->
     </button>
   </div>
   <div
@@ -120,63 +124,71 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-915cc230=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             圆角白底
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-915cc230=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             圆角黑底
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-915cc230=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             圆白底纯图标
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-915cc230=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             圆黑底纯图标
             
           </span>
+          <!---->
         </button>
       </div>
       <div
@@ -237,33 +249,37 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-924378ec=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             半圆白底
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-924378ec=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             半圆黑底
             
           </span>
+          <!---->
         </button>
       </div>
       <div
@@ -480,63 +496,71 @@ exports[`BackTop > BackTop roundVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-915cc230=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         圆角白底
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-915cc230=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         圆角黑底
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-915cc230=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         圆白底纯图标
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-915cc230=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         圆黑底纯图标
         
       </span>
+      <!---->
     </button>
   </div>
   <div
diff --git a/src/badge/__test__/__snapshots__/demo.test.jsx.snap b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
index 2ba5f8961..03b04e2a8 100644
--- a/src/badge/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
@@ -68,17 +68,19 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+          class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             按钮
             
           </span>
+          <!---->
         </button>
         
       </div>
@@ -159,17 +161,19 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+          class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             按钮
             
           </span>
+          <!---->
         </button>
         
       </div>
@@ -203,8 +207,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         <button
           aria-disabled="false"
           aria-label="通知"
-          class="t-button t-size-l t-button--base t-button--default t-button--shape-square"
+          class="t-button t-button--size-large t-button--base t-button--default t-button--square"
           role="button"
+          type="button"
         >
           <svg
             class="t-icon t-icon-notification"
@@ -220,10 +225,11 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
             />
           </svg>
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             <!---->
           </span>
+          <!---->
         </button>
         
       </div>
@@ -339,17 +345,19 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               
               <button
                 aria-disabled="false"
-                class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+                class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
                 role="button"
+                type="button"
               >
                 <!---->
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   
                   按钮
                   
                 </span>
+                <!---->
               </button>
               
             </div>
@@ -430,17 +438,19 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               
               <button
                 aria-disabled="false"
-                class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+                class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
                 role="button"
+                type="button"
               >
                 <!---->
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   
                   按钮
                   
                 </span>
+                <!---->
               </button>
               
             </div>
@@ -474,8 +484,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               <button
                 aria-disabled="false"
                 aria-label="通知"
-                class="t-button t-size-l t-button--base t-button--default t-button--shape-square"
+                class="t-button t-button--size-large t-button--base t-button--default t-button--square"
                 role="button"
+                type="button"
               >
                 <svg
                   class="t-icon t-icon-notification"
@@ -491,10 +502,11 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                   />
                 </svg>
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   <!---->
                 </span>
+                <!---->
               </button>
               
             </div>
@@ -622,8 +634,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               <button
                 aria-disabled="false"
                 aria-label="商店"
-                class="t-button t-size-l t-button--base t-button--default t-button--shape-square"
+                class="t-button t-button--size-large t-button--base t-button--default t-button--square"
                 role="button"
+                type="button"
               >
                 <svg
                   class="t-icon t-icon-shop"
@@ -639,10 +652,11 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                   />
                 </svg>
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   <!---->
                 </span>
+                <!---->
               </button>
               
             </div>
@@ -1061,8 +1075,9 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
         <button
           aria-disabled="false"
           aria-label="商店"
-          class="t-button t-size-l t-button--base t-button--default t-button--shape-square"
+          class="t-button t-button--size-large t-button--base t-button--default t-button--square"
           role="button"
+          type="button"
         >
           <svg
             class="t-icon t-icon-shop"
@@ -1078,10 +1093,11 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
             />
           </svg>
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             <!---->
           </span>
+          <!---->
         </button>
         
       </div>
diff --git a/src/button-group/button-group.md b/src/button-group/button-group.md
deleted file mode 100644
index 6b237f5a4..000000000
--- a/src/button-group/button-group.md
+++ /dev/null
@@ -1 +0,0 @@
-# 按钮组（展示模块）
diff --git a/src/button-group/button-group.vue b/src/button-group/button-group.vue
deleted file mode 100644
index d121ba91f..000000000
--- a/src/button-group/button-group.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div :class="classes">
-    <slot></slot>
-  </div>
-</template>
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import config from '../config';
-
-const { prefix } = config;
-const name = `${prefix}-button-group`;
-
-export default defineComponent({
-  name,
-  props: {
-    type: {
-      type: String,
-      default: 'default',
-    },
-  },
-  setup(props) {
-    const classes = computed(() => [`${name}`, `${name}--${props.type}`]);
-    return { classes };
-  },
-});
-</script>
diff --git a/src/button-group/index.ts b/src/button-group/index.ts
deleted file mode 100644
index 8bf805cb1..000000000
--- a/src/button-group/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import ButtonGroup from './button-group.vue';
-import { withInstall, WithInstallType } from '../shared';
-
-import './style';
-
-const _ButtonGroup: WithInstallType<typeof ButtonGroup> = withInstall(ButtonGroup);
-export default _ButtonGroup;
diff --git a/src/button-group/style/css.js b/src/button-group/style/css.js
deleted file mode 100644
index 6a9a4b132..000000000
--- a/src/button-group/style/css.js
+++ /dev/null
@@ -1 +0,0 @@
-import './index.css';
diff --git a/src/button-group/style/index.js b/src/button-group/style/index.js
deleted file mode 100644
index 27ef8d907..000000000
--- a/src/button-group/style/index.js
+++ /dev/null
@@ -1 +0,0 @@
-import '../../_common/style/mobile/components/button-group/_index.less';
diff --git a/src/button/__test__/__snapshots__/demo.test.jsx.snap b/src/button/__test__/__snapshots__/demo.test.jsx.snap
index 853a7aa6f..f9b6f8bde 100644
--- a/src/button/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/button/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,381 +6,361 @@ exports[`Button > Button baseVue demo works fine 1`] = `
 >
   
   <div
-    class="button-demo"
+    class="row"
+    data-v-61a49c84=""
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+      data-v-61a49c84=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        强按钮
+        填充按钮
         
       </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
-      role="button"
-    >
       <!---->
-      <span
-        class="t-button__text"
-      >
-        
-         弱按钮 
-        
-      </span>
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+      data-v-61a49c84=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
-      >
-        
-        次按钮
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
-      role="button"
-    >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         带图标按钮 
+        填充按钮
         
       </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle t-is-block"
-      role="button"
-    >
       <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        强警告按钮
-        
-      </span>
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--danger t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"
+      data-v-61a49c84=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         弱警告按钮 
+        填充按钮
         
       </span>
+      <!---->
     </button>
   </div>
   <div
-    style="background: rgb(166, 166, 166); padding: 8px 16px; margin-bottom: 16px;"
+    class="row"
+    data-v-61a49c84=""
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-button--ghost t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
+      data-v-61a49c84=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         幽灵按钮 
+        描边按钮
         
       </span>
+      <!---->
     </button>
-  </div>
-  <div
-    class="margin-button"
-  >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--text t-button--primary t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"
+      data-v-61a49c84=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         文字按钮 
+        文字按钮
         
       </span>
+      <!---->
     </button>
   </div>
-  <div
-    class="no-border-radius margin-button"
+  
+</div>
+`;
+
+exports[`Button > Button blockVue demo works fine 1`] = `
+<div
+  class="row"
+  data-v-75d4286a=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--block"
+    data-v-75d4286a=""
+    role="button"
+    type="button"
   >
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block"
-      role="button"
+    <!---->
+    <span
+      class="t-button__content"
     >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-         通栏按钮 
-        
-      </span>
-    </button>
-  </div>
-  <div
-    class="no-border-radius no-border flex margin-button"
+      
+      填充按钮
+      
+    </span>
+    <!---->
+  </button>
+</div>
+`;
+
+exports[`Button > Button ghostVue demo works fine 1`] = `
+<div
+  class="row"
+  data-v-511c0528=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--ghost"
+    data-v-511c0528=""
+    role="button"
+    type="button"
   >
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      role="button"
+    <!---->
+    <span
+      class="t-button__content"
     >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        次按钮
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block"
-      role="button"
+      
+      幽灵按钮
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle t-button--ghost"
+    data-v-511c0528=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
     >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        主按钮
-        
-      </span>
-    </button>
-  </div>
-  <div
-    class="button-demo align-center margin-right"
+      
+      幽灵按钮
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle t-button--ghost"
+    data-v-511c0528=""
+    role="button"
+    type="button"
   >
-    <div
-      class="flex align-center margin-right"
+    <!---->
+    <span
+      class="t-button__content"
     >
-      <button
-        aria-disabled="false"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          
-          带图标按钮
-          
-        </span>
-      </button>
-      <button
-        aria-disabled="false"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-round"
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          
-          带图标按钮
-          
-        </span>
-      </button>
-    </div>
-    <div
-      class="flex align-center margin-right"
+      
+      幽灵按钮
+      
+    </span>
+    <!---->
+  </button>
+</div>
+`;
+
+exports[`Button > Button groupVue demo works fine 1`] = `
+<div
+  class="row"
+  data-v-2d21dd48=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+    data-v-2d21dd48=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
     >
-      <button
-        aria-disabled="false"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          <!---->
-        </span>
-      </button>
-      <button
-        aria-disabled="false"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-circle"
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          <!---->
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="flex align-center margin-right button-demo-loading"
+      
+      填充按钮
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+    data-v-2d21dd48=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      填充按钮
+      
+    </span>
+    <!---->
+  </button>
+</div>
+`;
+
+exports[`Button > Button iconVue demo works fine 1`] = `
+<div
+  class="row"
+  data-v-c77683a8=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+    data-v-c77683a8=""
+    role="button"
+    type="button"
+  >
+    <svg
+      class="t-icon t-icon-app"
+      fill="none"
+      height="1em"
+      style="font-size: 24px;"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
+    <span
+      class="t-button__content"
+    >
+      
+      填充按钮
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--loading"
+    data-v-c77683a8=""
+    role="button"
+    type="button"
   >
     <div
-      class="button-demo flex"
+      class="t-loading"
+      style="font-size: 20px;"
     >
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--base t-button--primary t-button--shape-square t-is-loading"
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-loading"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          <!---->
-        </span>
-      </button>
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-loading"
-        role="button"
+      
+      <svg
+        class="t-loading__gradient t-icon-loading"
+        height="1em"
+        style="animation-duration: 800ms; width: 20px; height: 20px;"
+        version="1.1"
+        viewBox="0 0 12 12"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <svg
-          class="t-icon t-icon-loading"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <foreignobject
+          height="12"
+          width="12"
+          x="0"
+          y="0"
         >
-          <path
-            d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
+          <div
+            class="t-loading__gradient-conic"
           />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          
-          加载中...
-          
-        </span>
-      </button>
+        </foreignobject>
+      </svg>
+      
+      <!--v-if-->
+      <!---->
     </div>
-  </div>
-  
+    <span
+      class="t-button__content"
+    >
+      
+      加载中
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--square"
+    data-v-c77683a8=""
+    role="button"
+    type="button"
+  >
+    <svg
+      class="t-icon t-icon-search"
+      fill="none"
+      height="1em"
+      style="font-size: 24px;"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
+    <span
+      class="t-button__content"
+    >
+      <!---->
+    </span>
+    <!---->
+  </button>
 </div>
 `;
 
 exports[`Button > Button mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
+  data-v-7c375b15=""
 >
   <h1
     class="title"
+    data-v-7c375b15=""
   >
     Button 按钮
   </h1>
   <p
     class="summary"
+    data-v-7c375b15=""
   >
     按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
   </p>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-7c375b15=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -388,7 +368,7 @@ exports[`Button > Button mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
@@ -402,1824 +382,1567 @@ exports[`Button > Button mobileVue demo works fine 1`] = `
       
       
       <div
-        class="button-demo"
+        class="row"
+        data-v-61a49c84=""
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+          data-v-61a49c84=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            强按钮
+            填充按钮
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+          data-v-61a49c84=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             弱按钮 
+            填充按钮
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"
+          data-v-61a49c84=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            次按钮
+            填充按钮
             
           </span>
+          <!---->
         </button>
+      </div>
+      <div
+        class="row"
+        data-v-61a49c84=""
+      >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
+          data-v-61a49c84=""
           role="button"
+          type="button"
         >
-          <svg
-            class="t-icon t-icon-app"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
+          <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             带图标按钮 
+            描边按钮
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"
+          data-v-61a49c84=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            强警告按钮
+            文字按钮
             
           </span>
+          <!---->
         </button>
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-7c375b15=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        图标按钮
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="row"
+        data-v-7c375b15=""
+        data-v-c77683a8=""
+      >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--danger t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+          data-v-c77683a8=""
           role="button"
+          type="button"
         >
-          <!---->
-          <span
-            class="t-button__text"
+          <svg
+            class="t-icon t-icon-app"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          <span
+            class="t-button__content"
           >
             
-             弱警告按钮 
+            填充按钮
             
           </span>
+          <!---->
         </button>
-      </div>
-      <div
-        style="background: rgb(166, 166, 166); padding: 8px 16px; margin-bottom: 16px;"
-      >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-button--ghost t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--loading"
+          data-v-c77683a8=""
           role="button"
+          type="button"
         >
-          <!---->
+          <div
+            class="t-loading"
+            style="font-size: 20px;"
+          >
+            
+            <svg
+              class="t-loading__gradient t-icon-loading"
+              height="1em"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
+              version="1.1"
+              viewBox="0 0 12 12"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <foreignobject
+                height="12"
+                width="12"
+                x="0"
+                y="0"
+              >
+                <div
+                  class="t-loading__gradient-conic"
+                />
+              </foreignobject>
+            </svg>
+            
+            <!--v-if-->
+            <!---->
+          </div>
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             幽灵按钮 
+            加载中
             
           </span>
+          <!---->
         </button>
-      </div>
-      <div
-        class="margin-button"
-      >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--text t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--square"
+          data-v-c77683a8=""
           role="button"
+          type="button"
         >
-          <!---->
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
-            
-             文字按钮 
-            
+            <!---->
           </span>
+          <!---->
         </button>
       </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-7c375b15=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        幽灵按钮
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
       <div
-        class="no-border-radius margin-button"
+        class="row"
+        data-v-511c0528=""
+        data-v-7c375b15=""
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--ghost"
+          data-v-511c0528=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             通栏按钮 
+            幽灵按钮
             
           </span>
+          <!---->
         </button>
-      </div>
-      <div
-        class="no-border-radius no-border flex margin-button"
-      >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle t-button--ghost"
+          data-v-511c0528=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            次按钮
+            幽灵按钮
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle t-button--ghost"
+          data-v-511c0528=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            主按钮
+            幽灵按钮
             
           </span>
+          <!---->
         </button>
       </div>
-      <div
-        class="button-demo align-center margin-right"
-      >
-        <div
-          class="flex align-center margin-right"
-        >
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              带图标按钮
-              
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-round"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              带图标按钮
-              
-            </span>
-          </button>
-        </div>
-        <div
-          class="flex align-center margin-right"
-        >
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-circle"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="flex align-center margin-right button-demo-loading"
-      >
-        <div
-          class="button-demo flex"
-        >
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-square t-is-loading"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-loading"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-loading"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-loading"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              加载中...
-              
-            </span>
-          </button>
-        </div>
-      </div>
-      
       
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block"
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-7c375b15=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
     >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        02 状态
-      </h2>
+      <!--v-if-->
       <p
-        class="tdesign-mobile-demo-block__summary"
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        按钮禁用态
+        组合按钮
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
-      
       <div
-        class="button-demo"
+        class="row"
+        data-v-2d21dd48=""
+        data-v-7c375b15=""
       >
         <button
-          aria-disabled="true"
-          class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
-          disabled=""
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+          data-v-2d21dd48=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            强按钮
+            填充按钮
             
           </span>
+          <!---->
         </button>
         <button
-          aria-disabled="true"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
-          disabled=""
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+          data-v-2d21dd48=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             弱按钮 
+            填充按钮
             
           </span>
+          <!---->
         </button>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-7c375b15=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        通栏按钮
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="row"
+        data-v-75d4286a=""
+        data-v-7c375b15=""
+      >
         <button
-          aria-disabled="true"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block t-is-disabled"
-          disabled=""
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--block"
+          data-v-75d4286a=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            次按钮
+            填充按钮
             
           </span>
+          <!---->
         </button>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-7c375b15=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        02 组件状态
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        按钮禁用态
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="row"
+        data-v-096a7265=""
+      >
         <button
           aria-disabled="true"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--disabled"
+          data-v-096a7265=""
           disabled=""
           role="button"
+          type="button"
         >
-          <svg
-            class="t-icon t-icon-app"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
+          <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             带图标按钮 
+            填充按钮
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="true"
-          class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle t-is-block t-is-disabled"
+          class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle t-button--disabled"
+          data-v-096a7265=""
           disabled=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            强警告按钮
+            填充按钮
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="true"
-          class="t-button t-size-l t-button--outline t-button--danger t-button--shape-rectangle t-is-block t-is-disabled"
+          class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle t-button--disabled"
+          data-v-096a7265=""
           disabled=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             弱警告按钮 
+            填充按钮
             
           </span>
+          <!---->
         </button>
       </div>
       <div
-        style="background: rgb(166, 166, 166); padding: 8px 16px; margin-bottom: 16px;"
+        class="row"
+        data-v-096a7265=""
       >
         <button
           aria-disabled="true"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-button--ghost t-is-block t-is-disabled"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--disabled"
+          data-v-096a7265=""
           disabled=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             幽灵按钮 
+            描边按钮
             
           </span>
+          <!---->
         </button>
-      </div>
-      <div
-        class="margin-button"
-      >
         <button
           aria-disabled="true"
-          class="t-button t-size-l t-button--text t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
+          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-button--disabled"
+          data-v-096a7265=""
           disabled=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             文字按钮 
+            文字按钮
             
           </span>
+          <!---->
         </button>
       </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-7c375b15=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        03 组件样式
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        按钮尺寸
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
       <div
-        class="no-border-radius margin-button"
+        class="row"
+        data-v-0a874498=""
+        data-v-7c375b15=""
       >
         <button
-          aria-disabled="true"
-          class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
-          disabled=""
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+          data-v-0a874498=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-             通栏按钮 
+            按钮 48
             
           </span>
+          <!---->
         </button>
-      </div>
-      <div
-        class="no-border-radius no-border flex margin-button"
-      >
         <button
-          aria-disabled="true"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block t-is-disabled"
-          disabled=""
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+          data-v-0a874498=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            次按钮
+            按钮 40
             
           </span>
+          <!---->
         </button>
         <button
-          aria-disabled="true"
-          class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
-          disabled=""
+          aria-disabled="false"
+          class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
+          data-v-0a874498=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
-            主按钮
+            按钮 32
             
           </span>
+          <!---->
         </button>
-      </div>
-      <div
-        class="button-demo align-center margin-right"
-      >
-        <div
-          class="flex align-center margin-right"
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-extra-small t-button--base t-button--primary t-button--rectangle"
+          data-v-0a874498=""
+          role="button"
+          type="button"
         >
-          <button
-            aria-disabled="true"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-disabled"
-            disabled=""
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              带图标按钮
-              
-            </span>
-          </button>
-          <button
-            aria-disabled="true"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-round t-is-disabled"
-            disabled=""
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              带图标按钮
-              
-            </span>
-          </button>
-        </div>
-        <div
-          class="flex align-center margin-right"
-        >
-          <button
-            aria-disabled="true"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-square t-is-disabled"
-            disabled=""
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="true"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-circle t-is-disabled"
-            disabled=""
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="flex align-center margin-right button-demo-loading"
-      >
-        <div
-          class="button-demo flex"
-        >
-          <button
-            aria-disabled="true"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-square t-is-disabled t-is-loading"
-            disabled=""
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-loading"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="true"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-disabled t-is-loading"
-            disabled=""
-            role="button"
+          <!---->
+          <span
+            class="t-button__content"
           >
-            <svg
-              class="t-icon t-icon-loading"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              加载中...
-              
-            </span>
-          </button>
-        </div>
+            
+            按钮 28
+            
+          </span>
+          <!---->
+        </button>
       </div>
       
-      
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block"
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-7c375b15=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
     >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        03 规格
-      </h2>
+      <!--v-if-->
       <p
-        class="tdesign-mobile-demo-block__summary"
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        按钮尺寸
+        按钮形状
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
       <div
-        class="button-demo"
+        class="row"
+        data-v-3fc3ed04=""
       >
-        
-        <div
-          class="flex align-center margin-right"
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+          data-v-3fc3ed04=""
+          role="button"
+          type="button"
         >
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle"
-            role="button"
+          <!---->
+          <span
+            class="t-button__content"
           >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              按钮 44
-              
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-            role="button"
+            
+            填充按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          aria-label="搜索"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--square"
+          data-v-3fc3ed04=""
+          role="button"
+          type="button"
+        >
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              按钮 40
-              
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
-            role="button"
+            <path
+              d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          <span
+            class="t-button__content"
           >
             <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              按钮 36
-              
-            </span>
-          </button>
-        </div>
-        <div
-          class="flex align-center margin-right"
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--round"
+          data-v-3fc3ed04=""
+          role="button"
+          type="button"
         >
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-round"
-            role="button"
+          <!---->
+          <span
+            class="t-button__content"
           >
             
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
+            填充按钮
             
-            <span
-              class="t-button__text"
-            >
-              
-               按钮 
-              
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-round"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              按钮
-              
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-s t-button--base t-button--primary t-button--shape-round"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              
-              按钮
-              
-            </span>
-          </button>
-        </div>
-        <div
-          class="flex align-center margin-right"
-        >
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-square"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-s t-button--base t-button--primary t-button--shape-square"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-        </div>
-        <div
-          class="flex align-center margin-right"
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          aria-label="搜索"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--circle"
+          data-v-3fc3ed04=""
+          role="button"
+          type="button"
         >
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-circle"
-            role="button"
-          >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-circle"
-            role="button"
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-s t-button--base t-button--primary t-button--shape-circle"
-            role="button"
+            <path
+              d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          <span
+            class="t-button__content"
           >
-            <svg
-              class="t-icon t-icon-app"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-            <span
-              class="t-button__text"
-            >
-              <!---->
-            </span>
-          </button>
-        </div>
-        
+            <!---->
+          </span>
+          <!---->
+        </button>
       </div>
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--block rectangle-button"
+        data-v-3fc3ed04=""
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+          填充按钮
+          
+        </span>
+        <!---->
+      </button>
+      
       
     </div>
   </div>
-</div>
-`;
-
-exports[`Button > Button sizeVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-  
   <div
-    class="flex align-center margin-right"
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-7c375b15=""
   >
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle"
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        按钮 44
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        按钮 40
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
-      role="button"
+    <div
+      class="tdesign-mobile-demo-block__header"
     >
-      <!---->
-      <span
-        class="t-button__text"
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        
-        按钮 36
-        
-      </span>
-    </button>
-  </div>
-  <div
-    class="flex align-center margin-right"
-  >
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-round"
-      role="button"
+        按钮主题
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
     >
       
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
       
-      <span
-        class="t-button__text"
-      >
-        
-         按钮 
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--primary t-button--shape-round"
-      role="button"
-    >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-button__text"
-      >
-        
-        按钮
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-s t-button--base t-button--primary t-button--shape-round"
-      role="button"
-    >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-button__text"
-      >
-        
-        按钮
-        
-      </span>
-    </button>
-  </div>
-  <div
-    class="flex align-center margin-right"
-  >
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-square"
-      role="button"
-    >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
+      <div
+        class="row"
+        data-v-42dcdba6=""
       >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-button__text"
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            填充按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            描边按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            文字按钮
+            
+          </span>
+          <!---->
+        </button>
+      </div>
+      <div
+        class="row"
+        data-v-42dcdba6=""
       >
-        <!---->
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
-      role="button"
-    >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            填充按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            描边按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            文字按钮
+            
+          </span>
+          <!---->
+        </button>
+      </div>
+      <div
+        class="row"
+        data-v-42dcdba6=""
       >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-button__text"
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            填充按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--outline t-button--danger t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            描边按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--danger t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            文字按钮
+            
+          </span>
+          <!---->
+        </button>
+      </div>
+      <div
+        class="row"
+        data-v-42dcdba6=""
       >
-        <!---->
-      </span>
-    </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            填充按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--outline t-button--light t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            描边按钮
+            
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--light t-button--rectangle"
+          data-v-42dcdba6=""
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            文字按钮
+            
+          </span>
+          <!---->
+        </button>
+      </div>
+      
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Button > Button shapeVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="row"
+    data-v-3fc3ed04=""
+  >
     <button
       aria-disabled="false"
-      class="t-button t-size-s t-button--base t-button--primary t-button--shape-square"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+      data-v-3fc3ed04=""
       role="button"
+      type="button"
     >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
-        <!---->
+        
+        填充按钮
+        
       </span>
+      <!---->
     </button>
-  </div>
-  <div
-    class="flex align-center margin-right"
-  >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-circle"
+      aria-label="搜索"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--square"
+      data-v-3fc3ed04=""
       role="button"
+      type="button"
     >
       <svg
-        class="t-icon t-icon-app"
+        class="t-icon t-icon-search"
         fill="none"
         height="1em"
+        style="font-size: 24px;"
         viewBox="0 0 16 16"
         width="1em"
       >
         <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+          d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
           fill="currentColor"
           fill-opacity="0.9"
         />
       </svg>
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         <!---->
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--primary t-button--shape-circle"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--round"
+      data-v-3fc3ed04=""
       role="button"
+      type="button"
     >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
-        <!---->
+        
+        填充按钮
+        
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-s t-button--base t-button--primary t-button--shape-circle"
+      aria-label="搜索"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--circle"
+      data-v-3fc3ed04=""
       role="button"
+      type="button"
     >
       <svg
-        class="t-icon t-icon-app"
+        class="t-icon t-icon-search"
         fill="none"
         height="1em"
+        style="font-size: 24px;"
         viewBox="0 0 16 16"
         width="1em"
       >
         <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+          d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
           fill="currentColor"
           fill-opacity="0.9"
         />
       </svg>
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         <!---->
       </span>
+      <!---->
     </button>
   </div>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--block rectangle-button"
+    data-v-3fc3ed04=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      填充按钮
+      
+    </span>
+    <!---->
+  </button>
   
 </div>
 `;
 
+exports[`Button > Button sizeVue demo works fine 1`] = `
+<div
+  class="row"
+  data-v-0a874498=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+    data-v-0a874498=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      按钮 48
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
+    data-v-0a874498=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      按钮 40
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
+    data-v-0a874498=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      按钮 32
+      
+    </span>
+    <!---->
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-extra-small t-button--base t-button--primary t-button--rectangle"
+    data-v-0a874498=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      按钮 28
+      
+    </span>
+    <!---->
+  </button>
+</div>
+`;
+
 exports[`Button > Button statusVue demo works fine 1`] = `
 <div
   data-v-app=""
 >
   
   <div
-    class="button-demo"
+    class="row"
+    data-v-096a7265=""
   >
     <button
       aria-disabled="true"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--disabled"
+      data-v-096a7265=""
       disabled=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        强按钮
+        填充按钮
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="true"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
+      class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle t-button--disabled"
+      data-v-096a7265=""
       disabled=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         弱按钮 
+        填充按钮
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="true"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block t-is-disabled"
+      class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle t-button--disabled"
+      data-v-096a7265=""
       disabled=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        次按钮
+        填充按钮
         
       </span>
+      <!---->
     </button>
+  </div>
+  <div
+    class="row"
+    data-v-096a7265=""
+  >
     <button
       aria-disabled="true"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--disabled"
+      data-v-096a7265=""
       disabled=""
       role="button"
+      type="button"
     >
-      <svg
-        class="t-icon t-icon-app"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         带图标按钮 
+        描边按钮
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="true"
-      class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle t-is-block t-is-disabled"
+      class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-button--disabled"
+      data-v-096a7265=""
       disabled=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        强警告按钮
+        文字按钮
         
       </span>
+      <!---->
     </button>
+  </div>
+  
+</div>
+`;
+
+exports[`Button > Button themeVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="row"
+    data-v-42dcdba6=""
+  >
     <button
-      aria-disabled="true"
-      class="t-button t-size-l t-button--outline t-button--danger t-button--shape-rectangle t-is-block t-is-disabled"
-      disabled=""
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         弱警告按钮 
+        填充按钮
         
       </span>
+      <!---->
     </button>
-  </div>
-  <div
-    style="background: rgb(166, 166, 166); padding: 8px 16px; margin-bottom: 16px;"
-  >
     <button
-      aria-disabled="true"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-button--ghost t-is-block t-is-disabled"
-      disabled=""
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         幽灵按钮 
+        描边按钮
         
       </span>
+      <!---->
     </button>
-  </div>
-  <div
-    class="margin-button"
-  >
     <button
-      aria-disabled="true"
-      class="t-button t-size-l t-button--text t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
-      disabled=""
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         文字按钮 
+        文字按钮
         
       </span>
+      <!---->
     </button>
   </div>
   <div
-    class="no-border-radius margin-button"
+    class="row"
+    data-v-42dcdba6=""
   >
     <button
-      aria-disabled="true"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
-      disabled=""
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-         通栏按钮 
+        填充按钮
         
       </span>
+      <!---->
     </button>
-  </div>
-  <div
-    class="no-border-radius no-border flex margin-button"
-  >
     <button
-      aria-disabled="true"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block t-is-disabled"
-      disabled=""
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        次按钮
+        描边按钮
         
       </span>
+      <!---->
     </button>
     <button
-      aria-disabled="true"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-block t-is-disabled"
-      disabled=""
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        主按钮
+        文字按钮
         
       </span>
+      <!---->
     </button>
   </div>
   <div
-    class="button-demo align-center margin-right"
-  >
-    <div
-      class="flex align-center margin-right"
-    >
-      <button
-        aria-disabled="true"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-disabled"
-        disabled=""
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          
-          带图标按钮
-          
-        </span>
-      </button>
-      <button
-        aria-disabled="true"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-round t-is-disabled"
-        disabled=""
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          
-          带图标按钮
-          
-        </span>
-      </button>
-    </div>
-    <div
-      class="flex align-center margin-right"
-    >
-      <button
-        aria-disabled="true"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-square t-is-disabled"
-        disabled=""
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          <!---->
-        </span>
-      </button>
-      <button
-        aria-disabled="true"
-        class="t-button t-size-m t-button--base t-button--primary t-button--shape-circle t-is-disabled"
-        disabled=""
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-app"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          <!---->
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="flex align-center margin-right button-demo-loading"
+    class="row"
+    data-v-42dcdba6=""
   >
-    <div
-      class="button-demo flex"
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle"
+      data-v-42dcdba6=""
+      role="button"
+      type="button"
     >
-      <button
-        aria-disabled="true"
-        class="t-button t-size-l t-button--base t-button--primary t-button--shape-square t-is-disabled t-is-loading"
-        disabled=""
-        role="button"
-      >
-        <svg
-          class="t-icon t-icon-loading"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          <!---->
-        </span>
-      </button>
-      <button
-        aria-disabled="true"
-        class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle t-is-disabled t-is-loading"
-        disabled=""
-        role="button"
+      <!---->
+      <span
+        class="t-button__content"
       >
-        <svg
-          class="t-icon t-icon-loading"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <span
-          class="t-button__text"
-        >
-          
-          加载中...
-          
-        </span>
-      </button>
-    </div>
-  </div>
-  
-</div>
-`;
-
-exports[`Button > Button testVue demo works fine 1`] = `
-<div>
-  <p>
-    正确
-  </p>
-  <div
-    class="tdesign-demo-block"
-  >
+        
+        填充按钮
+        
+      </span>
+      <!---->
+    </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--outline t-button--danger t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        主要按钮
+        描边按钮
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-m t-button--outline t-button--default t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--text t-button--danger t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        次要按钮
+        文字按钮
         
       </span>
+      <!---->
     </button>
   </div>
-  <br />
-  <p>
-    错误
-  </p>
   <div
-    class="tdesign-demo-block"
+    class="row"
+    data-v-42dcdba6=""
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"
+      data-v-42dcdba6=""
+      role="button"
+      type="button"
+    >
+      <!---->
+      <span
+        class="t-button__content"
+      >
+        
+        填充按钮
+        
+      </span>
+      <!---->
+    </button>
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--outline t-button--light t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        主要按钮
+        描边按钮
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--text t-button--light t-button--rectangle"
+      data-v-42dcdba6=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
-        次要按钮
+        文字按钮
         
       </span>
+      <!---->
     </button>
   </div>
+  
 </div>
 `;
diff --git a/src/button/__test__/__snapshots__/index.test.jsx.snap b/src/button/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 31a42d121..000000000
--- a/src/button/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`button > button-group > button group render 1`] = `
-<div
-  class="t-button-group t-button-group--default"
->
-  
-  <button
-    aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
-    role="button"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      tdesign-mobile-vue
-    </span>
-  </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
-    role="button"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      tdesign-mobile-vue
-    </span>
-  </button>
-  
-</div>
-`;
diff --git a/src/button/__test__/demo.test.jsx b/src/button/__test__/demo.test.jsx
index 8899d6040..6521a118a 100644
--- a/src/button/__test__/demo.test.jsx
+++ b/src/button/__test__/demo.test.jsx
@@ -4,17 +4,27 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/button/demos/base.vue';
+import blockVue from '@/button/demos/block.vue';
+import ghostVue from '@/button/demos/ghost.vue';
+import groupVue from '@/button/demos/group.vue';
+import iconVue from '@/button/demos/icon.vue';
 import mobileVue from '@/button/demos/mobile.vue';
+import shapeVue from '@/button/demos/shape.vue';
 import sizeVue from '@/button/demos/size.vue';
 import statusVue from '@/button/demos/status.vue';
-import testVue from '@/button/demos/test.vue';
+import themeVue from '@/button/demos/theme.vue';
 
 const mapper = {
   baseVue,
+  blockVue,
+  ghostVue,
+  groupVue,
+  iconVue,
   mobileVue,
+  shapeVue,
   sizeVue,
   statusVue,
-  testVue,
+  themeVue,
 };
 
 describe('Button', () => {
diff --git a/src/button/__test__/index.test.jsx b/src/button/__test__/index.test.jsx
index 687084b8f..eff536069 100644
--- a/src/button/__test__/index.test.jsx
+++ b/src/button/__test__/index.test.jsx
@@ -1,23 +1,19 @@
-import { h, ref } from 'vue';
+import { h } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import { AppIcon as TIconApp, LoadingIcon } from 'tdesign-icons-vue-next';
+import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
 import Button from '../button.vue';
-import ButtonGroup from '../../button-group/button-group.vue';
+import Loading from '../../loading';
 
 const prefix = 't';
 const name = `${prefix}-button`;
-const SIZE_CLASSNAMES = {
-  small: `${prefix}-size-s`,
-  medium: `${prefix}-size-m`,
-  large: `${prefix}-size-l`,
-};
+
 const TEXT = 'tdesign-mobile-vue';
 const iconFunc = () => h(TIconApp);
 
 describe('button', () => {
   describe('props', () => {
-    it(': theme', async () => {
+    it(':theme', async () => {
       const wrapper = mount(Button, {
         props: {
           theme: '',
@@ -38,7 +34,7 @@ describe('button', () => {
       expect($button.classes()).toContain(`${name}--${theme}`);
     });
 
-    it(': content', async () => {
+    it(':content', async () => {
       const wrapper = mount(Button, {
         props: {
           content: TEXT,
@@ -54,7 +50,7 @@ describe('button', () => {
       expect($button.text()).toBe(newContent);
     });
 
-    it(': shape', async () => {
+    it(':shape', async () => {
       const wrapper = mount(Button, {
         props: {
           shape: '',
@@ -64,7 +60,7 @@ describe('button', () => {
       // shape = ''
       const $button = wrapper.findComponent(Button);
       ['rectangle', 'square', 'round', 'circle'].map((item) => {
-        expect($button.classes().includes(`${name}--shape-${item}`)).toBeFalsy();
+        expect($button.classes().includes(`${name}--${item}`)).toBeFalsy();
       });
       expect(wrapper.text()).toBe(TEXT);
       const shape = 'square';
@@ -72,10 +68,10 @@ describe('button', () => {
         shape,
       });
       // shape = 'square'
-      expect($button.classes()).toContain(`${name}--shape-${shape}`);
+      expect($button.classes()).toContain(`${name}--${shape}`);
     });
 
-    it(': size', async () => {
+    it(':size', async () => {
       const wrapper = mount(Button, {
         props: {
           size: '',
@@ -85,7 +81,7 @@ describe('button', () => {
       // size = ''
       const $button = wrapper.findComponent(Button);
       ['small', 'medium', 'large'].map((item) => {
-        expect($button.classes().includes(`${SIZE_CLASSNAMES[item]}`)).toBeFalsy();
+        expect($button.classes().includes(`${name}--size-${item}`)).toBeFalsy();
       });
       expect(wrapper.text()).toBe(TEXT);
       const size = 'small';
@@ -93,10 +89,10 @@ describe('button', () => {
         size,
       });
       // size = 'small'
-      expect($button.classes()).toContain(`${SIZE_CLASSNAMES[size]}`);
+      expect($button.classes()).toContain(`${name}--size-small`);
     });
 
-    it(': variant', async () => {
+    it(':variant', async () => {
       const wrapper = mount(Button, {
         props: {
           variant: '',
@@ -117,7 +113,7 @@ describe('button', () => {
       expect($button.classes()).toContain(`${name}--${variant}`);
     });
 
-    it(': disabled', async () => {
+    it(':disabled', async () => {
       const onClick = vi.fn();
       const disabled = true;
       const wrapper = mount(Button, {
@@ -129,7 +125,7 @@ describe('button', () => {
       });
       const $button = wrapper.findComponent(Button);
       // disabled = true, 不会触发 click
-      expect($button.classes()).toContain('t-is-disabled');
+      expect($button.classes()).toContain(`${name}--disabled`);
       await $button.trigger('click');
       expect(onClick).not.toBeCalled();
 
@@ -141,7 +137,7 @@ describe('button', () => {
       expect(onClick).toBeCalled();
     });
 
-    it(': loading', async () => {
+    it(':loading', async () => {
       const loading = true;
       const onClick = vi.fn();
       const wrapper = mount(Button, {
@@ -154,20 +150,17 @@ describe('button', () => {
       const $button = wrapper.findComponent(Button);
 
       // loading = true，不触发 click
-      expect($button.classes()).toContain('t-is-loading');
-      expect($button.findComponent(LoadingIcon).exists()).toBeTruthy();
       await $button.trigger('click');
       expect(onClick).not.toBeCalled();
       // loading = false
       await wrapper.setProps({
         loading: false,
       });
-      expect($button.findComponent(LoadingIcon).exists()).toBeFalsy();
       await $button.trigger('click');
       expect(onClick).toBeCalled();
     });
 
-    it(': icon', async () => {
+    it(':icon', async () => {
       const wrapper = mount(Button, {
         props: {
           loading: true,
@@ -176,12 +169,12 @@ describe('button', () => {
         },
       });
       const $button = wrapper.findComponent(Button);
-      expect($button.classes()).toContain('t-is-loading');
-      expect($button.findComponent(LoadingIcon).exists()).toBeTruthy();
+      expect($button.classes()).toContain(`${name}--loading`);
+      expect($button.findComponent(Loading).exists()).toBeTruthy();
       expect($button.findComponent(TIconApp).exists()).toBeFalsy();
     });
 
-    it(': ghost', async () => {
+    it(':ghost', async () => {
       const ghost = true;
       const wrapper = mount(Button, {
         props: {
@@ -200,7 +193,7 @@ describe('button', () => {
       expect($button.classes().includes(`${name}--ghost`)).toBeFalsy();
     });
 
-    it(': block', async () => {
+    it(':block', async () => {
       const block = true;
       const wrapper = mount(Button, {
         props: {
@@ -211,42 +204,12 @@ describe('button', () => {
       const $button = wrapper.findComponent(Button);
 
       // block = true
-      expect($button.classes().includes(`${prefix}-is-block`)).toBeTruthy();
+      expect($button.classes().includes(`${name}--block`)).toBeTruthy();
       // block = false
       await wrapper.setProps({
         block: false,
       });
-      expect($button.classes().includes(`${prefix}-is-block`)).toBeFalsy();
-    });
-  });
-
-  describe('button-group', () => {
-    it('button group render', async () => {
-      const items = [
-        {
-          content: TEXT,
-        },
-        {
-          content: TEXT,
-        },
-      ];
-      const wrapper = mount({
-        setup() {
-          return () => (
-            <ButtonGroup>
-              {{
-                default: items.map((item, index) => {
-                  return <Button content={item.content} />;
-                }),
-              }}
-            </ButtonGroup>
-          );
-        },
-      });
-      expect(wrapper.element).toMatchSnapshot();
-      const $buttonGroup = wrapper.findComponent(ButtonGroup);
-      expect($buttonGroup.exists()).toBeTruthy();
-      expect(wrapper.findAllComponents(Button).length).toEqual(items.length);
+      expect($button.classes().includes(`${name}--block`)).toBeFalsy();
     });
   });
 });
diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md
new file mode 100644
index 000000000..3b073a906
--- /dev/null
+++ b/src/button/button.en-US.md
@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+block | Boolean | false | make button to be a block-level element | N
+content | String / Slot / Function | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+ghost | Boolean | false | make background-color to be transparent | N
+icon | Slot / Function | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+loading | Boolean | false | set button to be loading state | N
+loadingProps | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：extra-small/small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+suffix | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+theme | String | default | button theme。options：default/primary/danger/light | N
+type | String | button | type of button element in html。options：submit/reset/button | N
+variant | String | base | button variant。options：base/outline/text | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
+
+### Button Events
+
+name | params | description
+-- | -- | --
+click | `(e: MouseEvent)` | trigger on click
diff --git a/src/button/button.md b/src/button/button.md
index e86eec676..11ba63c97 100644
--- a/src/button/button.md
+++ b/src/button/button.md
@@ -6,14 +6,17 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 block | Boolean | false | 是否为块级元素 | N
-content | String / Slot / Function | - | 按钮内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-disabled | Boolean | false | 是否禁用按钮 | N
+content | String / Slot / Function | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 icon | Slot / Function | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否显示为加载状态 | N
+loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
-size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger | N
+size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+suffix | Slot / Function | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
 variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/text | N
 onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
 
diff --git a/src/button/button.vue b/src/button/button.vue
index 28c642cb3..fc6225a31 100644
--- a/src/button/button.vue
+++ b/src/button/button.vue
@@ -1,17 +1,26 @@
 <template>
-  <button :class="buttonClass" :disabled="disabled" role="button" :aria-disabled="disabled" @click="onClick">
-    <t-node :content="iconContent"></t-node>
-    <span :class="`${name}__text`">
-      <t-node :content="buttonContent"></t-node>
+  <button
+    :class="buttonClass"
+    :disabled="disabled"
+    :type="type"
+    role="button"
+    :aria-disabled="disabled"
+    @click="onClick"
+  >
+    <t-loading v-if="loading" inherit-color v-bind="loadingProps" />
+    <t-node v-else :content="iconContent" />
+    <span :class="`${name}__content`">
+      <t-node :content="buttonContent" />
     </span>
+    <t-node :content="suffixContent" />
   </button>
 </template>
 
 <script lang="ts">
 import { computed, toRefs, defineComponent, getCurrentInstance, h } from 'vue';
-import { LoadingIcon } from 'tdesign-icons-vue-next';
+
+import Loading from '../loading';
 import { useEmitEvent, renderContent, renderTNode, TNode } from '../shared';
-import CLASSNAMES from '../shared/constants';
 import ButtonProps from './props';
 import config from '../config';
 import { useFormDisabled } from '../form/hooks';
@@ -19,11 +28,9 @@ import { useFormDisabled } from '../form/hooks';
 const { prefix } = config;
 const name = `${prefix}-button`;
 
-const loadingContent = h(LoadingIcon);
-
 export default defineComponent({
   name,
-  components: { TNode },
+  components: { TNode, TLoading: Loading },
   props: ButtonProps,
   emits: ['click'],
   setup(props, context) {
@@ -32,19 +39,21 @@ export default defineComponent({
     const internalInstance = getCurrentInstance();
     const buttonClass = computed(() => [
       `${name}`,
-      props.size ? CLASSNAMES.SIZE[props.size] : '',
+      `${name}--size-${props.size}`,
       `${name}--${props.variant}`,
       {
         [`${name}--${props.theme}`]: props.theme,
-        [`${name}--shape-${props.shape}`]: props.shape,
+        [`${name}--${props.shape}`]: props.shape,
         [`${name}--ghost`]: props.ghost,
-        [`${prefix}-is-block`]: props.block,
-        [CLASSNAMES.STATUS.disabled]: disabled.value,
-        [CLASSNAMES.STATUS.loading]: props.loading,
+        [`${name}--block`]: props.block,
+        [`${name}--disabled`]: disabled.value,
+        [`${name}--loading`]: props.loading,
       },
     ]);
     const buttonContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-    const iconContent = computed(() => (props.loading ? loadingContent : renderTNode(internalInstance, 'icon')));
+    const iconContent = computed(() => renderTNode(internalInstance, 'icon'));
+    const suffixContent = computed(() => renderTNode(internalInstance, 'suffix'));
+
     const onClick = (e: Event) => {
       if (!props.loading && !disabled.value) {
         emitEvent('click', e);
@@ -58,6 +67,7 @@ export default defineComponent({
       disabled,
       buttonContent,
       iconContent,
+      suffixContent,
       buttonClass,
       onClick,
     };
diff --git a/src/button/demos/base.vue b/src/button/demos/base.vue
index e9a229b16..97fd2e264 100644
--- a/src/button/demos/base.vue
+++ b/src/button/demos/base.vue
@@ -1,49 +1,26 @@
 <template>
-  <div class="button-demo">
-    <t-button size="large" theme="primary" block>强按钮</t-button>
-    <t-button size="large" theme="primary" block variant="outline"> 弱按钮 </t-button>
-    <t-button size="large" variant="outline" block>次按钮</t-button>
-    <t-button size="large" theme="primary" variant="outline" :icon="iconFunc" block> 带图标按钮 </t-button>
-    <t-button size="large" theme="danger" block>强警告按钮</t-button>
-    <t-button size="large" theme="danger" variant="outline" block> 弱警告按钮 </t-button>
+  <div class="row">
+    <t-button size="large" theme="primary">填充按钮</t-button>
+    <t-button size="large" theme="light">填充按钮</t-button>
+    <t-button size="large">填充按钮</t-button>
   </div>
-
-  <div style="background: #a6a6a6; padding: 8px 16px; margin-bottom: 16px">
-    <t-button size="large" variant="outline" ghost block> 幽灵按钮 </t-button>
-  </div>
-  <div class="margin-button">
-    <t-button size="large" theme="primary" variant="text" block> 文字按钮 </t-button>
-  </div>
-  <div class="no-border-radius margin-button">
-    <t-button size="large" theme="primary" block> 通栏按钮 </t-button>
-  </div>
-  <div class="no-border-radius no-border flex margin-button">
-    <t-button size="large" variant="outline" block>次按钮</t-button>
-    <t-button size="large" theme="primary" block>主按钮</t-button>
-  </div>
-
-  <div class="button-demo align-center margin-right">
-    <div class="flex align-center margin-right">
-      <t-button theme="primary" :icon="iconFunc">带图标按钮</t-button>
-      <t-button theme="primary" shape="round" :icon="iconFunc">带图标按钮</t-button>
-    </div>
-    <div class="flex align-center margin-right">
-      <t-button theme="primary" shape="square" :icon="iconFunc"></t-button>
-      <t-button theme="primary" shape="circle" :icon="iconFunc"></t-button>
-    </div>
-  </div>
-
-  <div class="flex align-center margin-right button-demo-loading">
-    <div class="button-demo flex">
-      <t-button size="large" shape="square" theme="primary" loading></t-button>
-      <t-button size="large" theme="primary" loading>加载中...</t-button>
-    </div>
+  <div class="row">
+    <t-button size="large" theme="primary" variant="outline">描边按钮</t-button>
+    <t-button size="large" theme="primary" variant="text">文字按钮</t-button>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { h } from 'vue';
-import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
+<style scoped lang="less">
+.row {
+  display: flex;
+  padding: 0 16px;
+}
+
+.row + .row {
+  margin-top: 16px;
+}
 
-const iconFunc = () => h(TIconApp);
-</script>
+.t-button + .t-button {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/button/demos/block.vue b/src/button/demos/block.vue
new file mode 100644
index 000000000..1dbb4a6ac
--- /dev/null
+++ b/src/button/demos/block.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="row">
+    <t-button size="large" theme="primary" block>填充按钮</t-button>
+  </div>
+</template>
+
+<style scoped>
+.row {
+  margin: 0 16px;
+}
+</style>
diff --git a/src/button/demos/ghost.vue b/src/button/demos/ghost.vue
new file mode 100644
index 000000000..7ec0f4883
--- /dev/null
+++ b/src/button/demos/ghost.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="row">
+    <t-button size="large" ghost theme="primary">幽灵按钮</t-button>
+    <t-button size="large" ghost theme="danger">幽灵按钮</t-button>
+    <t-button size="large" ghost>幽灵按钮</t-button>
+  </div>
+</template>
+
+<style scoped lang="less">
+.row {
+  display: flex;
+  padding: 16px;
+  background-color: #181818;
+}
+
+.t-button + .t-button {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/button/demos/group.vue b/src/button/demos/group.vue
new file mode 100644
index 000000000..505caf73a
--- /dev/null
+++ b/src/button/demos/group.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="row">
+    <t-button size="large" theme="light">填充按钮</t-button>
+    <t-button size="large" theme="primary">填充按钮</t-button>
+  </div>
+</template>
+
+<style scoped>
+.row {
+  margin: 0 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+</style>
diff --git a/src/button/demos/icon.vue b/src/button/demos/icon.vue
new file mode 100644
index 000000000..ff3bb28c0
--- /dev/null
+++ b/src/button/demos/icon.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="row">
+    <t-button theme="primary" size="large" :icon="appIcon">填充按钮</t-button>
+    <t-button theme="primary" size="large" loading>加载中</t-button>
+    <t-button theme="primary" size="large" :icon="searchIcon" shape="square" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import { AppIcon, SearchIcon } from 'tdesign-icons-vue-next';
+
+const appIcon = () => h(AppIcon, { size: '24px' });
+const searchIcon = () => h(SearchIcon, { size: '24px' });
+</script>
+
+<style scoped lang="less">
+.row {
+  display: flex;
+  padding: 0 16px;
+}
+
+.row + .row {
+  margin-top: 16px;
+}
+
+.t-button + .t-button {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/button/demos/mobile.vue b/src/button/demos/mobile.vue
index 3f7f3e9be..866774a4c 100644
--- a/src/button/demos/mobile.vue
+++ b/src/button/demos/mobile.vue
@@ -2,23 +2,58 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Button 按钮</h1>
     <p class="summary">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</p>
-    <tdesign-demo-block title="01 类型" summary="基础按钮">
+    <tdesign-demo-block title="01 组件类型" summary="基础按钮">
       <BaseButtonDemo />
     </tdesign-demo-block>
 
-    <tdesign-demo-block title="02 状态" summary="按钮禁用态">
-      <StatusButtonDemo />
+    <tdesign-demo-block summary="图标按钮">
+      <iconDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 规格" summary="按钮尺寸">
-      <div className="button-demo">
-        <SizeButtonDemo />
-      </div>
+
+    <tdesign-demo-block summary="幽灵按钮">
+      <ghostDemo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="组合按钮">
+      <groupDemo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="通栏按钮">
+      <blockDemo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block title="02 组件状态" summary="按钮禁用态">
+      <statusDemo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block title="03 组件样式" summary="按钮尺寸">
+      <sizeDemo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="按钮形状">
+      <shapeDemo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="按钮主题">
+      <themeDemo />
     </tdesign-demo-block>
   </div>
 </template>
 <script lang="ts" setup>
 import './style/index.less';
 import BaseButtonDemo from './base.vue';
-import StatusButtonDemo from './status.vue';
-import SizeButtonDemo from './size.vue';
+import iconDemo from './icon.vue';
+import ghostDemo from './ghost.vue';
+import groupDemo from './group.vue';
+import blockDemo from './block.vue';
+import statusDemo from './status.vue';
+import sizeDemo from './size.vue';
+import shapeDemo from './shape.vue';
+import themeDemo from './theme.vue';
 </script>
+
+<style scoped>
+.tdesign-mobile-demo {
+  background-color: #fff;
+}
+</style>
diff --git a/src/button/demos/shape.vue b/src/button/demos/shape.vue
new file mode 100644
index 000000000..ab5c94560
--- /dev/null
+++ b/src/button/demos/shape.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="row">
+    <t-button theme="primary" size="large">填充按钮</t-button>
+    <t-button theme="primary" size="large" :icon="searchIcon" shape="square" aria-label="搜索"></t-button>
+    <t-button theme="primary" size="large" shape="round">填充按钮</t-button>
+    <t-button theme="primary" size="large" :icon="searchIcon" shape="circle" aria-label="搜索"></t-button>
+  </div>
+
+  <t-button theme="primary" size="large" block class="rectangle-button">填充按钮</t-button>
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import { SearchIcon } from 'tdesign-icons-vue-next';
+
+const searchIcon = () => h(SearchIcon, { size: '24px' });
+</script>
+
+<style scoped>
+.row {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 16px 16px;
+}
+
+.rectangle-button {
+  border-radius: 0;
+}
+</style>
diff --git a/src/button/demos/size.vue b/src/button/demos/size.vue
index 172c21fa8..8eb91d0a2 100644
--- a/src/button/demos/size.vue
+++ b/src/button/demos/size.vue
@@ -1,34 +1,16 @@
 <template>
-  <div class="flex align-center margin-right">
-    <t-button size="large" theme="primary">按钮 44</t-button>
+  <div class="row">
+    <t-button size="large" theme="primary">按钮 48</t-button>
     <t-button theme="primary">按钮 40</t-button>
-    <t-button size="small" theme="primary">按钮 36</t-button>
-  </div>
-  <div class="flex align-center margin-right">
-    <t-button size="large" theme="primary" shape="round">
-      <template #icon>
-        <t-icon-app />
-      </template>
-      按钮
-    </t-button>
-    <t-button :icon="iconFunc" shape="round" theme="primary">按钮</t-button>
-    <t-button size="small" :icon="iconFunc" shape="round" theme="primary">按钮</t-button>
-  </div>
-  <div class="flex align-center margin-right">
-    <t-button size="large" :icon="iconFunc" shape="square" theme="primary"></t-button>
-    <t-button :icon="iconFunc" shape="square" theme="primary"></t-button>
-    <t-button size="small" :icon="iconFunc" shape="square" theme="primary"></t-button>
-  </div>
-  <div class="flex align-center margin-right">
-    <t-button size="large" :icon="iconFunc" shape="circle" theme="primary"></t-button>
-    <t-button :icon="iconFunc" shape="circle" theme="primary"></t-button>
-    <t-button size="small" :icon="iconFunc" shape="circle" theme="primary"></t-button>
+    <t-button size="small" theme="primary">按钮 32</t-button>
+    <t-button size="extra-small" theme="primary">按钮 28</t-button>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { h } from 'vue';
-import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
-
-const iconFunc = () => h(TIconApp);
-</script>
+<style scoped>
+.row {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 16px;
+}
+</style>
diff --git a/src/button/demos/status.vue b/src/button/demos/status.vue
index e5ba51fbc..c7f1b5708 100644
--- a/src/button/demos/status.vue
+++ b/src/button/demos/status.vue
@@ -1,52 +1,26 @@
 <template>
-  <div class="button-demo">
-    <t-button size="large" theme="primary" block :disabled="disabled">强按钮</t-button>
-    <t-button size="large" theme="primary" block variant="outline" :disabled="disabled"> 弱按钮 </t-button>
-    <t-button size="large" variant="outline" block :disabled="disabled">次按钮</t-button>
-    <t-button size="large" theme="primary" variant="outline" :icon="iconFunc" block :disabled="disabled">
-      带图标按钮
-    </t-button>
-    <t-button size="large" theme="danger" block :disabled="disabled">强警告按钮</t-button>
-    <t-button size="large" theme="danger" variant="outline" block :disabled="disabled"> 弱警告按钮 </t-button>
+  <div class="row">
+    <t-button size="large" disabled theme="primary">填充按钮</t-button>
+    <t-button size="large" disabled theme="light">填充按钮</t-button>
+    <t-button size="large" disabled>填充按钮</t-button>
   </div>
-
-  <div style="background: #a6a6a6; padding: 8px 16px; margin-bottom: 16px">
-    <t-button size="large" variant="outline" ghost block :disabled="disabled"> 幽灵按钮 </t-button>
-  </div>
-  <div class="margin-button">
-    <t-button size="large" theme="primary" variant="text" block :disabled="disabled"> 文字按钮 </t-button>
-  </div>
-  <div class="no-border-radius margin-button">
-    <t-button size="large" theme="primary" block :disabled="disabled"> 通栏按钮 </t-button>
-  </div>
-  <div class="no-border-radius no-border flex margin-button">
-    <t-button size="large" variant="outline" block :disabled="disabled">次按钮</t-button>
-    <t-button size="large" theme="primary" block :disabled="disabled">主按钮</t-button>
-  </div>
-
-  <div class="button-demo align-center margin-right">
-    <div class="flex align-center margin-right">
-      <t-button theme="primary" :icon="iconFunc" :disabled="disabled">带图标按钮</t-button>
-      <t-button theme="primary" shape="round" :icon="iconFunc" :disabled="disabled">带图标按钮</t-button>
-    </div>
-    <div class="flex align-center margin-right">
-      <t-button theme="primary" shape="square" :icon="iconFunc" :disabled="disabled"></t-button>
-      <t-button theme="primary" shape="circle" :icon="iconFunc" :disabled="disabled"></t-button>
-    </div>
-  </div>
-
-  <div class="flex align-center margin-right button-demo-loading">
-    <div class="button-demo flex">
-      <t-button size="large" shape="square" theme="primary" loading :disabled="disabled"></t-button>
-      <t-button size="large" theme="primary" loading :disabled="disabled">加载中...</t-button>
-    </div>
+  <div class="row">
+    <t-button size="large" disabled theme="primary" variant="outline">描边按钮</t-button>
+    <t-button size="large" disabled theme="primary" variant="text">文字按钮</t-button>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { h, ref } from 'vue';
-import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
+<style scoped lang="less">
+.row {
+  display: flex;
+  padding: 0 16px;
+}
+
+.row + .row {
+  margin-top: 16px;
+}
 
-const disabled = ref(true);
-const iconFunc = () => h(TIconApp);
-</script>
+.t-button + .t-button {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/button/demos/test.vue b/src/button/demos/test.vue
deleted file mode 100644
index fb4546af0..000000000
--- a/src/button/demos/test.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <p>正确</p>
-    <div class="tdesign-demo-block">
-      <t-button theme="primary">主要按钮</t-button>
-      <t-button variant="outline">次要按钮</t-button>
-    </div>
-
-    <br />
-    <p>错误</p>
-    <div class="tdesign-demo-block">
-      <t-button theme="primary">主要按钮</t-button>
-      <t-button theme="primary">次要按钮</t-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
diff --git a/src/button/demos/theme.vue b/src/button/demos/theme.vue
new file mode 100644
index 000000000..dad4ede3a
--- /dev/null
+++ b/src/button/demos/theme.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="row">
+    <t-button size="large">填充按钮</t-button>
+    <t-button size="large" variant="outline">描边按钮</t-button>
+    <t-button size="large" variant="text">文字按钮</t-button>
+  </div>
+
+  <div class="row">
+    <t-button size="large" theme="primary">填充按钮</t-button>
+    <t-button size="large" theme="primary" variant="outline">描边按钮</t-button>
+    <t-button size="large" theme="primary" variant="text">文字按钮</t-button>
+  </div>
+
+  <div class="row">
+    <t-button size="large" theme="danger">填充按钮</t-button>
+    <t-button size="large" theme="danger" variant="outline">描边按钮</t-button>
+    <t-button size="large" theme="danger" variant="text">文字按钮</t-button>
+  </div>
+
+  <div class="row">
+    <t-button size="large" theme="light">填充按钮</t-button>
+    <t-button size="large" theme="light" variant="outline">描边按钮</t-button>
+    <t-button size="large" theme="light" variant="text">文字按钮</t-button>
+  </div>
+</template>
+
+<style scoped>
+.row {
+  margin: 0 16px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.row:not(:last-child) {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/button/props.ts b/src/button/props.ts
index b468796a8..0b9694246 100644
--- a/src/button/props.ts
+++ b/src/button/props.ts
@@ -14,7 +14,7 @@ export default {
   content: {
     type: [String, Function] as PropType<TdButtonProps['content']>,
   },
-  /** 是否禁用按钮 */
+  /** 禁用状态 */
   disabled: Boolean,
   /** 是否为幽灵按钮（镂空按钮） */
   ghost: Boolean,
@@ -24,6 +24,10 @@ export default {
   },
   /** 是否显示为加载状态 */
   loading: Boolean,
+  /** 透传加载组件全部属性 */
+  loadingProps: {
+    type: Object as PropType<TdButtonProps['loadingProps']>,
+  },
   /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */
   shape: {
     type: String as PropType<TdButtonProps['shape']>,
@@ -39,16 +43,29 @@ export default {
     default: 'medium' as TdButtonProps['size'],
     validator(val: TdButtonProps['size']): boolean {
       if (!val) return true;
-      return ['small', 'medium', 'large'].includes(val);
+      return ['extra-small', 'small', 'medium', 'large'].includes(val);
     },
   },
+  /** 右侧内容，可用于定义右侧图标 */
+  suffix: {
+    type: Function as PropType<TdButtonProps['suffix']>,
+  },
   /** 组件风格，依次为品牌色、危险色 */
   theme: {
     type: String as PropType<TdButtonProps['theme']>,
     default: 'default' as TdButtonProps['theme'],
     validator(val: TdButtonProps['theme']): boolean {
       if (!val) return true;
-      return ['default', 'primary', 'danger'].includes(val);
+      return ['default', 'primary', 'danger', 'light'].includes(val);
+    },
+  },
+  /** 按钮类型 */
+  type: {
+    type: String as PropType<TdButtonProps['type']>,
+    default: 'button' as TdButtonProps['type'],
+    validator(val: TdButtonProps['type']): boolean {
+      if (!val) return true;
+      return ['submit', 'reset', 'button'].includes(val);
     },
   },
   /** 按钮形式，基础、线框、文字 */
diff --git a/src/button/style/index.js b/src/button/style/index.js
index 039702ee1..6fbb8ed2f 100644
--- a/src/button/style/index.js
+++ b/src/button/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/button/_index.less';
+import '../../_common/style/mobile/components/button/v2/_index.less';
diff --git a/src/button/type.ts b/src/button/type.ts
index d7553bd26..6e9edfae9 100644
--- a/src/button/type.ts
+++ b/src/button/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '../loading';
 import { TNode, SizeEnum } from '../common';
 
 export interface TdButtonProps {
@@ -17,7 +18,7 @@ export interface TdButtonProps {
    */
   content?: string | TNode;
   /**
-   * 是否禁用按钮
+   * 禁用状态
    * @default false
    */
   disabled?: boolean;
@@ -35,6 +36,10 @@ export interface TdButtonProps {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 透传加载组件全部属性
+   */
+  loadingProps?: LoadingProps;
   /**
    * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
    * @default rectangle
@@ -45,11 +50,20 @@ export interface TdButtonProps {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 右侧内容，可用于定义右侧图标
+   */
+  suffix?: TNode;
   /**
    * 组件风格，依次为品牌色、危险色
    * @default default
    */
-  theme?: 'default' | 'primary' | 'danger';
+  theme?: 'default' | 'primary' | 'danger' | 'light';
+  /**
+   * 按钮类型
+   * @default button
+   */
+  type?: 'submit' | 'reset' | 'button';
   /**
    * 按钮形式，基础、线框、文字
    * @default base
diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index 79115123a..0c6cea589 100644
--- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -2307,15 +2307,17 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 确认
               </span>
+              <!---->
             </button>
             
           </div>
@@ -4676,15 +4678,17 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-round t-is-block"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--round t-button--block"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 ok
               </span>
+              <!---->
             </button>
             
           </div>
@@ -5158,15 +5162,17 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 确认
               </span>
+              <!---->
             </button>
             
           </div>
@@ -6189,15 +6195,17 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 确认
               </span>
+              <!---->
             </button>
             
           </div>
@@ -8593,15 +8601,17 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                     
                     <button
                       aria-disabled="false"
-                      class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+                      class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
                       role="button"
+                      type="button"
                     >
                       <!---->
                       <span
-                        class="t-button__text"
+                        class="t-button__content"
                       >
                         确认
                       </span>
+                      <!---->
                     </button>
                     
                   </div>
@@ -10956,15 +10966,17 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                     
                     <button
                       aria-disabled="false"
-                      class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+                      class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
                       role="button"
+                      type="button"
                     >
                       <!---->
                       <span
-                        class="t-button__text"
+                        class="t-button__content"
                       >
                         确认
                       </span>
+                      <!---->
                     </button>
                     
                   </div>
@@ -13319,15 +13331,17 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                     
                     <button
                       aria-disabled="false"
-                      class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+                      class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
                       role="button"
+                      type="button"
                     >
                       <!---->
                       <span
-                        class="t-button__text"
+                        class="t-button__content"
                       >
                         确认
                       </span>
+                      <!---->
                     </button>
                     
                   </div>
@@ -14368,15 +14382,17 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+                  class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     确认
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -16731,15 +16747,17 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--base t-button--danger t-button--shape-round t-is-block"
+                  class="t-button t-button--size-medium t-button--base t-button--danger t-button--round t-button--block"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     ok
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -17206,15 +17224,17 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+                  class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     确认
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -19593,15 +19613,17 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 确认
               </span>
+              <!---->
             </button>
             
           </div>
@@ -21959,15 +21981,17 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 确认
               </span>
+              <!---->
             </button>
             
           </div>
diff --git a/src/calendar/__test__/__snapshots__/index.test.jsx.snap b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
index 333f00b49..2e4f38d68 100644
--- a/src/calendar/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
@@ -541,15 +541,17 @@ exports[`calendar > props > : format 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle t-is-block"
+            class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               确认
             </span>
+            <!---->
           </button>
           
         </div>
diff --git a/src/components.ts b/src/components.ts
index c0154554c..cc345b1c0 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -1,5 +1,4 @@
 export { default as Button } from './button';
-export { default as ButtonGroup } from './button-group';
 export { default as Divider } from './divider';
 export { default as Calendar } from './calendar';
 export { default as Cell, CellGroup } from './cell';
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index ef0649174..c17a2165a 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -7,33 +7,37 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
   
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     data-v-25064f1a=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        双按钮 
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     data-v-25064f1a=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        带警示按钮 
       
     </span>
+    <!---->
   </button>
   <teleport-stub
     data-v-25064f1a=""
@@ -89,29 +93,33 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               取消
             </span>
+            <!---->
           </button>
           
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               确认
             </span>
+            <!---->
           </button>
           
         </div>
@@ -172,29 +180,33 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               取消
             </span>
+            <!---->
           </button>
           
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--danger t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--danger t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               警示操作
             </span>
+            <!---->
           </button>
           
         </div>
@@ -213,59 +225,67 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
   
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        单行标题 
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        多行标题最大高度 
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        带说明文本 
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        带说明文本最大高度 
       
     </span>
+    <!---->
   </button>
   <!-- &lt;t-button block variant="outline" size="large" @click="eventDialog()"&gt; 函数调用长文本对话框 &lt;/t-button&gt; -->
   <teleport-stub
@@ -314,15 +334,17 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               知道了
             </span>
+            <!---->
           </button>
           
         </div>
@@ -376,15 +398,17 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               知道了
             </span>
+            <!---->
           </button>
           
         </div>
@@ -446,15 +470,17 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               知道了
             </span>
+            <!---->
           </button>
           
         </div>
@@ -516,15 +542,17 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+            class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               知道了
             </span>
+            <!---->
           </button>
           
         </div>
@@ -543,33 +571,37 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
   
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     data-v-4a76bf3d=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        单行标题对话框 
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     data-v-4a76bf3d=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        带说明文本对话框 
       
     </span>
+    <!---->
   </button>
   <teleport-stub
     data-v-4a76bf3d=""
@@ -733,59 +765,67 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              单行标题 
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              多行标题最大高度 
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              带说明文本 
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              带说明文本最大高度 
             
           </span>
+          <!---->
         </button>
         <!-- &lt;t-button block variant="outline" size="large" @click="eventDialog()"&gt; 函数调用长文本对话框 &lt;/t-button&gt; -->
         <teleport-stub
@@ -834,15 +874,17 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     知道了
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -896,15 +938,17 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     知道了
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -966,15 +1010,17 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     知道了
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -1036,15 +1082,17 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     知道了
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -1082,33 +1130,37 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-25064f1a=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              双按钮 
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-25064f1a=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              带警示按钮 
             
           </span>
+          <!---->
         </button>
         <teleport-stub
           data-v-25064f1a=""
@@ -1164,29 +1216,33 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     取消
                   </span>
+                  <!---->
                 </button>
                 
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     确认
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -1247,29 +1303,33 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--default t-button--rectangle t-dialog__btn t-dialog__btn--default t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     取消
                   </span>
+                  <!---->
                 </button>
                 
                 
                 <button
                   aria-disabled="false"
-                  class="t-button t-size-m t-button--text t-button--danger t-button--shape-rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
+                  class="t-button t-button--size-medium t-button--text t-button--danger t-button--rectangle t-dialog__btn t-dialog__btn--primary t-dialog__horizontal-btn"
                   role="button"
+                  type="button"
                 >
                   <!---->
                   <span
-                    class="t-button__text"
+                    class="t-button__content"
                   >
                     警示操作
                   </span>
+                  <!---->
                 </button>
                 
               </div>
@@ -1308,33 +1368,37 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-4a76bf3d=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              单行标题对话框 
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-4a76bf3d=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              带说明文本对话框 
             
           </span>
+          <!---->
         </button>
         <teleport-stub
           data-v-4a76bf3d=""
diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index d05bb91eb..59394ed4e 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -98,18 +98,20 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-2da634e5=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         基础抽屉
         
       </span>
+      <!---->
     </button>
   </div>
 </div>
@@ -309,18 +311,20 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
       data-v-6846568d=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         带图标抽屉
         
       </span>
+      <!---->
     </button>
   </div>
 </div>
@@ -458,18 +462,20 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         >
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
             data-v-2da634e5=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               基础抽屉
               
             </span>
+            <!---->
           </button>
         </div>
       </div>
@@ -686,18 +692,20 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         >
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
             data-v-6846568d=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               带图标抽屉
               
             </span>
+            <!---->
           </button>
         </div>
       </div>
diff --git a/src/empty/__test__/__snapshots__/demo.test.jsx.snap b/src/empty/__test__/__snapshots__/demo.test.jsx.snap
index 75b5e4678..d10045e79 100644
--- a/src/empty/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/empty/__test__/__snapshots__/demo.test.jsx.snap
@@ -70,17 +70,19 @@ exports[`Empty > Empty buttonEmptyVue demo works fine 1`] = `
     
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         操作按钮
         
       </span>
+      <!---->
     </button>
     
   </div>
@@ -471,17 +473,19 @@ exports[`Empty > Empty mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle"
+            class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               操作按钮
               
             </span>
+            <!---->
           </button>
           
         </div>
diff --git a/src/fab/__test__/__snapshots__/demo.test.jsx.snap b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
index c59b7d735..1fd98d066 100644
--- a/src/fab/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
@@ -4,13 +4,14 @@ exports[`Fab > Fab displayVue demo works fine 1`] = `
 <div>
   <button
     aria-disabled="false"
-    class="t-button t-button--base t-button--primary t-button--shape-round t-fab t-fab--icononly"
+    class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
     role="button"
     style="right: 16px; bottom: 32px;"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       <svg
@@ -29,6 +30,7 @@ exports[`Fab > Fab displayVue demo works fine 1`] = `
       <!--v-if-->
       
     </span>
+    <!---->
   </button>
 </div>
 `;
@@ -73,31 +75,35 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             基础使用
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             进阶使用
             
           </span>
+          <!---->
         </button>
       </div>
       
@@ -106,13 +112,14 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
   <div>
     <button
       aria-disabled="false"
-      class="t-button t-button--base t-button--primary t-button--shape-round t-fab t-fab--icononly"
+      class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
       role="button"
       style="right: 16px; bottom: 32px;"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         <svg
@@ -131,6 +138,7 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
         <!--v-if-->
         
       </span>
+      <!---->
     </button>
   </div>
   <!--v-if-->
@@ -141,13 +149,14 @@ exports[`Fab > Fab textVue demo works fine 1`] = `
 <div>
   <button
     aria-disabled="false"
-    class="t-button t-button--outline t-button--primary t-button--shape-round t-fab"
+    class="t-button t-button--size-middle t-button--outline t-button--primary t-button--round t-fab"
     role="button"
     style="right: 16px; bottom: 32px;"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       <svg
@@ -170,6 +179,7 @@ exports[`Fab > Fab textVue demo works fine 1`] = `
       </span>
       
     </span>
+    <!---->
   </button>
 </div>
 `;
diff --git a/src/fab/__test__/__snapshots__/index.test.jsx.snap b/src/fab/__test__/__snapshots__/index.test.jsx.snap
index 36217c329..1f98d740a 100644
--- a/src/fab/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/index.test.jsx.snap
@@ -3,13 +3,14 @@
 exports[`fab > slots > : icon 1`] = `
 <button
   aria-disabled="false"
-  class="t-button t-button--base t-button--primary t-button--shape-round t-fab"
+  class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab"
   role="button"
   style="right: 16px; bottom: 32px;"
+  type="button"
 >
   <!---->
   <span
-    class="t-button__text"
+    class="t-button__content"
   >
     
     
@@ -30,5 +31,6 @@ exports[`fab > slots > : icon 1`] = `
     <!--v-if-->
     
   </span>
+  <!---->
 </button>
 `;
diff --git a/src/fab/__test__/index.test.jsx b/src/fab/__test__/index.test.jsx
index e27901a7a..4806ee474 100644
--- a/src/fab/__test__/index.test.jsx
+++ b/src/fab/__test__/index.test.jsx
@@ -43,8 +43,8 @@ describe('fab', () => {
         props: { icon, buttonProps },
       });
       expect(wrapper.classes()).toContain(`t-button--danger`);
-      expect(wrapper.classes()).toContain(`t-button--shape-circle`);
-      expect(wrapper.classes()).toContain(`t-size-l`);
+      expect(wrapper.classes()).toContain(`t-button--circle`);
+      expect(wrapper.classes()).toContain(`t-button--size-large`);
     });
   });
 
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 3df66296f..045007732 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -1590,35 +1590,37 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
       data-v-799be585=""
       role="button"
       type="submit"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         提交
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--default t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"
       data-v-799be585=""
       role="button"
       type="reset"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         重置
         
       </span>
+      <!---->
     </button>
   </div>
   
@@ -1670,33 +1672,37 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
         >
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-round"
+            class="t-button t-button--size-medium t-button--base t-button--primary t-button--round"
             data-v-4e944783=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
                水平排布 
               
             </span>
+            <!---->
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--default t-button--shape-round"
+            class="t-button t-button--size-medium t-button--base t-button--default t-button--round"
             data-v-4e944783=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
                竖直排布 
               
             </span>
+            <!---->
           </button>
         </div>
         <div
@@ -3342,35 +3348,37 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
         >
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle"
+            class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
             data-v-799be585=""
             role="button"
             type="submit"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               提交
               
             </span>
+            <!---->
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"
             data-v-799be585=""
             role="button"
             type="reset"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               重置
               
             </span>
+            <!---->
           </button>
         </div>
         
@@ -4963,35 +4971,37 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
       data-v-713b33d2=""
       role="button"
       type="submit"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         提交
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--default t-button--shape-rectangle"
+      class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"
       data-v-713b33d2=""
       role="button"
       type="reset"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         重置
         
       </span>
+      <!---->
     </button>
   </div>
   
diff --git a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
index 9bb55eab9..3d3e2c440 100644
--- a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
@@ -30,17 +30,19 @@ exports[`ImageViewer > ImageViewer backgroundVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              显示 
             
           </span>
+          <!---->
         </button>
         <div
           class="t-overlay t-image-viewer"
@@ -65,18 +67,20 @@ exports[`ImageViewer > ImageViewer baseVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     data-v-734c791c=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
        基础用法 
       
     </span>
+    <!---->
   </button>
   <div
     class="t-overlay t-image-viewer"
@@ -96,18 +100,20 @@ exports[`ImageViewer > ImageViewer closeBtnVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     data-v-04bcb836=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       不展示关闭按钮
       
     </span>
+    <!---->
   </button>
   <div
     class="t-overlay t-image-viewer"
@@ -127,18 +133,20 @@ exports[`ImageViewer > ImageViewer closeEventVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     data-v-3939d0e3=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       监听关闭事件
       
     </span>
+    <!---->
   </button>
   <div
     class="t-overlay t-image-viewer"
@@ -181,17 +189,19 @@ exports[`ImageViewer > ImageViewer imageListVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              图片列表 
             
           </span>
+          <!---->
         </button>
         <div
           class="t-overlay t-image-viewer"
@@ -239,17 +249,19 @@ exports[`ImageViewer > ImageViewer initialIndexVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              默认展示 
             
           </span>
+          <!---->
         </button>
         <div
           class="t-overlay t-image-viewer"
@@ -308,18 +320,20 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-734c791c=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              基础用法 
             
           </span>
+          <!---->
         </button>
         <div
           class="t-overlay t-image-viewer"
@@ -336,18 +350,20 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-04bcb836=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             不展示关闭按钮
             
           </span>
+          <!---->
         </button>
         <div
           class="t-overlay t-image-viewer"
@@ -364,18 +380,20 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-3939d0e3=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             监听关闭事件
             
           </span>
+          <!---->
         </button>
         <div
           class="t-overlay t-image-viewer"
diff --git a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
index 9b0e4cb4d..4db1ae484 100644
--- a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
@@ -1919,31 +1919,35 @@ exports[`Indexes > Indexes mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              字母索引 
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              数字索引 
             
           </span>
+          <!---->
         </button>
       </div>
       
diff --git a/src/input/__test__/__snapshots__/demo.test.jsx.snap b/src/input/__test__/__snapshots__/demo.test.jsx.snap
index b32650168..0af4e1458 100644
--- a/src/input/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/input/__test__/__snapshots__/demo.test.jsx.snap
@@ -1101,17 +1101,19 @@ exports[`Input > Input mobileVue demo works fine 1`] = `
               
               <button
                 aria-disabled="false"
-                class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+                class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
                 role="button"
+                type="button"
               >
                 <!---->
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   
                    操作按钮 
                   
                 </span>
+                <!---->
               </button>
               
             </div>
@@ -2797,17 +2799,19 @@ exports[`Input > Input suffixVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+            class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
                操作按钮 
               
             </span>
+            <!---->
           </button>
           
         </div>
diff --git a/src/list/__test__/__snapshots__/demo.test.jsx.snap b/src/list/__test__/__snapshots__/demo.test.jsx.snap
index 281635fc0..a297738c1 100644
--- a/src/list/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/list/__test__/__snapshots__/demo.test.jsx.snap
@@ -75,45 +75,51 @@ exports[`List > List mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
                基础列表 
               
             </span>
+            <!---->
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
                下拉刷新 
               
             </span>
+            <!---->
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
                错误提示 
               
             </span>
+            <!---->
           </button>
           
         </div>
diff --git a/src/message/__test__/__snapshots__/demo.test.jsx.snap b/src/message/__test__/__snapshots__/demo.test.jsx.snap
index 5823dd7d2..06d1597e4 100644
--- a/src/message/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/message/__test__/__snapshots__/demo.test.jsx.snap
@@ -12,78 +12,88 @@ exports[`Message > Message baseVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       data-v-e60c559e=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         纯文字的通知
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       data-v-e60c559e=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         带图标的通知
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       data-v-e60c559e=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         带关闭的通知
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       data-v-e60c559e=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         可滚动的通知
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       data-v-e60c559e=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         带按钮的通知
         
       </span>
+      <!---->
     </button>
   </div>
   <!-- 纯文字通知 -->
@@ -144,78 +154,88 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-e60c559e=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             纯文字的通知
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-e60c559e=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             带图标的通知
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-e60c559e=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             带关闭的通知
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-e60c559e=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             可滚动的通知
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-e60c559e=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             带按钮的通知
             
           </span>
+          <!---->
         </button>
       </div>
       <!-- 纯文字通知 -->
@@ -260,63 +280,71 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-fba28ece=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             普通通知
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-fba28ece=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             成功通知
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-fba28ece=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             警示通知
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-fba28ece=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             错误通知
             
           </span>
+          <!---->
         </button>
       </div>
       
@@ -333,63 +361,71 @@ exports[`Message > Message themeVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-fba28ece=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       普通通知
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-fba28ece=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       成功通知
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-fba28ece=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       警示通知
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-fba28ece=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       错误通知
       
     </span>
+    <!---->
   </button>
 </div>
 `;
diff --git a/src/overlay/__test__/__snapshots__/demo.test.jsx.snap b/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
index b5506ebc2..cdcd19e5f 100644
--- a/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
@@ -7,17 +7,19 @@ exports[`Overlay > Overlay baseVue demo works fine 1`] = `
   
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       基础用法
       
     </span>
+    <!---->
   </button>
   <div
     class="t-overlay"
@@ -71,17 +73,19 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             基础用法
             
           </span>
+          <!---->
         </button>
         <div
           class="t-overlay"
diff --git a/src/popup/__test__/__snapshots__/demo.test.jsx.snap b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
index b9fb01b53..1b72c1cd8 100644
--- a/src/popup/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
@@ -8,78 +8,88 @@ exports[`Popup > Popup baseVue demo works fine 1`] = `
   
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-70969ba8=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       顶部弹出
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-70969ba8=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       左侧弹出
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-70969ba8=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       中间弹出
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-70969ba8=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       底部弹出
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-70969ba8=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       右侧弹出
       
     </span>
+    <!---->
   </button>
   
   <teleport-stub
@@ -113,17 +123,19 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       居中弹出层-带自定义关闭按钮
       
     </span>
+    <!---->
   </button>
   <teleport-stub
     disabled="false"
@@ -204,78 +216,88 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-70969ba8=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             顶部弹出
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-70969ba8=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             左侧弹出
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-70969ba8=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             中间弹出
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-70969ba8=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             底部弹出
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-70969ba8=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             右侧弹出
             
           </span>
+          <!---->
         </button>
         
         <teleport-stub
@@ -333,18 +355,20 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-099d70a8=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             底部弹出层-带标题及操作
             
           </span>
+          <!---->
         </button>
         <teleport-stub
           data-v-099d70a8=""
@@ -400,17 +424,19 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             居中弹出层-带自定义关闭按钮
             
           </span>
+          <!---->
         </button>
         <teleport-stub
           disabled="false"
@@ -455,18 +481,20 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     data-v-099d70a8=""
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       底部弹出层-带标题及操作
       
     </span>
+    <!---->
   </button>
   <teleport-stub
     data-v-099d70a8=""
diff --git a/src/progress/__test__/__snapshots__/demo.test.jsx.snap b/src/progress/__test__/__snapshots__/demo.test.jsx.snap
index dfbf3b473..22d8bc6fa 100644
--- a/src/progress/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/progress/__test__/__snapshots__/demo.test.jsx.snap
@@ -667,18 +667,20 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
             >
               <button
                 aria-disabled="false"
-                class="t-button t-size-s t-button--outline t-button--primary t-button--shape-rectangle"
+                class="t-button t-button--size-small t-button--outline t-button--primary t-button--rectangle"
                 data-v-09d2fdec=""
                 role="button"
+                type="button"
               >
                 <!---->
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   
                   减少
                   
                 </span>
+                <!---->
               </button>
               <div
                 class="space"
@@ -686,18 +688,20 @@ exports[`Progress > Progress mobileVue demo works fine 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+                class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
                 data-v-09d2fdec=""
                 role="button"
+                type="button"
               >
                 <!---->
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   
                   增加
                   
                 </span>
+                <!---->
               </button>
             </div>
           </div>
@@ -984,18 +988,20 @@ exports[`Progress > Progress statusVue demo works fine 1`] = `
         >
           <button
             aria-disabled="false"
-            class="t-button t-size-s t-button--outline t-button--primary t-button--shape-rectangle"
+            class="t-button t-button--size-small t-button--outline t-button--primary t-button--rectangle"
             data-v-09d2fdec=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               减少
               
             </span>
+            <!---->
           </button>
           <div
             class="space"
@@ -1003,18 +1009,20 @@ exports[`Progress > Progress statusVue demo works fine 1`] = `
           />
           <button
             aria-disabled="false"
-            class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+            class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
             data-v-09d2fdec=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               增加
               
             </span>
+            <!---->
           </button>
         </div>
       </div>
diff --git a/src/result/__test__/__snapshots__/demo.test.jsx.snap b/src/result/__test__/__snapshots__/demo.test.jsx.snap
index d9ec9a122..6f91f8fdd 100644
--- a/src/result/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/result/__test__/__snapshots__/demo.test.jsx.snap
@@ -416,18 +416,20 @@ exports[`Result > Result mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
           data-v-772b64ec=""
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
              页面位置展示 
             
           </span>
+          <!---->
         </button>
       </div>
       
diff --git a/src/sticky/__test__/__snapshots__/demo.test.jsx.snap b/src/sticky/__test__/__snapshots__/demo.test.jsx.snap
index 443f0426a..4003158ab 100644
--- a/src/sticky/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/sticky/__test__/__snapshots__/demo.test.jsx.snap
@@ -13,18 +13,20 @@ exports[`Sticky > Sticky baseVue demo works fine 1`] = `
     
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle common-button"
+      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle common-button"
       data-v-4a742626=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         基础吸顶
         
       </span>
+      <!---->
     </button>
     
   </div>
@@ -49,18 +51,20 @@ exports[`Sticky > Sticky containerVue demo works fine 1`] = `
       
       <button
         aria-disabled="false"
-        class="t-button t-size-l t-button--base t-button--default t-button--shape-rectangle common-button green-button"
+        class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle common-button green-button"
         data-v-046295d6=""
         role="button"
+        type="button"
       >
         <!---->
         <span
-          class="t-button__text"
+          class="t-button__content"
         >
           
           指定容器
           
         </span>
+        <!---->
       </button>
       
     </div>
@@ -116,18 +120,20 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle common-button"
+            class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle common-button"
             data-v-4a742626=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               基础吸顶
               
             </span>
+            <!---->
           </button>
           
         </div>
@@ -166,18 +172,20 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle common-button"
+            class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle common-button"
             data-v-ec54aea2=""
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               吸顶距离
               
             </span>
+            <!---->
           </button>
           
         </div>
@@ -221,18 +229,20 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-l t-button--base t-button--default t-button--shape-rectangle common-button green-button"
+              class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle common-button green-button"
               data-v-046295d6=""
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 指定容器
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -257,18 +267,20 @@ exports[`Sticky > Sticky offsetVue demo works fine 1`] = `
     
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle common-button"
+      class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle common-button"
       data-v-ec54aea2=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         吸顶距离
         
       </span>
+      <!---->
     </button>
     
   </div>
diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
index 56f8f7128..ee67ef0eb 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -103,17 +103,19 @@ exports[`SwipeCell > SwipeCell bindVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+            class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               删除
               
             </span>
+            <!---->
           </button>
           
           
@@ -158,17 +160,19 @@ exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+            class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               选择
               
             </span>
+            <!---->
           </button>
           
           
@@ -206,31 +210,35 @@ exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               收藏
               
             </span>
+            <!---->
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
+            class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               删除
               
             </span>
+            <!---->
           </button>
           
           
@@ -295,19 +303,20 @@ exports[`SwipeCell > SwipeCell contentVue demo works fine 1`] = `
           <div>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
               role="button"
               style="height: 100%;"
               type="submit"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
           </div>
           
@@ -424,33 +433,37 @@ exports[`SwipeCell > SwipeCell disabledVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+            class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
             role="button"
             style="height: 100%;"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               收藏
               
             </span>
+            <!---->
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-s t-button--base t-button--danger t-button--shape-rectangle"
+            class="t-button t-button--size-small t-button--base t-button--danger t-button--rectangle"
             role="button"
             style="height: 100%;"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               删除
               
             </span>
+            <!---->
           </button>
           
           
@@ -495,17 +508,19 @@ exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
             role="button"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               选择
               
             </span>
+            <!---->
           </button>
           
           
@@ -549,33 +564,37 @@ exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
             role="button"
             style="height: 100%;"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               删除
               
             </span>
+            <!---->
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
             role="button"
             style="height: 100%;"
+            type="button"
           >
             <!---->
             <span
-              class="t-button__text"
+              class="t-button__content"
             >
               
               收藏
               
             </span>
+            <!---->
           </button>
           
         </div>
@@ -668,17 +687,19 @@ exports[`SwipeCell > SwipeCell leftCardVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -758,17 +779,19 @@ exports[`SwipeCell > SwipeCell leftCardVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -858,48 +881,54 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--warning"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -970,48 +999,54 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--warning"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -1097,17 +1132,19 @@ exports[`SwipeCell > SwipeCell leftOneMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -1178,17 +1215,19 @@ exports[`SwipeCell > SwipeCell leftOneMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -1278,33 +1317,37 @@ exports[`SwipeCell > SwipeCell leftTwoMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -1375,33 +1418,37 @@ exports[`SwipeCell > SwipeCell leftTwoMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -1497,17 +1544,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -1578,17 +1627,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -1671,33 +1722,37 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -1768,33 +1823,37 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -1875,48 +1934,54 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--warning"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -1987,48 +2052,54 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--warning"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--primary"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 编辑
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle t-button--danger"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -2116,17 +2187,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2206,17 +2279,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2260,17 +2335,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 选择
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2341,17 +2418,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 选择
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2502,17 +2581,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2574,19 +2655,20 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             <div>
               <button
                 aria-disabled="false"
-                class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+                class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
                 role="button"
                 style="height: 100%;"
                 type="submit"
               >
                 <!---->
                 <span
-                  class="t-button__text"
+                  class="t-button__content"
                 >
                   
                   收藏
                   
                 </span>
+                <!---->
               </button>
             </div>
             
@@ -2700,33 +2782,37 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+              class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-s t-button--base t-button--danger t-button--shape-rectangle"
+              class="t-button t-button--size-small t-button--base t-button--danger t-button--rectangle"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2768,17 +2854,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 选择
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2816,31 +2904,35 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2882,17 +2974,19 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 选择
                 
               </span>
+              <!---->
             </button>
             
             
@@ -2936,33 +3030,37 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 删除
                 
               </span>
+              <!---->
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+              class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
               role="button"
               style="height: 100%;"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 收藏
                 
               </span>
+              <!---->
             </button>
             
           </div>
@@ -3010,17 +3108,19 @@ exports[`SwipeCell > SwipeCell rightMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 选择
                 
               </span>
+              <!---->
             </button>
             
             
@@ -3091,17 +3191,19 @@ exports[`SwipeCell > SwipeCell rightMenuVue demo works fine 1`] = `
             
             <button
               aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--square"
               role="button"
+              type="button"
             >
               <!---->
               <span
-                class="t-button__text"
+                class="t-button__content"
               >
                 
                 选择
                 
               </span>
+              <!---->
             </button>
             
             
diff --git a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
index 3671504b6..7e1db993c 100644
--- a/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swiper/__test__/__snapshots__/demo.test.jsx.snap
@@ -222,48 +222,54 @@ exports[`Swiper > Swiper controlVue demo works fine 1`] = `
      手动指定页数： 
     <button
       aria-disabled="false"
-      class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
       data-v-7617ffc0=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         第一页
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+      class="t-button t-button--size-small t-button--base t-button--default t-button--rectangle"
       data-v-7617ffc0=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         第二页
         
       </span>
+      <!---->
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+      class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
       data-v-7617ffc0=""
       role="button"
+      type="button"
     >
       <!---->
       <span
-        class="t-button__text"
+        class="t-button__content"
       >
         
         第三页
         
       </span>
+      <!---->
     </button>
   </p>
   <p
diff --git a/src/toast/__test__/__snapshots__/demo.test.jsx.snap b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
index 3221d6a6d..cdb77c7a7 100644
--- a/src/toast/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,73 +6,83 @@ exports[`Toast > Toast baseVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       纯文本
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       多行文字
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       带横向图标
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       带竖向图标
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       加载状态
       
     </span>
+    <!---->
   </button>
 </div>
 `;
@@ -83,31 +93,35 @@ exports[`Toast > Toast closeVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       显示提示
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       关闭提示
       
     </span>
+    <!---->
   </button>
 </div>
 `;
@@ -118,17 +132,19 @@ exports[`Toast > Toast coverVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       禁止滑动和点击
       
     </span>
+    <!---->
   </button>
 </div>
 `;
@@ -173,73 +189,83 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             纯文本
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             多行文字
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             带横向图标
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             带竖向图标
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             加载状态
             
           </span>
+          <!---->
         </button>
       </div>
       
@@ -271,45 +297,51 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             成功提示
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             警告提示
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             错误提示
             
           </span>
+          <!---->
         </button>
       </div>
       
@@ -341,17 +373,19 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             禁止滑动和点击
             
           </span>
+          <!---->
         </button>
       </div>
       
@@ -383,31 +417,35 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             显示提示
             
           </span>
+          <!---->
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
+          type="button"
         >
           <!---->
           <span
-            class="t-button__text"
+            class="t-button__content"
           >
             
             关闭提示
             
           </span>
+          <!---->
         </button>
       </div>
       
@@ -422,45 +460,51 @@ exports[`Toast > Toast themeVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       成功提示
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       警告提示
       
     </span>
+    <!---->
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
+    type="button"
   >
     <!---->
     <span
-      class="t-button__text"
+      class="t-button__content"
     >
       
       错误提示
       
     </span>
+    <!---->
   </button>
 </div>
 `;