fix(Button): text not align center in legacy safari (#6325)

src/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -51,7 +51,11 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block van-button--round"><span class="van-button__text">删除</span></button></div>
+      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+          <div class="van-button__content"><span class="van-button__text">保存</span></div>
+        </button><button class="van-button van-button--default van-button--normal van-button--block van-button--round">
+          <div class="van-button__content"><span class="van-button__text">删除</span></div>
+        </button></div>
     </div>
   </div>
 </div>

src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -35,7 +35,9 @@ exports[`create a AddressEdit 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+      <div class="van-button__content"><span class="van-button__text">保存</span></div>
+    </button></div>
 </div>
 `;
 
@@ -88,7 +90,9 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+      <div class="van-button__content"><span class="van-button__text">保存</span></div>
+    </button></div>
 </div>
 `;
 
@@ -141,7 +145,9 @@ exports[`set-default 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+      <div class="van-button__content"><span class="van-button__text">保存</span></div>
+    </button></div>
 </div>
 `;
 
@@ -194,7 +200,9 @@ exports[`show area component 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+      <div class="van-button__content"><span class="van-button__text">保存</span></div>
+    </button></div>
 </div>
 `;
 
@@ -247,7 +255,9 @@ exports[`show area component 2`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+      <div class="van-button__content"><span class="van-button__text">保存</span></div>
+    </button></div>
 </div>
 `;
 
@@ -286,6 +296,8 @@ exports[`valid area placeholder confirm 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+      <div class="van-button__content"><span class="van-button__text">保存</span></div>
+    </button></div>
 </div>
 `;

src/address-list/test/__snapshots__/demo.spec.js.snap

@@ -40,7 +40,9 @@ exports[`renders demo correctly 1`] = `
           <!----></i>
       </div>
     </div>
-    <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
+    <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
+        <div class="van-button__content"><span class="van-button__text">新增地址</span></div>
+      </button></div>
   </div>
 </div>
 </div>

src/address-list/test/__snapshots__/index.spec.js.snap

@@ -22,6 +22,8 @@ exports[`unswitchable 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
+  <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
+      <div class="van-button__content"><span class="van-button__text">新增地址</span></div>
+    </button></div>
 </div>
 `;

src/button/index.less

@@ -2,9 +2,7 @@
 
 .van-button {
   position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
   box-sizing: border-box;
   height: @button-default-height;
   margin: 0;
@@ -125,7 +123,7 @@
   }
 
   &--block {
-    display: flex;
+    display: block;
     width: 100%;
   }
 
@@ -146,6 +144,15 @@
     border-radius: 0;
   }
 
+  // align-items are ignored when flex container is a button in legacy safari
+  // see: https://bugs.webkit.org/show_bug.cgi?id=169700
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
   &__icon {
     min-width: 1em;
     font-size: 1.2em;

src/button/index.tsx

@@ -149,7 +149,7 @@ function Button(
       onTouchstart={onTouchstart}
       {...inherit(ctx)}
     >
-      {Content()}
+      <div class={bem('content')}>{Content()}</div>
     </tag>
   );
 }

src/button/test/__snapshots__/demo.spec.js.snap

@@ -3,26 +3,84 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
+    <div class="demo-button-row"><button class="van-button van-button--default van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
+      </button> <button class="van-button van-button--primary van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">主要按钮</span></div>
+      </button> <button class="van-button van-button--info van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
+      </button></div> <button class="van-button van-button--danger van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
+    </button> <button class="van-button van-button--warning van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">警告按钮</span></div>
+    </button>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
-  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--loading">
-      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    </button> <button class="van-button van-button--primary van-button--normal van-button--loading">
-      <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
-    </button> <button class="van-button van-button--info van-button--normal van-button--loading">
-      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain">
+      <div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
+    </button> <button class="van-button van-button--info van-button--normal van-button--plain">
+      <div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround">
+      <div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
+    </button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround">
+      <div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
+    </button></div>
+  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled">
+      <div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
+    </button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled">
+      <div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--loading">
+      <div class="van-button__content">
+        <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+      </div>
+    </button> <button class="van-button van-button--primary van-button--normal van-button--loading">
+      <div class="van-button__content">
+        <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+      </div>
+    </button> <button class="van-button van-button--info van-button--normal van-button--loading">
+      <div class="van-button__content">
+        <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
+      </div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--square">
+      <div class="van-button__content"><span class="van-button__text">方形按钮</span></div>
+    </button> <button class="van-button van-button--info van-button--normal van-button--round">
+      <div class="van-button__content"><span class="van-button__text">圆形按钮</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
+          <!----></i></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
+          <!----></i><span class="van-button__text">按钮</span></div>
+    </button> <button class="van-button van-button--primary van-button--normal van-button--plain">
+      <div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
+          <!----></i><span class="van-button__text">按钮</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--large">
+      <div class="van-button__content"><span class="van-button__text">大号按钮</span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">普通按钮</span></div>
+    </button> <button class="van-button van-button--primary van-button--small">
+      <div class="van-button__content"><span class="van-button__text">小型按钮</span></div>
+    </button> <button class="van-button van-button--primary van-button--mini">
+      <div class="van-button__content"><span class="van-button__text">迷你按钮</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--block">
+      <div class="van-button__content"><span class="van-button__text">块级元素</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">URL 跳转</span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
+    </button></div>
+  <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+      <div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
+    </button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
+      <div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
+    </button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
+      <div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
     </button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
-        <!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
-        <!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
-        <!----></i><span class="van-button__text">按钮</span></button></div>
-  <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">块级元素</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
-  <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
 </div>
 `;

src/button/test/__snapshots__/index.spec.js.snap

@@ -1,12 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`icon-prefix prop 1`] = `
-<button class="van-button van-button--default van-button--normal"><i class="my-icon my-icon-success van-button__icon">
-    <!----></i></button>
+<button class="van-button van-button--default van-button--normal">
+  <div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">
+      <!----></i></div>
+</button>
 `;
 
 exports[`loading-size prop 1`] = `
 <button class="van-button van-button--default van-button--normal van-button--loading">
-  <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+  <div class="van-button__content">
+    <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+  </div>
 </button>
 `;

src/calendar/test/__snapshots__/index.spec.js.snap

@@ -47,7 +47,9 @@ exports[`color prop when type is range 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
+      <div class="van-button__content"><span class="van-button__text">确定</span></div>
+    </button></div>
 </div>
 `;
 
@@ -98,7 +100,9 @@ exports[`color prop when type is single 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
+      <div class="van-button__content"><span class="van-button__text">确定</span></div>
+    </button></div>
 </div>
 `;
 
@@ -152,7 +156,9 @@ exports[`formatter prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
+      <div class="van-button__content"><span class="van-button__text">确定</span></div>
+    </button></div>
 </div>
 `;
 
@@ -206,7 +212,9 @@ exports[`popup wrapper 2`] = `
         </div>
       </div>
     </div>
-    <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
+    <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
+        <div class="van-button__content"><span class="van-button__text">确定</span></div>
+      </button></div>
   </div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
     <!----></i>
 </div>
@@ -259,7 +267,9 @@ exports[`row-height prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
+      <div class="van-button__content"><span class="van-button__text">确定</span></div>
+    </button></div>
 </div>
 `;
 

src/card/test/__snapshots__/demo.spec.js.snap

@@ -77,11 +77,15 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-card__footer">
-        <div><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
+        <div><button class="van-button van-button--default van-button--mini van-button--round">
+            <div class="van-button__content"><span class="van-button__text">
             按钮
-          </span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
+          </span></div>
+          </button> <button class="van-button van-button--default van-button--mini van-button--round">
+            <div class="van-button__content"><span class="van-button__text">
             按钮
-          </span></button></div>
+          </span></div>
+          </button></div>
       </div>
     </div>
   </div>

src/checkbox/test/__snapshots__/demo.spec.js.snap

@@ -116,11 +116,15 @@ exports[`renders demo correctly 1`] = `
             <!----></i></div><span class="van-checkbox__label">复选框 c</span>
       </div>
     </div>
-    <div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+    <div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">
         全选
-      </span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">
+      </span></div>
+      </button> <button class="van-button van-button--info van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">
         反选
-      </span></button></div>
+      </span></div>
+      </button></div>
   </div>
   <div>
     <div class="van-checkbox-group">

src/circle/test/__snapshots__/demo.spec.js.snap

@@ -48,6 +48,10 @@ exports[`renders demo correctly 1`] = `
       <div class="van-circle__text">大小定制</div>
     </div>
   </div>
-  <div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
+  <div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small">
+      <div class="van-button__content"><span class="van-button__text">增加</span></div>
+    </button> <button class="van-button van-button--danger van-button--small">
+      <div class="van-button__content"><span class="van-button__text">减少</span></div>
+    </button></div>
 </div>
 `;

src/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -20,7 +20,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
+        <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
+            <div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
+          </button></div>
       </div>
     </div>
     <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
@@ -47,7 +49,9 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
+        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+            <div class="van-button__content"><span class="van-button__text">保存</span></div>
+          </button></div>
       </div>
     </div>
   </div>

src/contact-card/test/__snapshots__/index.spec.js.snap

@@ -12,6 +12,8 @@ exports[`ContactList render 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
+  <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
+      <div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
+    </button></div>
 </div>
 `;

src/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -7,7 +7,9 @@ exports[`empty-image prop 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
       </div>
-    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
+    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
+      <div class="van-button__content"><span class="van-button__text">兑换</span></div>
+    </button>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
@@ -30,7 +32,9 @@ exports[`empty-image prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
+  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
+      <div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
+    </button></div>
 </div>
 `;
 
@@ -57,7 +61,9 @@ exports[`render coupon list 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
       </div>
-    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
+    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
+      <div class="van-button__content"><span class="van-button__text">兑换</span></div>
+    </button>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
@@ -176,7 +182,9 @@ exports[`render coupon list 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
+  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
+      <div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
+    </button></div>
 </div>
 `;
 
@@ -203,7 +211,9 @@ exports[`render empty coupon list 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
       </div>
-    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
+    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
+      <div class="van-button__content"><span class="van-button__text">兑换</span></div>
+    </button>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
@@ -230,6 +240,8 @@ exports[`render empty coupon list 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
+  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
+      <div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
+    </button></div>
 </div>
 `;

src/dialog/test/__snapshots__/demo.spec.js.snap

@@ -2,24 +2,38 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
       提示弹窗
-    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+    </span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
       提示弹窗（无标题）
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+    </span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
       确认弹窗
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+    </span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
       异步关闭
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+    </span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
       组件调用
-    </span></button>
+    </span></div>
+    </button>
     <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
       <div class="van-dialog__header">标题</div>
       <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
-      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">确认弹窗</span></button></div>
+      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
+          <div class="van-button__content"><span class="van-button__text">取消</span></div>
+        </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
+          <div class="van-button__content"><span class="van-button__text">确认弹窗</span></div>
+        </button></div>
     </div>
   </div>
 </div>

src/dialog/test/__snapshots__/index.spec.js.snap

@@ -2,26 +2,38 @@
 
 exports[`button color 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;"><span class="van-button__text">确认</span></button></div>
+  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
+      <div class="van-button__content"><span class="van-button__text">取消</span></div>
+    </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
+      <div class="van-button__content"><span class="van-button__text">确认</span></div>
+    </button></div>
 </div>
 `;
 
 exports[`button text 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">Custom cancel</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">Custom confirm</span></button></div>
+  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
+      <div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
+    </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
+      <div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>
+    </button></div>
 </div>
 `;
 
 exports[`default slot 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
   <div class="van-dialog__content">Custom Message</div>
-  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
+      <div class="van-button__content"><span class="van-button__text">确认</span></div>
+    </button></div>
 </div>
 `;
 
 exports[`title slot 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
   <div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
-  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
+      <div class="van-button__content"><span class="van-button__text">确认</span></div>
+    </button></div>
 </div>
 `;

src/empty/test/__snapshots__/demo.spec.js.snap

@@ -44,9 +44,11 @@ exports[`renders demo correctly 1`] = `
     <div class="van-empty">
       <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
       <p class="van-empty__description">描述文字</p>
-      <div class="van-empty__bottom"><button class="bottom-button van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">
+      <div class="van-empty__bottom"><button class="bottom-button van-button van-button--danger van-button--normal van-button--round">
+          <div class="van-button__content"><span class="van-button__text">
         按钮
-      </span></button></div>
+      </span></div>
+        </button></div>
     </div>
   </div>
 </div>

src/field/test/__snapshots__/demo.spec.js.snap

@@ -99,9 +99,11 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell__title van-field__label"><span>短信验证码</span></div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
-          <div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
+          <div class="van-field__button"><button class="van-button van-button--primary van-button--small">
+              <div class="van-button__content"><span class="van-button__text">
         发送验证码
-      </span></button></div>
+      </span></div>
+            </button></div>
         </div>
       </div>
     </div>

src/form/test/__snapshots__/demo.spec.js.snap

@@ -16,9 +16,11 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
         </div>
       </div>
-      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
+      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
+          <div class="van-button__content"><span class="van-button__text">
         提交
-      </span></button></div>
+      </span></div>
+        </button></div>
     </form>
   </div>
   <div>
@@ -41,9 +43,11 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body"><input type="text" name="asyncValidator" placeholder="异步函数校验" class="van-field__control"></div>
         </div>
       </div>
-      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
+      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
+          <div class="van-button__content"><span class="van-button__text">
         提交
-      </span></button></div>
+      </span></div>
+        </button></div>
     </form>
   </div>
   <div>
@@ -208,9 +212,11 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
         </div>
       </div>
-      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
+      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
+          <div class="van-button__content"><span class="van-button__text">
         提交
-      </span></button></div>
+      </span></div>
+        </button></div>
     </form>
   </div>
 </div>

src/form/test/__snapshots__/events.spec.js.snap

@@ -13,6 +13,8 @@ exports[`failed event 1`] = `
       <div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
       <div class="van-field__error-message">B failed</div>
     </div>
-  </div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
+  </div> <button type="submit" class="van-button van-button--default van-button--normal">
+    <div class="van-button__content"></div>
+  </button>
 </form>
 `;

src/form/test/__snapshots__/methods.spec.js.snap

@@ -12,6 +12,8 @@ exports[`resetValidation method - reset one field 1`] = `
       <div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
       <div class="van-field__error-message">B failed</div>
     </div>
-  </div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
+  </div> <button type="submit" class="van-button van-button--default van-button--normal">
+    <div class="van-button__content"></div>
+  </button>
 </form>
 `;

src/form/test/__snapshots__/props.spec.js.snap

@@ -93,6 +93,8 @@ exports[`validate-first prop 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
     </div>
-  </div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
+  </div> <button type="submit" class="van-button van-button--default van-button--normal">
+    <div class="van-button__content"></div>
+  </button>
 </form>
 `;

src/goods-action/test/__snapshots__/demo.spec.js.snap

@@ -13,7 +13,11 @@ exports[`renders demo correctly 1`] = `
         <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
           <!---->
         </div>购物车
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
     </div>
   </div>
   <div>
@@ -32,7 +36,11 @@ exports[`renders demo correctly 1`] = `
         <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
           <div class="van-info">12</div>
         </div>店铺
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
     </div>
   </div>
   <div>
@@ -51,7 +59,11 @@ exports[`renders demo correctly 1`] = `
         <div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
           <!---->
         </div>已收藏
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
     </div>
   </div>
   <div>
@@ -65,7 +77,11 @@ exports[`renders demo correctly 1`] = `
         <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
           <!---->
         </div>购物车
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
     </div>
   </div>
 </div>

src/goods-action/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--last"><span class="van-button__text">Default Content</span></button>`;
+exports[`Button render default slot 1`] = `
+<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--last">
+  <div class="van-button__content"><span class="van-button__text">Default Content</span></div>
+</button>
+`;
 
 exports[`Icon render default slot 1`] = `
 <div role="button" tabindex="0" class="van-goods-action-icon">

src/notify/test/__snapshots__/demo.spec.js.snap

@@ -2,10 +2,24 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--danger van-button--normal"><span class="van-button__text">基础用法</span></button></div>
+  <div><button class="van-button van-button--danger van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">基础用法</span></div>
+    </button></div>
   <div>
-    <div style="margin-bottom: 15px;"><button class="van-button van-button--info van-button--normal"><span class="van-button__text">主要通知</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">成功通知</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险通知</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告通知</span></button>
+    <div style="margin-bottom: 15px;"><button class="van-button van-button--info van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">主要通知</span></div>
+      </button> <button class="van-button van-button--primary van-button--normal">
+        <div class="van-button__content"><span class="van-button__text">成功通知</span></div>
+      </button></div> <button class="van-button van-button--danger van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">危险通知</span></div>
+    </button> <button class="van-button van-button--warning van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">警告通知</span></div>
+    </button>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义时长</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">自定义颜色</span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">自定义时长</span></div>
+    </button></div>
 </div>
 `;

src/overlay/test/__snapshots__/demo.spec.js.snap

@@ -2,10 +2,14 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">显示遮罩层</span></button>
+  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
+      <div class="van-button__content"><span class="van-button__text">显示遮罩层</span></div>
+    </button>
     <div class="van-overlay" style="display: none;" name="van-fade"></div>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">嵌入内容</span></button>
+  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
+      <div class="van-button__content"><span class="van-button__text">嵌入内容</span></div>
+    </button>
     <div class="van-overlay" style="display: none;" name="van-fade">
       <div class="wrapper">
         <div class="block"></div>

src/panel/test/__snapshots__/demo.spec.js.snap

@@ -26,9 +26,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-panel__content">
         <div>内容</div>
       </div>
-      <div class="van-panel__footer van-hairline--top"><button class="van-button van-button--default van-button--small"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">
+      <div class="van-panel__footer van-hairline--top"><button class="van-button van-button--default van-button--small">
+          <div class="van-button__content"><span class="van-button__text">按钮</span></div>
+        </button> <button class="van-button van-button--danger van-button--small">
+          <div class="van-button__content"><span class="van-button__text">
           按钮
-        </span></button></div>
+        </span></div>
+        </button></div>
     </div>
   </div>
 </div>

src/sku/test/__snapshots__/demo.spec.js.snap

@@ -4,27 +4,35 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="sku-container">
-      <!----> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+      <!----> <button class="van-button van-button--primary van-button--normal van-button--block">
+        <div class="van-button__content"><span class="van-button__text">
         基础用法
-      </span></button></div>
+      </span></div>
+      </button></div>
   </div>
   <div>
     <div class="sku-container">
-      <!----> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+      <!----> <button class="van-button van-button--primary van-button--normal van-button--block">
+        <div class="van-button__content"><span class="van-button__text">
         自定义步进器
-      </span></button></div>
+      </span></div>
+      </button></div>
   </div>
   <div>
     <div class="sku-container">
-      <!----> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+      <!----> <button class="van-button van-button--primary van-button--normal van-button--block">
+        <div class="van-button__content"><span class="van-button__text">
         隐藏售罄规格
-      </span></button></div>
+      </span></div>
+      </button></div>
   </div>
   <div>
     <div class="sku-container">
-      <!----> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+      <!----> <button class="van-button van-button--primary van-button--normal van-button--block">
+        <div class="van-button__content"><span class="van-button__text">
         高级用法
-      </span></button></div>
+      </span></div>
+      </button></div>
   </div>
 </div>
 `;

src/steps/test/__snapshots__/demo.spec.js.snap

@@ -27,7 +27,9 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__line"></div>
         </div>
       </div>
-    </div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">下一步</span></button>
+    </div> <button class="van-button van-button--default van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">下一步</span></div>
+    </button>
   </div>
   <div>
     <div class="van-steps van-steps--horizontal">

src/sticky/test/__snapshots__/demo.spec.js.snap

@@ -4,24 +4,30 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div>
-      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">
+      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;">
+          <div class="van-button__content"><span class="van-button__text">
         基础用法
-      </span></button></div>
+      </span></div>
+        </button></div>
     </div>
   </div>
   <div>
     <div style="height: 0px;">
-      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">
+      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;">
+          <div class="van-button__content"><span class="van-button__text">
         吸顶距离
-      </span></button></div>
+      </span></div>
+        </button></div>
     </div>
   </div>
   <div>
     <div style="height: 150px; background-color: rgb(255, 255, 255);">
       <div>
-        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">
+        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;">
+            <div class="van-button__content"><span class="van-button__text">
           指定容器
-        </span></button></div>
+        </span></div>
+          </button></div>
       </div>
     </div>
   </div>

src/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -5,7 +5,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-submit-bar">
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+          <div class="van-button__content"><span class="van-button__text">提交订单</span></div>
+        </button>
       </div>
     </div>
   </div>
@@ -14,7 +16,9 @@ exports[`renders demo correctly 1`] = `
       <div class="van-submit-bar__tip"><i class="van-icon van-icon-info-o van-submit-bar__tip-icon">
           <!----></i><span class="van-submit-bar__tip-text">你的收货地址不支持同城送, 我们已为你推荐快递</span></div>
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger">
+          <div class="van-button__content"><span class="van-button__text">提交订单</span></div>
+        </button>
       </div>
     </div>
   </div>
@@ -22,7 +26,9 @@ exports[`renders demo correctly 1`] = `
     <div class="van-submit-bar">
       <div class="van-submit-bar__bar">
         <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--loading van-button--round van-submit-bar__button van-submit-bar__button--danger">
-          <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+          <div class="van-button__content">
+            <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+          </div>
         </button>
       </div>
     </div>
@@ -39,7 +45,9 @@ exports[`renders demo correctly 1`] = `
           <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
               <!----></i></div><span class="van-checkbox__label">全选</span>
         </div>
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+          <div class="van-button__content"><span class="van-button__text">提交订单</span></div>
+        </button>
       </div>
     </div>
   </div>

src/submit-bar/test/__snapshots__/index.spec.js.snap

@@ -3,21 +3,27 @@
 exports[`decimal-length prop 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.1</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.1</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+      <div class="van-button__content"></div>
+    </button>
   </div>
 </div>
 `;
 
 exports[`disable safe-area-inset-bottom prop 1`] = `
 <div class="van-submit-bar van-submit-bar--unfit">
-  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button></div>
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+      <div class="van-button__content"></div>
+    </button></div>
 </div>
 `;
 
 exports[`disable submit 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">0</span>.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">0</span>.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger">
+      <div class="van-button__content"></div>
+    </button>
   </div>
 </div>
 `;
@@ -25,7 +31,9 @@ exports[`disable submit 1`] = `
 exports[`suffix-label prop 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
+    <div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+      <div class="van-button__content"></div>
+    </button>
   </div>
 </div>
 `;
@@ -33,18 +41,24 @@ exports[`suffix-label prop 1`] = `
 exports[`text-align prop 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text" style="text-align: left;"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button>
+    <div class="van-submit-bar__text" style="text-align: left;"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+      <div class="van-button__content"></div>
+    </button>
   </div>
 </div>
 `;
 
 exports[`top slot 1`] = `
-<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button></div>
+<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+      <div class="van-button__content"></div>
+    </button></div>
 </div>
 `;
 
 exports[`without price 1`] = `
 <div class="van-submit-bar">
-  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button></div>
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+      <div class="van-button__content"></div>
+    </button></div>
 </div>
 `;

src/swipe-cell/test/__snapshots__/demo.spec.js.snap

@@ -6,12 +6,18 @@ exports[`renders demo correctly 1`] = `
     <div>
       <div class="van-swipe-cell">
         <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
-          <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
+          <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">选择</span></div>
+            </button></div>
           <div class="van-cell van-cell--borderless">
             <div class="van-cell__title"><span>单元格</span></div>
             <div class="van-cell__value"><span>内容</span></div>
           </div>
-          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button> <button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">收藏</span></button></div>
+          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">删除</span></div>
+            </button> <button class="van-button van-button--primary van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">收藏</span></div>
+            </button></div>
         </div>
       </div>
     </div>
@@ -39,19 +45,25 @@ exports[`renders demo correctly 1`] = `
               </div>
             </div>
           </div>
-          <div class="van-swipe-cell__right"><button class="delete-button van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button></div>
+          <div class="van-swipe-cell__right"><button class="delete-button van-button van-button--danger van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">删除</span></div>
+            </button></div>
         </div>
       </div>
     </div>
     <div>
       <div class="van-swipe-cell">
         <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
-          <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
+          <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">选择</span></div>
+            </button></div>
           <div class="van-cell van-cell--borderless">
             <div class="van-cell__title"><span>单元格</span></div>
             <div class="van-cell__value"><span>内容</span></div>
           </div>
-          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button></div>
+          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">删除</span></div>
+            </button></div>
         </div>
       </div>
     </div>

src/toast/test/__snapshots__/demo.spec.js.snap

@@ -2,10 +2,28 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">文字提示</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">长文字提示</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">加载提示</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义加载图标</span></button></div>
-  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">成功提示</span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">失败提示</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义图标</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">展示图片</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">动态更新提示</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">文字提示</span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">长文字提示</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">加载提示</span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">自定义加载图标</span></div>
+    </button></div>
+  <div><button class="van-button van-button--info van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">成功提示</span></div>
+    </button> <button class="van-button van-button--danger van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">失败提示</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">自定义图标</span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">展示图片</span></div>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">动态更新提示</span></div>
+    </button></div>
 </div>
 `;

src/uploader/test/__snapshots__/demo.spec.js.snap

@@ -95,10 +95,12 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">
-        <div class="van-uploader__input-wrapper"><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-photo van-button__icon">
-              <!----></i><span class="van-button__text">
+        <div class="van-uploader__input-wrapper"><button class="van-button van-button--primary van-button--normal">
+            <div class="van-button__content"><i class="van-icon van-icon-photo van-button__icon">
+                <!----></i><span class="van-button__text">
         上传文件
-      </span></button><input type="file" accept="image/*" class="van-uploader__input"></div>
+      </span></div>
+          </button><input type="file" accept="image/*" class="van-uploader__input"></div>
       </div>
     </div>
   </div>