From 9fdc297686557ca87f3a3cb79a1497a577926797 Mon Sep 17 00:00:00 2001
From: Cherry7 <79909910+CCherry07@users.noreply.github.com>
Date: Sun, 7 May 2023 20:33:24 +0800
Subject: [PATCH] docs(button): update demo with space (#6536)

* feat(button): demo space

* test(button): update demo snap

* chore(button): disabled demo Ghost space

* test(button): update disabled demo snap
---
 .../__tests__/__snapshots__/demo.test.js.snap | 530 +++++++++++-------
 components/button/demo/basic.vue              |  12 +-
 components/button/demo/block.vue              |  12 +-
 components/button/demo/button-group.vue       |   1 -
 components/button/demo/danger.vue             |   4 +-
 components/button/demo/disabled.vue           |  69 ++-
 components/button/demo/ghost.vue              |  12 +-
 components/button/demo/icon.vue               | 100 +---
 components/button/demo/loading.vue            |  36 +-
 components/button/demo/multiple.vue           |  32 +-
 components/button/demo/size.vue               |  84 +--
 11 files changed, 507 insertions(+), 385 deletions(-)

diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
index dd0b59672..a706d9d1d 100644
--- a/components/button/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -1,39 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/button/demo/basic.vue correctly 1`] = `
-<button class="ant-btn ant-btn-primary" type="button">
-  <!----><span>Primary Button</span>
-</button>
-<button class="ant-btn ant-btn-default" type="button">
-  <!----><span>Default Button</span>
-</button>
-<button class="ant-btn ant-btn-dashed" type="button">
-  <!----><span>Dashed Button</span>
-</button>
-<button class="ant-btn ant-btn-text" type="button">
-  <!----><span>Text Button</span>
-</button>
-<button class="ant-btn ant-btn-link" type="button">
-  <!----><span>Link Button</span>
-</button>
+<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+      <!----><span>Primary Button</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span>Default Button</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-dashed" type="button">
+      <!----><span>Dashed Button</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-text" type="button">
+      <!----><span>Text Button</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="padding-bottom: 8px;"><button class="ant-btn ant-btn-link" type="button">
+      <!----><span>Link Button</span>
+    </button></div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/button/demo/block.vue correctly 1`] = `
-<button class="ant-btn ant-btn-primary ant-btn-block" type="button">
-  <!----><span>Primary</span>
-</button>
-<button class="ant-btn ant-btn-default ant-btn-block" type="button">
-  <!----><span>Default</span>
-</button>
-<button class="ant-btn ant-btn-dashed ant-btn-block" type="button">
-  <!----><span>Dashed</span>
-</button>
-<button class="ant-btn ant-btn-default ant-btn-block ant-btn-dangerous" type="button">
-  <!----><span>Danger</span>
-</button>
-<button class="ant-btn ant-btn-link ant-btn-block" type="button">
-  <!----><span>Link</span>
-</button>
+<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-primary ant-btn-block" type="button">
+      <!----><span>Primary</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-default ant-btn-block" type="button">
+      <!----><span>Default</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-block" type="button">
+      <!----><span>Dashed</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-default ant-btn-block ant-btn-dangerous" type="button">
+      <!----><span>Danger</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="padding-bottom: 8px;"><button class="ant-btn ant-btn-link ant-btn-block" type="button">
+      <!----><span>Link</span>
+    </button></div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/button/demo/button-group.vue correctly 1`] = `
@@ -71,186 +85,322 @@ exports[`renders ./components/button/demo/button-group.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/button/demo/danger.vue correctly 1`] = `
-<div><button class="ant-btn ant-btn-primary ant-btn-dangerous" type="button">
-    <!----><span>Primary</span>
-  </button><button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
-    <!----><span>Default</span>
-  </button><button class="ant-btn ant-btn-dashed ant-btn-dangerous" type="button">
-    <!----><span>Dashed</span>
-  </button><button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
-    <!----><span>Text</span>
-  </button><button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
-    <!----><span>Link</span>
-  </button></div>
+<div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-dangerous" type="button">
+      <!----><span>Primary</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
+      <!----><span>Default</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-dangerous" type="button">
+      <!----><span>Dashed</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
+      <!----><span>Text</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item"><button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
+      <!----><span>Link</span>
+    </button></div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/button/demo/disabled.vue correctly 1`] = `
-<button class="ant-btn ant-btn-primary" type="button">
-  <!----><span>Primary</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-primary" type="button">
-  <!----><span>Primary(disabled)</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-default" type="button">
-  <!----><span>Default</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-default" type="button">
-  <!----><span>Default(disabled)</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-dashed" type="button">
-  <!----><span>Dashed</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-dashed" type="button">
-  <!----><span>Dashed(disabled)</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-text" type="button">
-  <!----><span>Text</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-text" type="button">
-  <!----><span>Text(disabled)</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-link" type="button">
-  <!----><span>Link</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-link" type="button">
-  <!----><span>Link(disabled)</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
-  <!----><span>Danger Default</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
-  <!----><span>Danger Default(disabled)</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
-  <!----><span>Danger Text</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
-  <!----><span>Danger Text(disabled)</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
-  <!----><span>Danger Link</span>
-</button>
-<button disabled="" class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
-  <!----><span>Danger Link(disabled)</span>
-</button>
-<br>
-<div style="padding: 8px 8px 0px 8px; background: rgb(190, 200, 200);"><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
-    <!----><span>Ghost</span>
-  </button><button disabled="" class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
-    <!----><span>Ghost(disabled)</span>
-  </button></div>
+<div class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+          <!----><span>Primary</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-primary" type="button">
+          <!----><span>Primary(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
+          <!----><span>Default</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-default" type="button">
+          <!----><span>Default(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed" type="button">
+          <!----><span>Dashed</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-dashed" type="button">
+          <!----><span>Dashed(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-text" type="button">
+          <!----><span>Text</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-text" type="button">
+          <!----><span>Text(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-link" type="button">
+          <!----><span>Link</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-link" type="button">
+          <!----><span>Link(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
+          <!----><span>Danger Default</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
+          <!----><span>Danger Default(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
+          <!----><span>Danger Text</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
+          <!----><span>Danger Text(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
+          <!----><span>Danger Link</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
+          <!----><span>Danger Link(disabled)</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div style="padding: 8px; background: rgb(190, 200, 200);">
+      <div class="ant-space ant-space-horizontal ant-space-align-center">
+        <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
+            <!----><span>Ghost</span>
+          </button></div>
+        <!---->
+        <div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
+            <!----><span>Ghost(disabled)</span>
+          </button></div>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/button/demo/ghost.vue correctly 1`] = `
-<div style="background: rgb(190, 200, 200); padding: 26px 16px 16px;"><button class="ant-btn ant-btn-primary ant-btn-background-ghost" type="button">
-    <!----><span>Primary</span>
-  </button><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
-    <!----><span>Default</span>
-  </button><button class="ant-btn ant-btn-dashed ant-btn-background-ghost" type="button">
-    <!----><span>Dashed</span>
-  </button><button class="ant-btn ant-btn-primary ant-btn-background-ghost ant-btn-dangerous" type="button">
-    <!----><span>Danger</span>
-  </button></div>
+<div style="background: rgb(190, 200, 200); padding: 16px 16px;">
+  <div class="ant-space ant-space-horizontal ant-space-align-center">
+    <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-background-ghost" type="button">
+        <!----><span>Primary</span>
+      </button></div>
+    <!---->
+    <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
+        <!----><span>Default</span>
+      </button></div>
+    <!---->
+    <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-background-ghost" type="button">
+        <!----><span>Dashed</span>
+      </button></div>
+    <!---->
+    <div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-background-ghost ant-btn-dangerous" type="button">
+        <!----><span>Danger</span>
+      </button></div>
+    <!---->
+  </div>
+</div>
 `;
 
 exports[`renders ./components/button/demo/icon.vue correctly 1`] = `
-<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-circle ant-btn-primary" type="button">
-  <!----><span>A</span>
-</button>
-<button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-dashed" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<a class="ant-btn ant-btn-default ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
-<br>
-<br>
-<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg" type="button">
-  <!----><span>A</span>
-</button>
-<button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-default ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<br>
-<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-default ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
-<button class="ant-btn ant-btn-dashed ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
-<a class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
+<div class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;">
+        <!----><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
+      </div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary" type="button">
+          <!----><span>A</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;">
+        <!----><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
+      </div>
+      <!---->
+      <div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;">
+        <!----><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
+      </div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;">
+        <!----><button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
+      </div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
+      <!---->
+      <div class="ant-space-item"><a class="ant-btn ant-btn-default ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/button/demo/loading.vue correctly 1`] = `
-<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
-  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
+<div class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
+      <!---->
+      <div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
+      <!---->
+    </div>
+  </div>
   <!---->
-  <div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+          <!----><span>mouseenter me!</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><svg focusable="false" class="" data-icon="poweroff" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path></svg></span><span>延迟1s</span></button></div>
+      <!---->
+    </div>
+  </div>
   <!---->
-</div>
-<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
-  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
-      <!----><span>mouseenter me!</span>
-    </button></div>
-  <!---->
-  <div class="ant-space-item"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><svg focusable="false" class="" data-icon="poweroff" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path></svg></span><span>延迟1s</span></button></div>
-  <!---->
-</div>
-<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
-  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
-  <!---->
-  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
-  <!---->
-  <div class="ant-space-item"><button class="ant-btn ant-btn-round ant-btn-default ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
+  <div class="ant-space-item">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
+      <!---->
+      <div class="ant-space-item"><button class="ant-btn ant-btn-round ant-btn-default ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
+      <!---->
+    </div>
+  </div>
   <!---->
 </div>
 `;
 
 exports[`renders ./components/button/demo/multiple.vue correctly 1`] = `
-<button class="ant-btn ant-btn-primary" type="button">
-  <!----><span>Primary</span>
-</button>
-<button class="ant-btn ant-btn-default" type="button">
-  <!----><span>secondary</span>
-</button>
-<button class="ant-btn ant-btn-default ant-dropdown-trigger" type="button">
-  <!----><span>Actions</span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
-</button>
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+      <!----><span>Primary</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span>secondary</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item">
+    <!----><button class="ant-btn ant-btn-default ant-dropdown-trigger" type="button">
+      <!----><span>Actions</span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+    </button>
+  </div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/button/demo/size.vue correctly 1`] = `
-<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
-<br>
-<br>
-<button class="ant-btn ant-btn-primary ant-btn-lg" type="button">
-  <!----><span>Primary</span>
-</button>
-<button class="ant-btn ant-btn-default ant-btn-lg" type="button">
-  <!----><span>Normal</span>
-</button>
-<button class="ant-btn ant-btn-dashed ant-btn-lg" type="button">
-  <!----><span>Dashed</span>
-</button>
-<button class="ant-btn ant-btn-default ant-btn-lg ant-btn-dangerous" type="button">
-  <!----><span>Danger</span>
-</button>
-<button class="ant-btn ant-btn-link ant-btn-lg" type="button">
-  <!----><span>Link</span>
-</button>
-<br>
-<button class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
-<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
-<button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button>
-<button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
-<button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button>
-<br>
+<div class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-lg" type="button">
+          <!----><span>Primary</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-lg" type="button">
+          <!----><span>Normal</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-lg" type="button">
+          <!----><span>Dashed</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-lg ant-btn-dangerous" type="button">
+          <!----><span>Danger</span>
+        </button></div>
+      <!---->
+      <div class="ant-space-item"><button class="ant-btn ant-btn-link ant-btn-lg" type="button">
+          <!----><span>Link</span>
+        </button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div class="ant-space ant-space-horizontal ant-space-align-center">
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button></div>
+      <!---->
+      <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button></div>
+      <!---->
+      <div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button></div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+</div>
 `;
diff --git a/components/button/demo/basic.vue b/components/button/demo/basic.vue
index ff7893f34..c42c6105b 100644
--- a/components/button/demo/basic.vue
+++ b/components/button/demo/basic.vue
@@ -17,9 +17,11 @@ There are `primary` button, `default` button, `dashed` button, `text` button and
 </docs>
 
 <template>
-  <a-button type="primary">Primary Button</a-button>
-  <a-button>Default Button</a-button>
-  <a-button type="dashed">Dashed Button</a-button>
-  <a-button type="text">Text Button</a-button>
-  <a-button type="link">Link Button</a-button>
+  <a-space wrap>
+    <a-button type="primary">Primary Button</a-button>
+    <a-button>Default Button</a-button>
+    <a-button type="dashed">Dashed Button</a-button>
+    <a-button type="text">Text Button</a-button>
+    <a-button type="link">Link Button</a-button>
+  </a-space>
 </template>
diff --git a/components/button/demo/block.vue b/components/button/demo/block.vue
index 1d9a65a65..888e36d47 100644
--- a/components/button/demo/block.vue
+++ b/components/button/demo/block.vue
@@ -16,9 +16,11 @@ title:
 </docs>
 
 <template>
-  <a-button type="primary" block>Primary</a-button>
-  <a-button block>Default</a-button>
-  <a-button type="dashed" block>Dashed</a-button>
-  <a-button danger block>Danger</a-button>
-  <a-button type="link" block>Link</a-button>
+  <a-space wrap>
+    <a-button type="primary" block>Primary</a-button>
+    <a-button block>Default</a-button>
+    <a-button type="dashed" block>Dashed</a-button>
+    <a-button danger block>Danger</a-button>
+    <a-button type="link" block>Link</a-button>
+  </a-space>
 </template>
diff --git a/components/button/demo/button-group.vue b/components/button/demo/button-group.vue
index d142bdbd8..8cfffbce1 100644
--- a/components/button/demo/button-group.vue
+++ b/components/button/demo/button-group.vue
@@ -34,7 +34,6 @@ Debug usage
       <a-button>M</a-button>
       <a-button type="dashed">R</a-button>
     </a-button-group>
-
     <h4>With Icon</h4>
     <a-button-group>
       <a-button type="primary">
diff --git a/components/button/demo/danger.vue b/components/button/demo/danger.vue
index afbcead11..82bed2089 100644
--- a/components/button/demo/danger.vue
+++ b/components/button/demo/danger.vue
@@ -17,11 +17,11 @@ danger is a property of button after antd 2.2.0.
 </docs>
 
 <template>
-  <div>
+  <a-space warp>
     <a-button type="primary" danger>Primary</a-button>
     <a-button danger>Default</a-button>
     <a-button type="dashed" danger>Dashed</a-button>
     <a-button type="text" danger>Text</a-button>
     <a-button type="link" danger>Link</a-button>
-  </div>
+  </a-space>
 </template>
diff --git a/components/button/demo/disabled.vue b/components/button/demo/disabled.vue
index 6b3e09e68..836951b13 100644
--- a/components/button/demo/disabled.vue
+++ b/components/button/demo/disabled.vue
@@ -16,33 +16,44 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
 </docs>
 
 <template>
-  <a-button type="primary">Primary</a-button>
-  <a-button type="primary" disabled>Primary(disabled)</a-button>
-  <br />
-  <a-button>Default</a-button>
-  <a-button disabled>Default(disabled)</a-button>
-  <br />
-  <a-button type="dashed">Dashed</a-button>
-  <a-button type="dashed" disabled>Dashed(disabled)</a-button>
-  <br />
-  <a-button type="text">Text</a-button>
-  <a-button type="text" disabled>Text(disabled)</a-button>
-  <br />
-  <a-button type="link">Link</a-button>
-  <a-button type="link" disabled>Link(disabled)</a-button>
-  <br />
-  <a-button danger>Danger Default</a-button>
-  <a-button danger disabled>Danger Default(disabled)</a-button>
-  <br />
-  <a-button type="text" danger>Danger Text</a-button>
-  <a-button type="text" danger disabled>Danger Text(disabled)</a-button>
-  <br />
-  <a-button type="link" danger>Danger Link</a-button>
-  <a-button type="link" danger disabled>Danger Link(disabled)</a-button>
-  <br />
-
-  <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
-    <a-button ghost>Ghost</a-button>
-    <a-button ghost disabled>Ghost(disabled)</a-button>
-  </div>
+  <a-space direction="vertical">
+    <a-space>
+      <a-button type="primary">Primary</a-button>
+      <a-button type="primary" disabled>Primary(disabled)</a-button>
+    </a-space>
+    <a-space>
+      <a-button>Default</a-button>
+      <a-button disabled>Default(disabled)</a-button>
+    </a-space>
+    <a-space>
+      <a-button type="dashed">Dashed</a-button>
+      <a-button type="dashed" disabled>Dashed(disabled)</a-button>
+    </a-space>
+    <a-space>
+      <a-button type="text">Text</a-button>
+      <a-button type="text" disabled>Text(disabled)</a-button>
+    </a-space>
+    <a-space>
+      <a-button type="link">Link</a-button>
+      <a-button type="link" disabled>Link(disabled)</a-button>
+    </a-space>
+    <a-space>
+      <a-button danger>Danger Default</a-button>
+      <a-button danger disabled>Danger Default(disabled)</a-button>
+    </a-space>
+    <a-space>
+      <a-button danger type="text">Danger Text</a-button>
+      <a-button danger type="text" disabled>Danger Text(disabled)</a-button>
+    </a-space>
+    <a-space>
+      <a-button danger type="link">Danger Link</a-button>
+      <a-button danger type="link" disabled>Danger Link(disabled)</a-button>
+    </a-space>
+    <div :style="{ padding: '8px', background: 'rgb(190, 200, 200)' }">
+      <a-space>
+        <a-button ghost>Ghost</a-button>
+        <a-button ghost disabled>Ghost(disabled)</a-button>
+      </a-space>
+    </div>
+  </a-space>
 </template>
diff --git a/components/button/demo/ghost.vue b/components/button/demo/ghost.vue
index c36838fe3..9637d784f 100644
--- a/components/button/demo/ghost.vue
+++ b/components/button/demo/ghost.vue
@@ -17,10 +17,12 @@ title:
 </docs>
 
 <template>
-  <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
-    <a-button type="primary" ghost>Primary</a-button>
-    <a-button ghost>Default</a-button>
-    <a-button type="dashed" ghost>Dashed</a-button>
-    <a-button type="primary" danger ghost>Danger</a-button>
+  <div :style="{ background: 'rgb(190, 200, 200)', padding: '16px 16px' }">
+    <a-space>
+      <a-button type="primary" ghost>Primary</a-button>
+      <a-button ghost>Default</a-button>
+      <a-button type="dashed" ghost>Dashed</a-button>
+      <a-button type="primary" danger ghost>Danger</a-button>
+    </a-space>
   </div>
 </template>
diff --git a/components/button/demo/icon.vue b/components/button/demo/icon.vue
index f820cb47d..b0a702d59 100644
--- a/components/button/demo/icon.vue
+++ b/components/button/demo/icon.vue
@@ -20,82 +20,32 @@ If you want specific control over the positioning and placement of the `Icon`, t
 </docs>
 
 <template>
-  <a-button type="primary" shape="circle">
-    <template #icon><SearchOutlined /></template>
-  </a-button>
-  <a-button type="primary" shape="circle">A</a-button>
-  <a-button type="primary">
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <a-button shape="circle">
-    <template #icon><SearchOutlined /></template>
-  </a-button>
-  <a-button>
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <a-button shape="circle">
-    <template #icon><SearchOutlined /></template>
-  </a-button>
-  <a-button>
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <a-button type="dashed" shape="circle">
-    <template #icon><SearchOutlined /></template>
-  </a-button>
-  <a-button type="dashed">
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <a-button href="https://www.google.com">
-    <template #icon><SearchOutlined /></template>
-  </a-button>
-  <br />
-  <br />
-  <a-tooltip title="search">
-    <a-button type="primary" shape="circle" size="large">
-      <template #icon><SearchOutlined /></template>
-    </a-button>
-  </a-tooltip>
-  <a-button type="primary" shape="circle" size="large">A</a-button>
-  <a-button type="primary" size="large">
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <a-tooltip title="search">
-    <a-button shape="circle" size="large">
-      <template #icon><SearchOutlined /></template>
-    </a-button>
-  </a-tooltip>
-  <a-button size="large">
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <br />
-  <a-tooltip title="search">
-    <a-button shape="circle" size="large">
-      <template #icon><SearchOutlined /></template>
-    </a-button>
-  </a-tooltip>
-  <a-button size="large">
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <a-tooltip title="search">
-    <a-button type="dashed" shape="circle" size="large">
-      <template #icon><SearchOutlined /></template>
-    </a-button>
-  </a-tooltip>
-  <a-button type="dashed" size="large">
-    <template #icon><SearchOutlined /></template>
-    Search
-  </a-button>
-  <a-button size="large" href="https://www.google.com">
-    <template #icon><SearchOutlined /></template>
-  </a-button>
+  <a-space direction="vertical">
+    <a-space warp>
+      <a-tooltip title="search">
+        <a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
+      </a-tooltip>
+      <a-button type="primary" shape="circle">A</a-button>
+      <a-button type="primary" :icon="h(SearchOutlined)">Search</a-button>
+      <a-tooltip title="search">
+        <a-button shape="circle" :icon="h(SearchOutlined)" />
+      </a-tooltip>
+      <a-button :icon="h(SearchOutlined)">Search</a-button>
+    </a-space>
+    <a-space warp>
+      <a-tooltip title="search">
+        <a-button shape="circle" :icon="h(SearchOutlined)" />
+      </a-tooltip>
+      <a-button :icon="h(SearchOutlined)">Search</a-button>
+      <a-tooltip title="search">
+        <a-button type="dashed" shape="circle" :icon="h(SearchOutlined)" />
+      </a-tooltip>
+      <a-button type="dashed" :icon="h(SearchOutlined)">Search</a-button>
+      <a-button :icon="h(SearchOutlined)" href="https://www.google.com" />
+    </a-space>
+  </a-space>
 </template>
 <script lang="ts" setup>
+import { h } from 'vue';
 import { SearchOutlined } from '@ant-design/icons-vue';
 </script>
diff --git a/components/button/demo/loading.vue b/components/button/demo/loading.vue
index 750337ddc..96d3ce985 100644
--- a/components/button/demo/loading.vue
+++ b/components/button/demo/loading.vue
@@ -16,23 +16,25 @@ A loading indicator can be added to a button by setting the `loading` property o
 </docs>
 
 <template>
-  <a-space style="width: 100%">
-    <a-button type="primary" loading>Loading</a-button>
-    <a-button type="primary" size="small" loading>Loading</a-button>
-  </a-space>
-  <a-space style="width: 100%">
-    <a-button type="primary" :loading="loading" @mouseenter="loading = true">
-      mouseenter me!
-    </a-button>
-    <a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
-      <template #icon><PoweroffOutlined /></template>
-      延迟1s
-    </a-button>
-  </a-space>
-  <a-space style="width: 100%">
-    <a-button type="primary" loading />
-    <a-button type="primary" shape="circle" loading />
-    <a-button danger shape="round" loading />
+  <a-space direction="vertical">
+    <a-space>
+      <a-button type="primary" loading>Loading</a-button>
+      <a-button type="primary" size="small" loading>Loading</a-button>
+    </a-space>
+    <a-space>
+      <a-button type="primary" :loading="loading" @mouseenter="loading = true">
+        mouseenter me!
+      </a-button>
+      <a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
+        <template #icon><PoweroffOutlined /></template>
+        延迟1s
+      </a-button>
+    </a-space>
+    <a-space>
+      <a-button type="primary" loading />
+      <a-button type="primary" shape="circle" loading />
+      <a-button danger shape="round" loading />
+    </a-space>
   </a-space>
 </template>
 <script lang="ts" setup>
diff --git a/components/button/demo/multiple.vue b/components/button/demo/multiple.vue
index 1a7062402..4d3455c1a 100644
--- a/components/button/demo/multiple.vue
+++ b/components/button/demo/multiple.vue
@@ -16,21 +16,23 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
 </docs>
 
 <template>
-  <a-button type="primary">Primary</a-button>
-  <a-button>secondary</a-button>
-  <a-dropdown>
-    <template #overlay>
-      <a-menu @click="handleMenuClick">
-        <a-menu-item key="1">1st item</a-menu-item>
-        <a-menu-item key="2">2nd item</a-menu-item>
-        <a-menu-item key="3">3rd item</a-menu-item>
-      </a-menu>
-    </template>
-    <a-button>
-      Actions
-      <DownOutlined />
-    </a-button>
-  </a-dropdown>
+  <a-space>
+    <a-button type="primary">Primary</a-button>
+    <a-button>secondary</a-button>
+    <a-dropdown>
+      <template #overlay>
+        <a-menu @click="handleMenuClick">
+          <a-menu-item key="1">1st item</a-menu-item>
+          <a-menu-item key="2">2nd item</a-menu-item>
+          <a-menu-item key="3">3rd item</a-menu-item>
+        </a-menu>
+      </template>
+      <a-button>
+        Actions
+        <DownOutlined />
+      </a-button>
+    </a-dropdown>
+  </a-space>
 </template>
 
 <script lang="ts" setup>
diff --git a/components/button/demo/size.vue b/components/button/demo/size.vue
index d2bc2db76..f525515a6 100644
--- a/components/button/demo/size.vue
+++ b/components/button/demo/size.vue
@@ -20,47 +20,49 @@ If a large or small button is desired, set the `size` property to either `large`
 </docs>
 
 <template>
-  <a-radio-group v-model:value="size">
-    <a-radio-button value="large">Large</a-radio-button>
-    <a-radio-button value="default">Default</a-radio-button>
-    <a-radio-button value="small">Small</a-radio-button>
-  </a-radio-group>
-  <br />
-  <br />
-  <a-button type="primary" :size="size">Primary</a-button>
-  <a-button :size="size">Normal</a-button>
-  <a-button type="dashed" :size="size">Dashed</a-button>
-  <a-button danger :size="size">Danger</a-button>
-  <a-button type="link" :size="size">Link</a-button>
-  <br />
-  <a-button type="primary" :size="size">
-    <template #icon>
-      <DownloadOutlined />
-    </template>
-  </a-button>
-  <a-button type="primary" shape="circle" :size="size">
-    <template #icon>
-      <DownloadOutlined />
-    </template>
-  </a-button>
-  <a-button type="primary" shape="round" :size="size">
-    <template #icon>
-      <DownloadOutlined />
-    </template>
-    Download
-  </a-button>
-  <a-button type="primary" shape="round" :size="size">
-    <template #icon>
-      <DownloadOutlined />
-    </template>
-  </a-button>
-  <a-button type="primary" :size="size">
-    <template #icon>
-      <DownloadOutlined />
-    </template>
-    Download
-  </a-button>
-  <br />
+  <a-space direction="vertical">
+    <a-radio-group v-model:value="size">
+      <a-radio-button value="large">Large</a-radio-button>
+      <a-radio-button value="default">Default</a-radio-button>
+      <a-radio-button value="small">Small</a-radio-button>
+    </a-radio-group>
+    <a-space>
+      <a-button type="primary" :size="size">Primary</a-button>
+      <a-button :size="size">Normal</a-button>
+      <a-button type="dashed" :size="size">Dashed</a-button>
+      <a-button danger :size="size">Danger</a-button>
+      <a-button type="link" :size="size">Link</a-button>
+    </a-space>
+    <a-space>
+      <a-button type="primary" :size="size">
+        <template #icon>
+          <DownloadOutlined />
+        </template>
+      </a-button>
+      <a-button type="primary" shape="circle" :size="size">
+        <template #icon>
+          <DownloadOutlined />
+        </template>
+      </a-button>
+      <a-button type="primary" shape="round" :size="size">
+        <template #icon>
+          <DownloadOutlined />
+        </template>
+        Download
+      </a-button>
+      <a-button type="primary" shape="round" :size="size">
+        <template #icon>
+          <DownloadOutlined />
+        </template>
+      </a-button>
+      <a-button type="primary" :size="size">
+        <template #icon>
+          <DownloadOutlined />
+        </template>
+        Download
+      </a-button>
+    </a-space>
+  </a-space>
 </template>
 <script lang="ts" setup>
 import { DownloadOutlined } from '@ant-design/icons-vue';