diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index b3b96ffd832d..7aee22a06dc6 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -47,7 +47,7 @@ Array [
 `;
 
 exports[`renders ./components/button/demo/block.md correctly 1`] = `
-<div>
+Array [
   <button
     class="ant-btn ant-btn-primary ant-btn-block"
     type="button"
@@ -55,7 +55,7 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
     <span>
       Primary
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-block"
     type="button"
@@ -63,7 +63,7 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
     <span>
       Default
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-dashed ant-btn-block"
     type="button"
@@ -71,7 +71,7 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
     <span>
       Dashed
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-link ant-btn-block"
     type="button"
@@ -79,8 +79,8 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
     <span>
       Link
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/button/demo/danger.md correctly 1`] = `
@@ -129,7 +129,7 @@ Array [
 `;
 
 exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
-<div>
+Array [
   <button
     class="ant-btn ant-btn-primary"
     type="button"
@@ -137,7 +137,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Primary
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary"
     disabled=""
@@ -146,8 +146,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Primary(disabled)
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn"
     type="button"
@@ -155,7 +155,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Default
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn"
     disabled=""
@@ -164,8 +164,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Default(disabled)
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-dashed"
     type="button"
@@ -173,7 +173,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Dashed
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-dashed"
     disabled=""
@@ -182,8 +182,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Dashed(disabled)
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-text"
     type="button"
@@ -191,7 +191,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Text
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-text"
     disabled=""
@@ -200,8 +200,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Text(disabled)
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-link"
     type="button"
@@ -209,7 +209,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Link
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-link"
     disabled=""
@@ -218,8 +218,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Link(disabled)
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-dangerous"
     type="button"
@@ -227,7 +227,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Danger Default
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-dangerous"
     disabled=""
@@ -236,8 +236,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Danger Default(disabled)
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-text ant-btn-dangerous"
     type="button"
@@ -245,7 +245,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Danger Text
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-text ant-btn-dangerous"
     disabled=""
@@ -254,8 +254,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Danger Text(disabled)
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-link ant-btn-dangerous"
     type="button"
@@ -263,7 +263,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Danger Link
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-link ant-btn-dangerous"
     disabled=""
@@ -272,7 +272,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     <span>
       Danger Link(disabled)
     </span>
-  </button>
+  </button>,
   <div
     class="site-button-ghost-wrapper"
   >
@@ -293,8 +293,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
         Ghost(disabled)
       </span>
     </button>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
@@ -345,7 +345,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 `;
 
 exports[`renders ./components/button/demo/icon.md correctly 1`] = `
-<div>
+Array [
   <button
     class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
     type="button"
@@ -370,7 +370,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary ant-btn-circle"
     type="button"
@@ -378,7 +378,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
     <span>
       A
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary"
     type="button"
@@ -406,7 +406,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
     <span>
       Search
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-circle ant-btn-icon-only"
     type="button"
@@ -431,7 +431,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn"
     type="button"
@@ -459,8 +459,8 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
     <span>
       Search
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-circle ant-btn-icon-only"
     type="button"
@@ -485,7 +485,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn"
     type="button"
@@ -513,7 +513,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
     <span>
       Search
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only"
     type="button"
@@ -538,7 +538,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-dashed"
     type="button"
@@ -566,12 +566,12 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
     <span>
       Search
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
-<div>
+Array [
   <div>
     <div
       class="ant-btn-group ant-btn-group-sm"
@@ -650,8 +650,8 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div>
     <div
       class="ant-btn-group"
@@ -730,8 +730,8 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div>
     <div
       class="ant-btn-group ant-btn-group-lg"
@@ -810,8 +810,8 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/button/demo/loading.md correctly 1`] = `
@@ -975,7 +975,7 @@ Array [
 `;
 
 exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
-<div>
+Array [
   <button
     class="ant-btn ant-btn-primary"
     type="button"
@@ -983,7 +983,7 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
     <span>
       primary
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn"
     type="button"
@@ -991,7 +991,7 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
     <span>
       secondary
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-dropdown-trigger"
     type="button"
@@ -1019,12 +1019,12 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/button/demo/size.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
   >
@@ -1086,9 +1086,9 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
         Small
       </span>
     </label>
-  </div>
-  <br />
-  <br />
+  </div>,
+  <br />,
+  <br />,
   <button
     class="ant-btn ant-btn-primary ant-btn-lg"
     type="button"
@@ -1096,7 +1096,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
     <span>
       Primary
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-lg"
     type="button"
@@ -1104,7 +1104,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
     <span>
       Default
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-dashed ant-btn-lg"
     type="button"
@@ -1112,8 +1112,8 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
     <span>
       Dashed
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-link ant-btn-lg"
     type="button"
@@ -1121,8 +1121,8 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
     <span>
       Link
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"
     type="button"
@@ -1147,7 +1147,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
     type="button"
@@ -1172,7 +1172,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"
     type="button"
@@ -1197,7 +1197,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"
     type="button"
@@ -1225,7 +1225,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
     <span>
       Download
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary ant-btn-lg"
     type="button"
@@ -1253,6 +1253,6 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
     <span>
       Download
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
diff --git a/components/button/demo/block.md b/components/button/demo/block.md
index f4800ea179de..1be00d3761c8 100644
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@@ -17,7 +17,7 @@ title:
 import { Button } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Button type="primary" block>
       Primary
     </Button>
@@ -28,7 +28,7 @@ ReactDOM.render(
     <Button type="link" block>
       Link
     </Button>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index 150511d44363..b661f545d551 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -17,7 +17,7 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
 import { Button } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Button type="primary">Primary</Button>
     <Button type="primary" disabled>
       Primary(disabled)
@@ -65,7 +65,7 @@ ReactDOM.render(
         Ghost(disabled)
       </Button>
     </div>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index 1f505386478e..92c5a5b61cba 100644
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -22,7 +22,7 @@ import { Button, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div>
+  <>
     <Tooltip title="search">
       <Button type="primary" shape="circle" icon={<SearchOutlined />} />
     </Tooltip>
@@ -47,7 +47,7 @@ ReactDOM.render(
     <Button type="dashed" icon={<SearchOutlined />}>
       Search
     </Button>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/button/demo/legacy-group.md b/components/button/demo/legacy-group.md
index 4f21e037e726..c4fb32ff8c22 100644
--- a/components/button/demo/legacy-group.md
+++ b/components/button/demo/legacy-group.md
@@ -36,13 +36,13 @@ function getGroup(props) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     {getGroup({ size: 'small' })}
     <br />
     {getGroup()}
     <br />
     {getGroup({ size: 'large' })}
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
index 28b089578006..a23c846b1ab4 100644
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -30,7 +30,7 @@ const menu = (
 );
 
 ReactDOM.render(
-  <div>
+  <>
     <Button type="primary">primary</Button>
     <Button>secondary</Button>
     <Dropdown overlay={menu}>
@@ -38,7 +38,7 @@ ReactDOM.render(
         Actions <DownOutlined />
       </Button>
     </Dropdown>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 73e62d8e8d9a..625da008648c 100644
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -33,7 +33,7 @@ class ButtonSize extends React.Component {
   render() {
     const { size } = this.state;
     return (
-      <div>
+      <>
         <Radio.Group value={size} onChange={this.handleSizeChange}>
           <Radio.Button value="large">Large</Radio.Button>
           <Radio.Button value="default">Default</Radio.Button>
@@ -62,7 +62,7 @@ class ButtonSize extends React.Component {
         <Button type="primary" icon={<DownloadOutlined />} size={size}>
           Download
         </Button>
-      </div>
+      </>
     );
   }
 }