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/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/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">
-      <Badge count={count}>
+      <Space size="large">
-        <Avatar shape="square" size="large" />
+        <Badge count={count}>
-      </Badge>
+          <Avatar shape="square" size="large" />
-      <ButtonGroup>
+        </Badge>
-        <Button onClick={decline}>
+        <ButtonGroup>
-          <MinusOutlined />
+          <Button onClick={decline} icon={<MinusOutlined />} />
-        </Button>
+          <Button onClick={increase} icon={<PlusOutlined />} />
-        <Button onClick={increase}>
+          <Button onClick={random} icon={<QuestionOutlined />} />
-          <PlusOutlined />
+        </ButtonGroup>
-        </Button>
+      </Space>
-        <Button onClick={random}>
+      <Space size="large">
-          <QuestionOutlined />
+        <Badge dot={show}>
-        </Button>
+          <Avatar shape="square" size="large" />
-      </ButtonGroup>
+        </Badge>
-      <Divider />
+        <Switch onChange={onChange} checked={show} />
-      <Badge dot={show}>
+      </Space>
-        <Avatar shape="square" size="large" />
+    </Space>
-      </Badge>
-      <Switch onChange={onChange} checked={show} />
-    </>
   );
 };
 

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,26 +18,23 @@ 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
-          <div
+          style={{
-            style={{
+            width: 90,
-              width: 90,
+            height: 90,
-              height: 90,
+            lineHeight: '90px',
-              lineHeight: '90px',
+            background: '#ccc',
-              background: '#ccc',
+            textAlign: 'center',
-              textAlign: 'center',
+          }}
-              marginBottom: 10,
+        >
-            }}
+          {color}
-          >
+        </div>
-            {color}
+      </Badge>
-          </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">
-    <Button type="primary">Primary</Button>
+    <Space>
-    <Button type="primary" disabled>
+      <Button type="primary">Primary</Button>
-      Primary(disabled)
+      <Button type="primary" disabled>
-    </Button>
+        Primary(disabled)
-    <br />
+      </Button>
-    <Button>Default</Button>
+    </Space>
-    <Button disabled>Default(disabled)</Button>
+    <Space>
-    <br />
+      <Button>Default</Button>
-    <Button type="dashed">Dashed</Button>
+      <Button disabled>Default(disabled)</Button>
-    <Button type="dashed" disabled>
+    </Space>
-      Dashed(disabled)
+    <Space>
-    </Button>
+      <Button type="dashed">Dashed</Button>
-    <br />
+      <Button type="dashed" disabled>
-    <Button type="text">Text</Button>
+        Dashed(disabled)
-    <Button type="text" disabled>
+      </Button>
-      Text(disabled)
+    </Space>
-    </Button>
+    <Space>
-    <br />
+      <Button type="text">Text</Button>
-    <Button type="link">Link</Button>
+      <Button type="text" disabled>
-    <Button type="link" disabled>
+        Text(disabled)
-      Link(disabled)
+      </Button>
-    </Button>
+    </Space>
-    <br />
+    <Space>
-    <Button danger>Danger Default</Button>
+      <Button type="link">Link</Button>
-    <Button danger disabled>
+      <Button type="link" disabled>
-      Danger Default(disabled)
+        Link(disabled)
-    </Button>
+      </Button>
-    <br />
+    </Space>
-    <Button danger type="text">
+    <Space>
-      Danger Text
+      <Button danger>Danger Default</Button>
-    </Button>
+      <Button danger disabled>
-    <Button danger type="text" disabled>
+        Danger Default(disabled)
-      Danger Text(disabled)
+      </Button>
-    </Button>
+    </Space>
-    <br />
+    <Space>
-    <Button type="link" danger>
+      <Button danger type="text">
-      Danger Link
+        Danger Text
-    </Button>
+      </Button>
-    <Button type="link" danger disabled>
+      <Button danger type="text" disabled>
-      Danger Link(disabled)
+        Danger Text(disabled)
-    </Button>
+      </Button>
-    <div className="site-button-ghost-wrapper">
+    </Space>
+    <Space>
+      <Button type="link" danger>
+        Danger Link
+      </Button>
+      <Button type="link" danger disabled>
+        Danger Link(disabled)
+      </Button>
+    </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,66 +1,38 @@
 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">
-    <Tooltip title="search">
+    <Space wrap>
-      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
+      <Tooltip title="search">
-    </Tooltip>
+        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
-    <Button type="primary" shape="circle">
+      </Tooltip>
-      A
+      <Button type="primary" shape="circle">
-    </Button>
+        A
-    <Button type="primary" icon={<SearchOutlined />}>
+      </Button>
-      Search
+      <Button type="primary" icon={<SearchOutlined />}>
-    </Button>
+        Search
-    <Tooltip title="search">
+      </Button>
-      <Button shape="circle" icon={<SearchOutlined />} />
+      <Tooltip title="search">
-    </Tooltip>
+        <Button shape="circle" icon={<SearchOutlined />} />
-    <Button icon={<SearchOutlined />}>Search</Button>
+      </Tooltip>
-    <br />
+      <Button icon={<SearchOutlined />}>Search</Button>
-    <Tooltip title="search">
+    </Space>
-      <Button shape="circle" icon={<SearchOutlined />} />
+    <Space wrap>
-    </Tooltip>
+      <Tooltip title="search">
-    <Button icon={<SearchOutlined />}>Search</Button>
+        <Button shape="circle" icon={<SearchOutlined />} />
-    <Tooltip title="search">
+      </Tooltip>
-      <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
+      <Button icon={<SearchOutlined />}>Search</Button>
-    </Tooltip>
+      <Tooltip title="search">
-    <Button type="dashed" icon={<SearchOutlined />}>
+        <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
-      Search
+      </Tooltip>
-    </Button>
+      <Button type="dashed" icon={<SearchOutlined />}>
-    <Button icon={<SearchOutlined />} href="https://www.google.com" />
+        Search
-    <br />
+      </Button>
-    <br />
+      <Button icon={<SearchOutlined />} href="https://www.google.com" />
-    <Tooltip title="search">
+    </Space>
-      <Button type="primary" shape="circle" icon={<SearchOutlined />} size="large" />
+  </Space>
-    </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,41 +1,46 @@
 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
-      <Button type="primary" size={size}>
+      </Divider>
-        Primary
+      <Space direction="vertical">
-      </Button>
+        <Space wrap>
-      <Button size={size}>Default</Button>
+          <Button type="primary" size={size}>
-      <Button type="dashed" size={size}>
+            Primary
-        Dashed
+          </Button>
-      </Button>
+          <Button size={size}>Default</Button>
-      <br />
+          <Button type="dashed" size={size}>
-      <Button type="link" size={size}>
+            Dashed
-        Link
+          </Button>
-      </Button>
+        </Space>
-      <br />
+        <Button type="link" size={size}>
-      <Button type="primary" icon={<DownloadOutlined />} size={size} />
+          Link
-      <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
+        </Button>
-      <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
+        <Space wrap>
-      <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
+          <Button type="primary" icon={<DownloadOutlined />} size={size} />
-        Download
+          <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
-      </Button>
+          <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
-      <Button type="primary" icon={<DownloadOutlined />} size={size}>
+          <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
-        Download
+            Download
-      </Button>
+          </Button>
+          <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);
 }