docs: improve component demo style (#38598)

* docs: delete redundant codes

repetitive examples that can make it difficult for developers to read

* chore: update snapshot

* docs(badge): wrapping documents with `Space`

* chore: update snapshot

* chore(space): optimize documents

easy to read

* chore: update badge demo

* chore: update demo

* Revert "chore(space): optimize documents"

This reverts commit 88a4378f16cede5b628f885a48a341d507fd53e3.

* chore: update snapshots

* chore(button): add debug demo

* test(button): update snapshots

* docs(button): example document beautify

* test(button): update snapshots

commit by af04705c8f

* test(alert): update snapshots

* chore: Reverse format

components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success"
       data-show="true"
@@ -72,7 +79,12 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description"
       data-show="true"
@@ -123,7 +135,12 @@ Array [
           </span>
         </button>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
       data-show="true"
@@ -183,7 +200,11 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -261,12 +282,20 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-banner"
       data-show="true"
@@ -300,8 +329,12 @@ Array [
           Warning text
         </div>
       </div>
-  </div>,
+    </div>
-  <br />,
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-banner"
       data-show="true"
@@ -360,8 +393,12 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
-  <br />,
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
       data-show="true"
@@ -376,8 +413,11 @@ Array [
           Warning text without icon
         </div>
       </div>
-  </div>,
+    </div>
-  <br />,
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-banner"
       data-show="true"
@@ -411,8 +451,9 @@ Array [
           Error text
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`] = `
@@ -434,7 +475,14 @@ exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`]
 `;
 
 exports[`renders ./components/alert/demo/closable.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
       data-show="true"
@@ -474,7 +522,11 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -519,8 +571,9 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/close-text.tsx extend context correctly 1`] = `
@@ -553,7 +606,14 @@ exports[`renders ./components/alert/demo/close-text.tsx extend context correctly
 `;
 
 exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
       data-show="true"
@@ -568,7 +628,12 @@ Array [
           showIcon = false
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success"
       data-show="true"
@@ -602,7 +667,12 @@ Array [
           Success Tips
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info"
       data-show="true"
@@ -636,7 +706,12 @@ Array [
           Informational Notes
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning"
       data-show="true"
@@ -670,7 +745,12 @@ Array [
           Warning
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-error"
       data-show="true"
@@ -704,7 +784,12 @@ Array [
           Error
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description"
       data-show="true"
@@ -743,7 +828,12 @@ Array [
           Detailed description and advices about successful copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description"
       data-show="true"
@@ -782,7 +872,12 @@ Array [
           Additional description and informations about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description"
       data-show="true"
@@ -821,7 +916,11 @@ Array [
           This is a warning notice about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description"
       data-show="true"
@@ -860,12 +959,20 @@ Array [
           This is an error message about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/description.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -885,7 +992,12 @@ Array [
           Success Description Success Description Success Description
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -905,7 +1017,12 @@ Array [
           Info Description Info Description Info Description Info Description
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -925,7 +1042,11 @@ Array [
           Warning Description Warning Description Warning Description Warning Description
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -945,8 +1066,9 @@ Array [
           Error Description Error Description Error Description Error Description
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
@@ -961,7 +1083,14 @@ exports[`renders ./components/alert/demo/error-boundary.tsx extend context corre
 `;
 
 exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success"
       data-show="true"
@@ -995,7 +1124,12 @@ Array [
           Success Tips
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info"
       data-show="true"
@@ -1029,7 +1163,12 @@ Array [
           Informational Notes
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning"
       data-show="true"
@@ -1088,7 +1227,12 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-error"
       data-show="true"
@@ -1122,7 +1266,12 @@ Array [
           Error
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description"
       data-show="true"
@@ -1161,7 +1310,12 @@ Array [
           Detailed description and advice about successful copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description"
       data-show="true"
@@ -1200,7 +1354,12 @@ Array [
           Additional description and information about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description"
       data-show="true"
@@ -1264,7 +1423,11 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description"
       data-show="true"
@@ -1303,12 +1466,20 @@ Array [
           This is an error message about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
-<div>
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
       data-show="true"
@@ -1349,14 +1520,52 @@ exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correc
         </span>
       </button>
     </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <p>
-    placeholder text here
+      click the close button to see the effect
     </p>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked ant-switch-disabled"
+      disabled=""
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        />
+        <span
+          class="ant-switch-inner-unchecked"
+        />
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/style.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
       data-show="true"
@@ -1371,7 +1580,12 @@ Array [
           Success Text
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-no-icon"
       data-show="true"
@@ -1386,7 +1600,12 @@ Array [
           Info Text
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
       data-show="true"
@@ -1401,7 +1620,11 @@ Array [
           Warning Text
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-no-icon"
       data-show="true"
@@ -1416,6 +1639,7 @@ Array [
           Error Text
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;

components/alert/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/alert/demo/action.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success"
       data-show="true"
@@ -72,7 +79,12 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description"
       data-show="true"
@@ -123,7 +135,12 @@ Array [
           </span>
         </button>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
       data-show="true"
@@ -183,7 +200,11 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -261,12 +282,20 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/banner.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-banner"
       data-show="true"
@@ -300,8 +329,12 @@ Array [
           Warning text
         </div>
       </div>
-  </div>,
+    </div>
-  <br />,
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-banner"
       data-show="true"
@@ -360,8 +393,12 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
-  <br />,
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
       data-show="true"
@@ -376,8 +413,11 @@ Array [
           Warning text without icon
         </div>
       </div>
-  </div>,
+    </div>
-  <br />,
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-banner"
       data-show="true"
@@ -411,8 +451,9 @@ Array [
           Error text
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = `
@@ -434,7 +475,14 @@ exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/closable.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
       data-show="true"
@@ -474,7 +522,11 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -519,8 +571,9 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = `
@@ -553,7 +606,14 @@ exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/custom-icon.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
       data-show="true"
@@ -568,7 +628,12 @@ Array [
           showIcon = false
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success"
       data-show="true"
@@ -602,7 +667,12 @@ Array [
           Success Tips
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info"
       data-show="true"
@@ -636,7 +706,12 @@ Array [
           Informational Notes
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning"
       data-show="true"
@@ -670,7 +745,12 @@ Array [
           Warning
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-error"
       data-show="true"
@@ -704,7 +784,12 @@ Array [
           Error
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description"
       data-show="true"
@@ -743,7 +828,12 @@ Array [
           Detailed description and advices about successful copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description"
       data-show="true"
@@ -782,7 +872,12 @@ Array [
           Additional description and informations about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description"
       data-show="true"
@@ -821,7 +916,11 @@ Array [
           This is a warning notice about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description"
       data-show="true"
@@ -860,12 +959,20 @@ Array [
           This is an error message about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/description.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -885,7 +992,12 @@ Array [
           Success Description Success Description Success Description
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -905,7 +1017,12 @@ Array [
           Info Description Info Description Info Description Info Description
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -925,7 +1042,11 @@ Array [
           Warning Description Warning Description Warning Description Warning Description
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
       data-show="true"
@@ -945,8 +1066,9 @@ Array [
           Error Description Error Description Error Description Error Description
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = `
@@ -961,7 +1083,14 @@ exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/icon.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success"
       data-show="true"
@@ -995,7 +1124,12 @@ Array [
           Success Tips
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info"
       data-show="true"
@@ -1029,7 +1163,12 @@ Array [
           Informational Notes
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning"
       data-show="true"
@@ -1088,7 +1227,12 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-error"
       data-show="true"
@@ -1122,7 +1266,12 @@ Array [
           Error
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description"
       data-show="true"
@@ -1161,7 +1310,12 @@ Array [
           Detailed description and advice about successful copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description"
       data-show="true"
@@ -1200,7 +1354,12 @@ Array [
           Additional description and information about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description"
       data-show="true"
@@ -1264,7 +1423,11 @@ Array [
           </svg>
         </span>
       </button>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description"
       data-show="true"
@@ -1303,12 +1466,20 @@ Array [
           This is an error message about copywriting.
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = `
-<div>
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
       data-show="true"
@@ -1349,14 +1520,52 @@ exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = `
         </span>
       </button>
     </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <p>
-    placeholder text here
+      click the close button to see the effect
     </p>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked ant-switch-disabled"
+      disabled=""
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        />
+        <span
+          class="ant-switch-inner-unchecked"
+        />
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/alert/demo/style.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
       data-show="true"
@@ -1371,7 +1580,12 @@ Array [
           Success Text
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-info ant-alert-no-icon"
       data-show="true"
@@ -1386,7 +1600,12 @@ Array [
           Info Text
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
       data-show="true"
@@ -1401,7 +1620,11 @@ Array [
           Warning Text
         </div>
       </div>
-  </div>,
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-alert ant-alert-error ant-alert-no-icon"
       data-show="true"
@@ -1416,6 +1639,7 @@ Array [
           Error Text
         </div>
       </div>
-  </div>,
+    </div>
-]
+  </div>
+</div>
 `;

components/alert/demo/action.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Alert, Button, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Alert
       message="Success Tips"
       type="success"
@@ -53,7 +53,7 @@ const App: React.FC = () => (
       }
       closable
     />
-  </>
+  </Space>
 );
 
 export default App;

components/alert/demo/banner.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
-import { Alert } from 'antd';
+import { Alert, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Alert message="Warning text" banner />
-    <br />
     <Alert
       message="Very long warning text warning text text text text text text text"
       banner
       closable
     />
-    <br />
     <Alert showIcon={false} message="Warning text without icon" banner />
-    <br />
     <Alert type="error" message="Error text" banner />
-  </>
+  </Space>
 );
 
 export default App;

components/alert/demo/closable.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Alert } from 'antd';
+import { Alert, Space } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Alert
       message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
       type="warning"
@@ -20,7 +20,7 @@ const App: React.FC = () => (
       closable
       onClose={onClose}
     />
-  </>
+  </Space>
 );
 
 export default App;

components/alert/demo/custom-icon.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { SmileOutlined } from '@ant-design/icons';
-import { Alert } from 'antd';
+import { Alert, Space } from 'antd';
 
 const icon = <SmileOutlined />;
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Alert icon={icon} message="showIcon = false" type="success" />
     <Alert icon={icon} message="Success Tips" type="success" showIcon />
     <Alert icon={icon} message="Informational Notes" type="info" showIcon />
@@ -39,7 +39,7 @@ const App: React.FC = () => (
       type="error"
       showIcon
     />
-  </>
+  </Space>
 );
 
 export default App;

components/alert/demo/description.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Alert } from 'antd';
+import { Alert, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Alert
       message="Success Text"
       description="Success Description Success Description Success Description"
@@ -23,7 +23,7 @@ const App: React.FC = () => (
       description="Error Description Error Description Error Description Error Description"
       type="error"
     />
-  </>
+  </Space>
 );
 
 export default App;

components/alert/demo/icon.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Alert } from 'antd';
+import { Alert, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Alert message="Success Tips" type="success" showIcon />
     <Alert message="Informational Notes" type="info" showIcon />
     <Alert message="Warning" type="warning" showIcon closable />
@@ -32,7 +32,7 @@ const App: React.FC = () => (
       type="error"
       showIcon
     />
-  </>
+  </Space>
 );
 
 export default App;

components/alert/demo/smooth-closed.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Alert } from 'antd';
+import { Alert, Switch, Space } from 'antd';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(true);
@@ -9,12 +9,13 @@ const App: React.FC = () => {
   };
 
   return (
-    <div>
+    <Space direction="vertical" style={{ width: '100%' }}>
-      {visible ? (
+      {visible && (
         <Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
-      ) : null}
+      )}
-      <p>placeholder text here</p>
+      <p>click the close button to see the effect</p>
-    </div>
+      <Switch onChange={setVisible} checked={visible} disabled={visible} />
+    </Space>
   );
 };
 

components/alert/demo/style.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'antd';
+import { Alert, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Alert message="Success Text" type="success" />
     <Alert message="Info Text" type="info" />
     <Alert message="Warning Text" type="warning" />
     <Alert message="Error Text" type="error" />
-  </>
+  </Space>
 );
 
 export default App;

components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/badge/demo/basic.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -29,7 +35,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -48,7 +59,11 @@ Array [
       >
         0
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -83,12 +98,26 @@ Array [
           />
         </svg>
       </span>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/change.tsx extend context correctly 1`] = `
-Array [
+<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:24px"
+      >
         <span
           class="ant-badge"
         >
@@ -116,12 +145,16 @@ Array [
               </span>
             </span>
           </sup>
-  </span>,
+        </span>
+      </div>
+      <div
+        class="ant-space-item"
+      >
         <div
           class="ant-btn-group"
         >
           <button
-      class="ant-btn ant-btn-default"
+            class="ant-btn ant-btn-default ant-btn-icon-only"
             type="button"
           >
             <span
@@ -145,7 +178,7 @@ Array [
             </span>
           </button>
           <button
-      class="ant-btn ant-btn-default"
+            class="ant-btn ant-btn-default ant-btn-icon-only"
             type="button"
           >
             <span
@@ -175,7 +208,7 @@ Array [
             </span>
           </button>
           <button
-      class="ant-btn ant-btn-default"
+            class="ant-btn ant-btn-default ant-btn-icon-only"
             type="button"
           >
             <span
@@ -198,11 +231,20 @@ Array [
               </svg>
             </span>
           </button>
-  </div>,
+        </div>
+      </div>
+    </div>
+  </div>
   <div
-    class="ant-divider ant-divider-horizontal"
+    class="ant-space-item"
-    role="separator"
+  >
-  />,
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:24px"
+      >
         <span
           class="ant-badge"
         >
@@ -218,7 +260,11 @@ Array [
             class="ant-scroll-number ant-badge-dot"
             data-show="true"
           />
-  </span>,
+        </span>
+      </div>
+      <div
+        class="ant-space-item"
+      >
         <button
           aria-checked="true"
           class="ant-switch ant-switch-checked"
@@ -238,8 +284,11 @@ Array [
               class="ant-switch-inner-unchecked"
             />
           </span>
-  </button>,
+        </button>
-]
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/colorful.tsx extend context correctly 1`] = `
@@ -567,15 +616,19 @@ Array [
 `;
 
 exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend context correctly 1`] = `
-Array [
 <div
-    style="display:inline-block;vertical-align:middle"
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-16px"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         pink
       </div>
@@ -606,15 +659,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         red
       </div>
@@ -645,15 +699,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         yellow
       </div>
@@ -684,15 +739,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         orange
       </div>
@@ -723,15 +779,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         cyan
       </div>
@@ -762,15 +819,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         green
       </div>
@@ -801,15 +859,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         blue
       </div>
@@ -840,15 +899,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         purple
       </div>
@@ -879,15 +939,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         geekblue
       </div>
@@ -918,15 +979,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         magenta
       </div>
@@ -957,15 +1019,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         volcano
       </div>
@@ -996,15 +1059,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         gold
       </div>
@@ -1035,15 +1099,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         lime
       </div>
@@ -1074,12 +1139,18 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
-]
+</div>
 `;
 
 exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
     <span
       class="ant-badge"
     >
@@ -1107,7 +1178,11 @@ Array [
         class="ant-scroll-number ant-badge-dot"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -1120,8 +1195,9 @@ Array [
         class="ant-scroll-number ant-badge-dot"
         data-show="true"
       />
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/link.tsx extend context correctly 1`] = `
@@ -1160,7 +1236,13 @@ exports[`renders ./components/badge/demo/link.tsx extend context correctly 1`] =
 `;
 
 exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1188,7 +1270,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1216,7 +1303,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1244,7 +1336,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1273,7 +1370,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1289,7 +1391,12 @@ Array [
         class="ant-scroll-number ant-badge-dot ant-badge-status-success"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1305,7 +1412,12 @@ Array [
         class="ant-scroll-number ant-badge-dot ant-badge-status-warning"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1321,7 +1433,11 @@ Array [
         class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1338,8 +1454,9 @@ Array [
         data-show="true"
         style="background:#fa541c"
       />
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/no-wrapper.tsx extend context correctly 1`] = `
@@ -1490,7 +1607,13 @@ exports[`renders ./components/badge/demo/offset.tsx extend context correctly 1`]
 `;
 
 exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -1528,7 +1651,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -1547,7 +1675,12 @@ Array [
       >
         99+
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -1566,7 +1699,11 @@ Array [
       >
         10+
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -1585,8 +1722,9 @@ Array [
       >
         999+
       </sup>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/ribbbon.tsx extend context correctly 1`] = `
@@ -2062,7 +2200,13 @@ exports[`renders ./components/badge/demo/ribbon-debug.tsx extend context correct
 `;
 
 exports[`renders ./components/badge/demo/size.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -2090,7 +2234,11 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -2118,8 +2266,9 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/status.tsx extend context correctly 1`] = `
@@ -2280,7 +2429,13 @@ Array [
 `;
 
 exports[`renders ./components/badge/demo/title.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -2308,7 +2463,11 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -2346,6 +2505,7 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;

components/badge/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/badge/demo/basic.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -29,7 +35,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -48,7 +59,11 @@ Array [
       >
         0
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -83,12 +98,26 @@ Array [
           />
         </svg>
       </span>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/change.tsx correctly 1`] = `
-Array [
+<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:24px"
+      >
         <span
           class="ant-badge"
         >
@@ -116,12 +145,16 @@ Array [
               </span>
             </span>
           </sup>
-  </span>,
+        </span>
+      </div>
+      <div
+        class="ant-space-item"
+      >
         <div
           class="ant-btn-group"
         >
           <button
-      class="ant-btn ant-btn-default"
+            class="ant-btn ant-btn-default ant-btn-icon-only"
             type="button"
           >
             <span
@@ -145,7 +178,7 @@ Array [
             </span>
           </button>
           <button
-      class="ant-btn ant-btn-default"
+            class="ant-btn ant-btn-default ant-btn-icon-only"
             type="button"
           >
             <span
@@ -175,7 +208,7 @@ Array [
             </span>
           </button>
           <button
-      class="ant-btn ant-btn-default"
+            class="ant-btn ant-btn-default ant-btn-icon-only"
             type="button"
           >
             <span
@@ -198,11 +231,20 @@ Array [
               </svg>
             </span>
           </button>
-  </div>,
+        </div>
+      </div>
+    </div>
+  </div>
   <div
-    class="ant-divider ant-divider-horizontal"
+    class="ant-space-item"
-    role="separator"
+  >
-  />,
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:24px"
+      >
         <span
           class="ant-badge"
         >
@@ -218,7 +260,11 @@ Array [
             class="ant-scroll-number ant-badge-dot"
             data-show="true"
           />
-  </span>,
+        </span>
+      </div>
+      <div
+        class="ant-space-item"
+      >
         <button
           aria-checked="true"
           class="ant-switch ant-switch-checked"
@@ -238,8 +284,11 @@ Array [
               class="ant-switch-inner-unchecked"
             />
           </span>
-  </button>,
+        </button>
-]
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/colorful.tsx correctly 1`] = `
@@ -567,15 +616,19 @@ Array [
 `;
 
 exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
-Array [
 <div
-    style="display:inline-block;vertical-align:middle"
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-16px"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         pink
       </div>
@@ -606,15 +659,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         red
       </div>
@@ -645,15 +699,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         yellow
       </div>
@@ -684,15 +739,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         orange
       </div>
@@ -723,15 +779,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         cyan
       </div>
@@ -762,15 +819,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         green
       </div>
@@ -801,15 +859,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         blue
       </div>
@@ -840,15 +899,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         purple
       </div>
@@ -879,15 +939,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         geekblue
       </div>
@@ -918,15 +979,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         magenta
       </div>
@@ -957,15 +1019,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         volcano
       </div>
@@ -996,15 +1059,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="margin-right:24px;padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         gold
       </div>
@@ -1035,15 +1099,16 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
   <div
-    style="display:inline-block;vertical-align:middle"
+    class="ant-space-item"
+    style="padding-bottom:16px"
   >
     <span
       class="ant-badge"
     >
       <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
       >
         lime
       </div>
@@ -1074,12 +1139,18 @@ Array [
         </span>
       </sup>
     </span>
-  </div>,
+  </div>
-]
+</div>
 `;
 
 exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
     <span
       class="ant-badge"
     >
@@ -1107,7 +1178,11 @@ Array [
         class="ant-scroll-number ant-badge-dot"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -1120,8 +1195,9 @@ Array [
         class="ant-scroll-number ant-badge-dot"
         data-show="true"
       />
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/link.tsx correctly 1`] = `
@@ -1160,7 +1236,13 @@ exports[`renders ./components/badge/demo/link.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1188,7 +1270,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1216,7 +1303,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1244,7 +1336,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -1273,7 +1370,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1289,7 +1391,12 @@ Array [
         class="ant-scroll-number ant-badge-dot ant-badge-status-success"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1305,7 +1412,12 @@ Array [
         class="ant-scroll-number ant-badge-dot ant-badge-status-warning"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1321,7 +1433,11 @@ Array [
         class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
         data-show="true"
       />
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge ant-badge-status"
     >
@@ -1338,8 +1454,9 @@ Array [
         data-show="true"
         style="background:#fa541c"
       />
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/no-wrapper.tsx correctly 1`] = `
@@ -1490,7 +1607,13 @@ exports[`renders ./components/badge/demo/offset.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -1528,7 +1651,12 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -1547,7 +1675,12 @@ Array [
       >
         99+
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -1566,7 +1699,11 @@ Array [
       >
         10+
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -1585,8 +1722,9 @@ Array [
       >
         999+
       </sup>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/ribbbon.tsx correctly 1`] = `
@@ -2062,7 +2200,13 @@ exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/size.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:16px"
+  >
     <span
       class="ant-badge"
     >
@@ -2090,7 +2234,11 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -2118,8 +2266,9 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/badge/demo/status.tsx correctly 1`] = `
@@ -2280,7 +2429,13 @@ Array [
 `;
 
 exports[`renders ./components/badge/demo/title.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:24px"
+  >
     <span
       class="ant-badge"
     >
@@ -2308,7 +2463,11 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <span
       class="ant-badge"
     >
@@ -2346,6 +2505,7 @@ Array [
           </span>
         </span>
       </sup>
-  </span>,
+    </span>
-]
+  </div>
+</div>
 `;

components/badge/demo/basic.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ClockCircleOutlined } from '@ant-design/icons';
-import { Avatar, Badge } from 'antd';
+import { Avatar, Badge, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space size="middle">
     <Badge count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
@@ -13,7 +13,7 @@ const App: React.FC = () => (
     <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>
+  </Space>
 );
 
 export default App;

components/badge/demo/change.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
-import { Avatar, Badge, Button, Divider, Switch } from 'antd';
+import { Avatar, Badge, Button, Switch, Space } from 'antd';
 
 const ButtonGroup = Button.Group;
 
@@ -30,27 +30,24 @@ const App: React.FC = () => {
   };
 
   return (
-    <>
+    <Space direction="vertical">
+      <Space size="large">
         <Badge count={count}>
           <Avatar shape="square" size="large" />
         </Badge>
         <ButtonGroup>
-        <Button onClick={decline}>
+          <Button onClick={decline} icon={<MinusOutlined />} />
-          <MinusOutlined />
+          <Button onClick={increase} icon={<PlusOutlined />} />
-        </Button>
+          <Button onClick={random} icon={<QuestionOutlined />} />
-        <Button onClick={increase}>
-          <PlusOutlined />
-        </Button>
-        <Button onClick={random}>
-          <QuestionOutlined />
-        </Button>
         </ButtonGroup>
-      <Divider />
+      </Space>
+      <Space size="large">
         <Badge dot={show}>
           <Avatar shape="square" size="large" />
         </Badge>
         <Switch onChange={onChange} checked={show} />
-    </>
+      </Space>
+    </Space>
   );
 };
 

components/badge/demo/colorful-with-count-debug.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge } from 'antd';
+import { Badge, Space } from 'antd';
 
 const colors = [
   'pink',
@@ -18,10 +18,9 @@ const colors = [
 ];
 
 const App: React.FC = () => (
-  <>
+  <Space wrap size={['large', 'middle']}>
-    {colors.map(color => (
+    {colors.map((color) => (
-      <div key={color} style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+      <Badge color={color} count={44} key={color}>
-        <Badge color={color} count={44}>
         <div
           style={{
             width: 90,
@@ -29,15 +28,13 @@ const App: React.FC = () => (
             lineHeight: '90px',
             background: '#ccc',
             textAlign: 'center',
-              marginBottom: 10,
           }}
         >
           {color}
         </div>
       </Badge>
-      </div>
     ))}
-  </>
+  </Space>
 );
 
 export default App;

components/badge/demo/dot.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { NotificationOutlined } from '@ant-design/icons';
-import { Badge } from 'antd';
+import { Badge, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space>
     <Badge dot>
       <NotificationOutlined style={{ fontSize: 16 }} />
     </Badge>
     <Badge dot>
       <a href="#">Link something</a>
     </Badge>
-  </>
+  </Space>
 );
 
 export default App;

components/badge/demo/mix.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Avatar, Badge } from 'antd';
+import { Avatar, Badge, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space size="middle">
     <Badge count={5} status="success">
       <Avatar shape="square" size="large" />
     </Badge>
@@ -27,7 +27,7 @@ const App: React.FC = () => (
     <Badge dot color="#fa541c">
       <Avatar shape="square" size="large" />
     </Badge>
-  </>
+  </Space>
 );
 
 export default App;

components/badge/demo/overflow.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Avatar, Badge } from 'antd';
+import { Avatar, Badge, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space size="large">
     <Badge count={99}>
       <Avatar shape="square" size="large" />
     </Badge>
@@ -15,7 +15,7 @@ const App: React.FC = () => (
     <Badge count={1000} overflowCount={999}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>
+  </Space>
 );
 
 export default App;

components/badge/demo/size.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Avatar, Badge } from 'antd';
+import { Avatar, Badge, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space size="middle">
     <Badge size="default" count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
     <Badge size="small" count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>
+  </Space>
 );
 
 export default App;

components/badge/demo/title.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Avatar, Badge } from 'antd';
+import { Avatar, Badge, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space size="large">
     <Badge count={5} title="Custom hover text">
       <Avatar shape="square" size="large" />
     </Badge>
     <Badge count={-5} title="Negative">
       <Avatar shape="square" size="large" />
     </Badge>
-  </>
+  </Space>
 );
 
 export default App;

components/button/demo/basic.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space wrap>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
     <Button type="dashed">Dashed Button</Button>
-    <br />
     <Button type="text">Text Button</Button>
     <Button type="link">Link Button</Button>
-  </>
+  </Space>
 );
 
 export default App;

components/button/demo/block.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" style={{ width: '100%' }}>
     <Button type="primary" block>
       Primary
     </Button>
@@ -13,7 +13,7 @@ const App: React.FC = () => (
     <Button type="link" block>
       Link
     </Button>
-  </>
+  </Space>
 );
 
 export default App;

components/button/demo/chinese-chars-loading.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { PoweroffOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Space } from 'antd';
 
 const Text1 = () => '部署';
 const Text2 = () => <span>部署</span>;
 const Text3 = () => 'Submit';
 
 const App = () => (
-  <>
+  <Space wrap>
     <Button loading>部署</Button>
     <Button loading>
       <Text1 />
@@ -22,7 +22,7 @@ const App = () => (
       <Text1 />
     </Button>
     <Button loading>按钮</Button>
-  </>
+  </Space>
 );
 
 export default App;

components/button/demo/danger.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space wrap>
     <Button type="primary" danger>
       Primary
     </Button>
@@ -16,7 +16,7 @@ const App: React.FC = () => (
     <Button type="link" danger>
       Link
     </Button>
-  </>
+  </Space>
 );
 
 export default App;

components/button/demo/debug-icon.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+调试使用
+
+## en-US
+
+Debug usage

components/button/demo/debug-icon.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Tooltip, ConfigProvider, Radio, Divider, Space } from 'antd';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<SizeType>('large');
+
+  return (
+    <>
+      <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
+        <Radio.Button value="large">Large</Radio.Button>
+        <Radio.Button value="default">Default</Radio.Button>
+        <Radio.Button value="small">Small</Radio.Button>
+      </Radio.Group>
+      <Divider orientation="left" plain>
+        Preview
+      </Divider>
+      <ConfigProvider componentSize={size}>
+        <Space direction="vertical">
+          <Space wrap>
+            <Tooltip title="search">
+              <Button type="primary" shape="circle" icon={<SearchOutlined />} />
+            </Tooltip>
+            <Button type="primary" shape="circle">
+              A
+            </Button>
+            <Button type="primary" icon={<SearchOutlined />}>
+              Search
+            </Button>
+            <Tooltip title="search">
+              <Button shape="circle" icon={<SearchOutlined />} />
+            </Tooltip>
+            <Button icon={<SearchOutlined />}>Search</Button>
+          </Space>
+          <Space wrap>
+            <Tooltip title="search">
+              <Button shape="circle" icon={<SearchOutlined />} />
+            </Tooltip>
+            <Button icon={<SearchOutlined />}>Search</Button>
+            <Tooltip title="search">
+              <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
+            </Tooltip>
+            <Button type="dashed" icon={<SearchOutlined />}>
+              Search
+            </Button>
+            <Button icon={<SearchOutlined />} href="https://www.google.com" />
+          </Space>
+        </Space>
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default App;

components/button/demo/disabled.md

@@ -5,10 +5,3 @@
 ## en-US
 
 To mark a button as disabled, add the `disabled` property to the `Button`.
-
-```css
-.site-button-ghost-wrapper {
-  padding: 8px 8px 0 8px;
-  background: rgb(190, 200, 200);
-}
-```

components/button/demo/disabled.tsx

@@ -1,56 +1,65 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical">
+    <Space>
       <Button type="primary">Primary</Button>
       <Button type="primary" disabled>
         Primary(disabled)
       </Button>
-    <br />
+    </Space>
+    <Space>
       <Button>Default</Button>
       <Button disabled>Default(disabled)</Button>
-    <br />
+    </Space>
+    <Space>
       <Button type="dashed">Dashed</Button>
       <Button type="dashed" disabled>
         Dashed(disabled)
       </Button>
-    <br />
+    </Space>
+    <Space>
       <Button type="text">Text</Button>
       <Button type="text" disabled>
         Text(disabled)
       </Button>
-    <br />
+    </Space>
+    <Space>
       <Button type="link">Link</Button>
       <Button type="link" disabled>
         Link(disabled)
       </Button>
-    <br />
+    </Space>
+    <Space>
       <Button danger>Danger Default</Button>
       <Button danger disabled>
         Danger Default(disabled)
       </Button>
-    <br />
+    </Space>
+    <Space>
       <Button danger type="text">
         Danger Text
       </Button>
       <Button danger type="text" disabled>
         Danger Text(disabled)
       </Button>
-    <br />
+    </Space>
+    <Space>
       <Button type="link" danger>
         Danger Link
       </Button>
       <Button type="link" danger disabled>
         Danger Link(disabled)
       </Button>
-    <div className="site-button-ghost-wrapper">
+    </Space>
+    <Space className="site-button-ghost-wrapper">
       <Button ghost>Ghost</Button>
       <Button ghost disabled>
         Ghost(disabled)
       </Button>
-    </div>
+    </Space>
-  </>
+  </Space>
 );
 
 export default App;

components/button/demo/ghost.md

@@ -5,10 +5,3 @@
 ## en-US
 
 `ghost` property will make button's background transparent, it is commonly used in colored background.
-
-```css
-.site-button-ghost-wrapper {
-  padding: 26px 16px 16px;
-  background: rgb(190, 200, 200);
-}
-```

components/button/demo/ghost.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Space } from 'antd';
 
 const App: React.FC = () => (
-  <div className="site-button-ghost-wrapper">
+  <Space className="site-button-ghost-wrapper" wrap>
     <Button type="primary" ghost>
       Primary
     </Button>
@@ -13,7 +13,7 @@ const App: React.FC = () => (
     <Button type="primary" danger ghost>
       Danger
     </Button>
-  </div>
+  </Space>
 );
 
 export default App;

components/button/demo/icon.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { SearchOutlined } from '@ant-design/icons';
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical">
+    <Space wrap>
       <Tooltip title="search">
         <Button type="primary" shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
@@ -17,7 +18,8 @@ const App: React.FC = () => (
         <Button shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
       <Button icon={<SearchOutlined />}>Search</Button>
-    <br />
+    </Space>
+    <Space wrap>
       <Tooltip title="search">
         <Button shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
@@ -29,38 +31,8 @@ const App: React.FC = () => (
         Search
       </Button>
       <Button icon={<SearchOutlined />} href="https://www.google.com" />
-    <br />
+    </Space>
-    <br />
+  </Space>
-    <Tooltip title="search">
-      <Button type="primary" shape="circle" icon={<SearchOutlined />} size="large" />
-    </Tooltip>
-    <Button type="primary" shape="circle" size="large">
-      A
-    </Button>
-    <Button type="primary" icon={<SearchOutlined />} size="large">
-      Search
-    </Button>
-    <Tooltip title="search">
-      <Button shape="circle" icon={<SearchOutlined />} size="large" />
-    </Tooltip>
-    <Button icon={<SearchOutlined />} size="large">
-      Search
-    </Button>
-    <br />
-    <Tooltip title="search">
-      <Button shape="circle" icon={<SearchOutlined />} size="large" />
-    </Tooltip>
-    <Button icon={<SearchOutlined />} size="large">
-      Search
-    </Button>
-    <Tooltip title="search">
-      <Button type="dashed" shape="circle" icon={<SearchOutlined />} size="large" />
-    </Tooltip>
-    <Button type="dashed" icon={<SearchOutlined />} size="large">
-      Search
-    </Button>
-    <Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
-  </>
 );
 
 export default App;

components/button/demo/loading.tsx

@@ -6,14 +6,14 @@ const App: React.FC = () => {
   const [loadings, setLoadings] = useState<boolean[]>([]);
 
   const enterLoading = (index: number) => {
-    setLoadings(prevLoadings => {
+    setLoadings((prevLoadings) => {
       const newLoadings = [...prevLoadings];
       newLoadings[index] = true;
       return newLoadings;
     });
 
     setTimeout(() => {
-      setLoadings(prevLoadings => {
+      setLoadings((prevLoadings) => {
         const newLoadings = [...prevLoadings];
         newLoadings[index] = false;
         return newLoadings;
@@ -22,8 +22,8 @@ const App: React.FC = () => {
   };
 
   return (
-    <>
+    <Space direction="vertical">
-      <Space style={{ width: '100%' }}>
+      <Space wrap>
         <Button type="primary" loading>
           Loading
         </Button>
@@ -33,7 +33,7 @@ const App: React.FC = () => {
         <Button type="primary" icon={<PoweroffOutlined />} loading />
       </Space>
 
-      <Space style={{ width: '100%' }}>
+      <Space wrap>
         <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
           Click me!
         </Button>
@@ -52,7 +52,7 @@ const App: React.FC = () => {
           onClick={() => enterLoading(2)}
         />
       </Space>
-    </>
+    </Space>
   );
 };
 

components/button/demo/multiple.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { MenuProps } from 'antd';
-import { Button, Dropdown } from 'antd';
+import { Button, Dropdown, Space } from 'antd';
 
-const onMenuClick: MenuProps['onClick'] = e => {
+const onMenuClick: MenuProps['onClick'] = (e) => {
   console.log('click', e);
 };
 
@@ -22,11 +22,11 @@ const items = [
 ];
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical">
     <Button type="primary">primary</Button>
     <Button>secondary</Button>
     <Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
-  </>
+  </Space>
 );
 
 export default App;

components/button/demo/size.tsx

@@ -1,20 +1,23 @@
 import React, { useState } from 'react';
 import { DownloadOutlined } from '@ant-design/icons';
-import { Button, Radio } from 'antd';
+import { Button, Radio, Space, Divider } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
 
 const App: React.FC = () => {
-  const [size, setSize] = useState<SizeType>('large');
+  const [size, setSize] = useState<SizeType>('large'); // default is 'middle'
 
   return (
     <>
-      <Radio.Group value={size} onChange={e => setSize(e.target.value)}>
+      <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
         <Radio.Button value="large">Large</Radio.Button>
         <Radio.Button value="default">Default</Radio.Button>
         <Radio.Button value="small">Small</Radio.Button>
       </Radio.Group>
-      <br />
+      <Divider orientation="left" plain>
-      <br />
+        Preview
+      </Divider>
+      <Space direction="vertical">
+        <Space wrap>
           <Button type="primary" size={size}>
             Primary
           </Button>
@@ -22,11 +25,11 @@ const App: React.FC = () => {
           <Button type="dashed" size={size}>
             Dashed
           </Button>
-      <br />
+        </Space>
         <Button type="link" size={size}>
           Link
         </Button>
-      <br />
+        <Space wrap>
           <Button type="primary" icon={<DownloadOutlined />} size={size} />
           <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
           <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
@@ -36,6 +39,8 @@ const App: React.FC = () => {
           <Button type="primary" icon={<DownloadOutlined />} size={size}>
             Download
           </Button>
+        </Space>
+      </Space>
     </>
   );
 };

components/button/index.en-US.md

@@ -34,6 +34,7 @@ And 4 other properties additionally.
 
 <code src="./demo/basic.tsx">Type</code>
 <code src="./demo/icon.tsx">Icon</code>
+<code src="./demo/debug-icon.tsx" debug>Debug Icon</code>
 <code src="./demo/size.tsx">Size</code>
 <code src="./demo/disabled.tsx">Disabled</code>
 <code src="./demo/loading.tsx">Loading</code>
@@ -75,14 +76,11 @@ Following the Ant Design specification, we will add one space between if Button
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
 
 <style>
-[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
+.site-button-ghost-wrapper {
-  margin-right: 8px;
+  padding: 16px;
-  margin-bottom: 12px;
+  background: rgb(190, 200, 200);
-}
-[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
-  margin-right: 0;
-  margin-left: 8px;
 }
+
 [data-theme="dark"] .site-button-ghost-wrapper {
   background: rgba(255, 255, 255, 0.2);
 }

components/button/index.zh-CN.md

@@ -37,6 +37,7 @@ group:
 
 <code src="./demo/basic.tsx">按钮类型</code>
 <code src="./demo/icon.tsx">图标按钮</code>
+<code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>
 <code src="./demo/size.tsx">按钮尺寸</code>
 <code src="./demo/disabled.tsx">不可用状态</code>
 <code src="./demo/loading.tsx">加载中状态</code>
@@ -80,14 +81,11 @@ group:
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格"  />
 
 <style>
-[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
+.site-button-ghost-wrapper {
-  margin-right: 8px;
+  padding: 8px;
-  margin-bottom: 12px;
+  background: rgb(190, 200, 200);
-}
-[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
-  margin-right: 0;
-  margin-left: 8px;
 }
+
 [data-theme="dark"] .site-button-ghost-wrapper {
   background: rgba(255, 255, 255, 0.2);
 }