diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
index 34c6835c11..f0249ff8ed 100644
--- a/.dumi/pages/index/components/Theme/ColorPicker.tsx
+++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -91,7 +91,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) =
   }, [value]);
 
   return (
-    <Flex gap="large" align="center" wrap="wrap">
+    <Flex gap="large" align="center" wrap>
       <Input
         value={typeof value === 'string' ? value : value?.toHexString()}
         onChange={(event) => onChange?.(event.target.value)}
diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
index ac22c57c30..c88364a9ea 100644
--- a/.dumi/pages/index/components/Theme/ThemePicker.tsx
+++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -84,7 +84,7 @@ const ThemePicker: React.FC<ThemePickerProps> = (props) => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
-    <Flex gap="large" wrap="wrap">
+    <Flex gap="large" wrap>
       {(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
         <Flex vertical gap="small" justify="center" align="center" key={theme}>
           <label
diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
index 74749b2a90..22e2ef7774 100644
--- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -404,8 +404,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
               dangerouslySetInnerHTML={{ __html: description }}
             />
           )}
-
-          <Flex wrap="wrap" gap="middle" className="code-box-actions">
+          <Flex wrap gap="middle" className="code-box-actions">
             {showOnlineUrl && (
               <Tooltip title={<FormattedMessage id="app.demo.online" />}>
                 <a
diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx
index c2f9cf7f2b..2744394b20 100644
--- a/.dumi/theme/common/styles/Common.tsx
+++ b/.dumi/theme/common/styles/Common.tsx
@@ -1,77 +1,86 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
 export default () => {
   const { anchorTop } = useTheme();
 
+  React.useInsertionEffect(() => {
+    updateCSS(`@layer global, antd;`, 'site-global', {
+      prepend: true,
+    });
+  }, []);
+
   return (
     <Global
       styles={css`
-      body,
-      div,
-      dl,
-      dt,
-      dd,
-      ul,
-      ol,
-      li,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      pre,
-      code,
-      form,
-      fieldset,
-      legend,
-      input,
-      textarea,
-      p,
-      blockquote,
-      th,
-      td,
-      hr,
-      button,
-      article,
-      aside,
-      details,
-      figcaption,
-      figure,
-      footer,
-      header,
-      hgroup,
-      menu,
-      nav,
-      section {
-        margin: 0;
-        padding: 0;
-      }
+        @layer global {
+          body,
+          div,
+          dl,
+          dt,
+          dd,
+          ul,
+          ol,
+          li,
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6,
+          pre,
+          code,
+          form,
+          fieldset,
+          legend,
+          input,
+          textarea,
+          p,
+          blockquote,
+          th,
+          td,
+          hr,
+          button,
+          article,
+          aside,
+          details,
+          figcaption,
+          figure,
+          footer,
+          header,
+          hgroup,
+          menu,
+          nav,
+          section {
+            margin: 0;
+            padding: 0;
+          }
 
-      ul,
-      ol {
-        list-style: none;
-      }
+          ul,
+          ol {
+            list-style: none;
+          }
 
-      img {
-        vertical-align: middle;
-        border-style: none;
-      }
+          img {
+            vertical-align: middle;
+            border-style: none;
+          }
 
-      [id] {
-        scroll-margin-top: ${anchorTop}px;
-      }
+          [id] {
+            scroll-margin-top: ${anchorTop}px;
+          }
 
-      [data-prefers-color='dark'] {
-        color-scheme: dark;
-      }
+          [data-prefers-color='dark'] {
+            color-scheme: dark;
+          }
 
-      [data-prefers-color='light'] {
-        color-scheme: light;
-      }
-    `}
+          [data-prefers-color='light'] {
+            color-scheme: light;
+          }
+        }
+      `}
     />
   );
 };
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
index ab1ab33f28..c45a6c6881 100644
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -204,6 +204,7 @@ const GlobalLayout: React.FC = () => {
       <StyleProvider
         cache={styleCache}
         linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]}
+        layer
       >
         <SiteContext.Provider value={siteContextValue}>
           <SiteThemeProvider theme={themeConfig}>
diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts
index c22b43803e..70f38e2983 100644
--- a/.dumi/theme/plugin.ts
+++ b/.dumi/theme/plugin.ts
@@ -221,7 +221,8 @@ const RoutesPlugin = (api: IApi) => {
         const matchRegex = /<style data-type="antd-cssinjs">([\S\s]+?)<\/style>/;
         const matchList = file.content.match(matchRegex) || [];
 
-        let antdStyle = '';
+        // Init to order the `@layer`
+        let antdStyle = '@layer global, antd;';
 
         matchList.forEach((text) => {
           file.content = file.content.replace(text, '');
diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx
index 942691e902..a62dcd038d 100644
--- a/components/_util/transButton.tsx
+++ b/components/_util/transButton.tsx
@@ -7,10 +7,11 @@ import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 
 interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   noStyle?: boolean;
   autoFocus?: boolean;
   disabled?: boolean;
+  tabIndex?: number;
 }
 
 const inlineStyle: React.CSSProperties = {
@@ -37,7 +38,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
     }
   };
 
-  const { style, noStyle, disabled, ...restProps } = props;
+  const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
 
   let mergedStyle: React.CSSProperties = {};
 
@@ -59,7 +60,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
   return (
     <div
       role="button"
-      tabIndex={0}
+      tabIndex={tabIndex}
       ref={ref}
       {...restProps}
       onKeyDown={onKeyDown}
diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
index 21cb5f0dee..34e9a2702d 100644
--- a/components/alert/Alert.tsx
+++ b/components/alert/Alert.tsx
@@ -15,6 +15,10 @@ import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
+export interface AlertRef {
+  nativeElement: HTMLDivElement;
+}
+
 export interface AlertProps {
   /** Type of Alert styles, options:`success`, `info`, `warning`, `error` */
   type?: 'success' | 'info' | 'warning' | 'error';
@@ -48,6 +52,8 @@ export interface AlertProps {
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
+
+  id?: string;
 }
 
 const iconMapFilled = {
@@ -102,7 +108,7 @@ const CloseIconNode: React.FC<CloseIconProps> = (props) => {
   ) : null;
 };
 
-const Alert: React.FC<AlertProps> = (props) => {
+const Alert = React.forwardRef<AlertRef, AlertProps>((props, ref) => {
   const {
     description,
     prefixCls: customizePrefixCls,
@@ -120,6 +126,7 @@ const Alert: React.FC<AlertProps> = (props) => {
     closeText,
     closeIcon,
     action,
+    id,
     ...otherProps
   } = props;
 
@@ -130,7 +137,12 @@ const Alert: React.FC<AlertProps> = (props) => {
     warning.deprecated(!closeText, 'closeText', 'closable.closeIcon');
   }
 
-  const ref = React.useRef<HTMLDivElement>(null);
+  const internalRef = React.useRef<HTMLDivElement>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    nativeElement: internalRef.current!,
+  }));
+
   const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
@@ -224,7 +236,8 @@ const Alert: React.FC<AlertProps> = (props) => {
     >
       {({ className: motionClassName, style: motionStyle }) => (
         <div
-          ref={ref}
+          id={id}
+          ref={internalRef}
           data-show={!closed}
           className={classNames(alertCls, motionClassName)}
           style={{ ...alert?.style, ...style, ...motionStyle }}
@@ -258,7 +271,7 @@ const Alert: React.FC<AlertProps> = (props) => {
       )}
     </CSSMotion>,
   );
-};
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Alert.displayName = 'Alert';
diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx
index c9f29da938..c12595e11e 100644
--- a/components/alert/ErrorBoundary.tsx
+++ b/components/alert/ErrorBoundary.tsx
@@ -6,6 +6,7 @@ interface ErrorBoundaryProps {
   message?: React.ReactNode;
   description?: React.ReactNode;
   children?: React.ReactNode;
+  id?: string;
 }
 
 interface ErrorBoundaryStates {
@@ -28,7 +29,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
   }
 
   render() {
-    const { message, description, children } = this.props;
+    const { message, description, id, children } = this.props;
     const { error, info } = this.state;
     const componentStack = info && info.componentStack ? info.componentStack : null;
     const errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
@@ -36,6 +37,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     if (error) {
       return (
         <Alert
+          id={id}
           type="error"
           message={errorMessage}
           description={
diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
index 8c9063e593..2391d3a4ce 100644
--- a/components/alert/__tests__/index.test.tsx
+++ b/components/alert/__tests__/index.test.tsx
@@ -9,6 +9,7 @@ import { act, render, screen, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
+import type { AlertRef } from '../Alert';
 
 const { ErrorBoundary } = Alert;
 
@@ -192,4 +193,13 @@ describe('Alert', () => {
 
     warnSpy.mockRestore();
   });
+
+  it('should support id and ref', () => {
+    const alertRef = React.createRef<AlertRef>();
+    const { container } = render(<Alert id="test-id" ref={alertRef} />);
+    const element = container.querySelector<HTMLDivElement>('#test-id');
+    expect(element).toBeTruthy();
+    expect(alertRef.current?.nativeElement).toBeTruthy();
+    expect(alertRef.current?.nativeElement).toBe(element);
+  });
 });
diff --git a/components/alert/index.ts b/components/alert/index.ts
index 66e8ed2adf..a9f01e8343 100644
--- a/components/alert/index.ts
+++ b/components/alert/index.ts
@@ -1,12 +1,9 @@
-import type React from 'react';
-
-import type { AlertProps } from './Alert';
 import InternalAlert from './Alert';
 import ErrorBoundary from './ErrorBoundary';
 
 export type { AlertProps } from './Alert';
 
-type CompoundedComponent = React.FC<AlertProps> & {
+type CompoundedComponent = typeof InternalAlert & {
   ErrorBoundary: typeof ErrorBoundary;
 };
 
diff --git a/components/button/LoadingIcon.tsx b/components/button/LoadingIcon.tsx
index 951b72a075..8ba499d3fb 100644
--- a/components/button/LoadingIcon.tsx
+++ b/components/button/LoadingIcon.tsx
@@ -3,6 +3,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 
+import type { ButtonProps } from './button';
 import IconWrapper from './IconWrapper';
 
 type InnerLoadingIconProps = {
@@ -10,27 +11,29 @@ type InnerLoadingIconProps = {
   className?: string;
   style?: React.CSSProperties;
   iconClassName?: string;
-};
+} & Pick<ButtonProps, 'iconPosition'>;
 
-const InnerLoadingIcon = forwardRef<HTMLSpanElement, InnerLoadingIconProps>(
-  ({ prefixCls, className, style, iconClassName }, ref) => {
-    const mergedIconCls = classNames(`${prefixCls}-loading-icon`, className);
+const InnerLoadingIcon = forwardRef<HTMLSpanElement, InnerLoadingIconProps>((props, ref) => {
+  const { prefixCls, className, style, iconClassName, iconPosition = 'start' } = props;
+  const mergedIconCls = classNames(className, {
+    [`${prefixCls}-loading-icon-end`]: iconPosition === 'end',
+    [`${prefixCls}-loading-icon`]: iconPosition === 'start',
+  });
 
-    return (
-      <IconWrapper prefixCls={prefixCls} className={mergedIconCls} style={style} ref={ref}>
-        <LoadingOutlined className={iconClassName} />
-      </IconWrapper>
-    );
-  },
-);
+  return (
+    <IconWrapper prefixCls={prefixCls} className={mergedIconCls} style={style} ref={ref}>
+      <LoadingOutlined className={iconClassName} />
+    </IconWrapper>
+  );
+});
 
-export interface LoadingIconProps {
+export type LoadingIconProps = {
   prefixCls: string;
   existIcon: boolean;
   loading?: boolean | object;
   className?: string;
   style?: React.CSSProperties;
-}
+} & Pick<ButtonProps, 'iconPosition'>;
 
 const getCollapsedWidth = (): React.CSSProperties => ({
   width: 0,
@@ -45,11 +48,18 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
 });
 
 const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
-  const { prefixCls, loading, existIcon, className, style } = props;
+  const { prefixCls, loading, existIcon, className, style, iconPosition } = props;
   const visible = !!loading;
 
   if (existIcon) {
-    return <InnerLoadingIcon prefixCls={prefixCls} className={className} style={style} />;
+    return (
+      <InnerLoadingIcon
+        prefixCls={prefixCls}
+        className={className}
+        style={style}
+        iconPosition={iconPosition}
+      />
+    );
   }
 
   return (
@@ -73,6 +83,7 @@ const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
           style={{ ...style, ...motionStyle }}
           ref={ref}
           iconClassName={motionCls}
+          iconPosition={iconPosition}
         />
       )}
     </CSSMotion>
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index 43f454b6de..49edf12208 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1520,6 +1520,467 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
 
 exports[`renders components/button/demo/icon.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/button/demo/icon-position.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+  >
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-radio-group ant-radio-group-outline"
+      >
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+        >
+          <span
+            class="ant-radio-button ant-radio-button-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              type="radio"
+              value="start"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            start
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper"
+        >
+          <span
+            class="ant-radio-button"
+          >
+            <input
+              class="ant-radio-button-input"
+              type="radio"
+              value="end"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            end
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-plain"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Preview
+    </span>
+  </div>,
+  <div
+    class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+  >
+    <div
+      class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    >
+      <button
+        class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            search
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-circle ant-btn-primary"
+        type="button"
+      >
+        <span>
+          A
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            search
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    >
+      <button
+        class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            search
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-text"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            search
+          </div>
+        </div>
+      </div>
+      <button
+        class="ant-btn ant-btn-dashed"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+      <a
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        href="https://www.google.com"
+        tabindex="0"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </a>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-loading"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon ant-btn-loading-icon"
+          style="width: 0px; opacity: 0; transform: scale(0);"
+        >
+          <span
+            aria-label="loading"
+            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="loading"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Loading
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/button/demo/icon-position.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/legacy-group.tsx extend context correctly 1`] = `
 Array [
   <div
@@ -2315,6 +2776,31 @@ exports[`renders components/button/demo/multiple.tsx extend context correctly 1`
 
 exports[`renders components/button/demo/multiple.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/button/demo/noSpace.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders components/button/demo/noSpace.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 239b769e62..847c1f1f73 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -1345,6 +1345,388 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/button/demo/icon-position.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+  >
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-radio-group ant-radio-group-outline"
+      >
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+        >
+          <span
+            class="ant-radio-button ant-radio-button-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              type="radio"
+              value="start"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            start
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper"
+        >
+          <span
+            class="ant-radio-button"
+          >
+            <input
+              class="ant-radio-button-input"
+              type="radio"
+              value="end"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            end
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-plain"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Preview
+    </span>
+  </div>,
+  <div
+    class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+  >
+    <div
+      class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    >
+      <button
+        class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-circle ant-btn-primary"
+        type="button"
+      >
+        <span>
+          A
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    >
+      <button
+        class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-text"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-dashed"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Search
+        </span>
+      </button>
+      <a
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        href="https://www.google.com"
+        tabindex="0"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </span>
+        </span>
+      </a>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-loading"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon ant-btn-loading-icon"
+        >
+          <span
+            aria-label="loading"
+            class="anticon anticon-loading anticon-spin"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="loading"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Loading
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/button/demo/legacy-group.tsx correctly 1`] = `
 Array [
   <div
@@ -1861,6 +2243,29 @@ exports[`renders components/button/demo/multiple.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/button/demo/noSpace.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders components/button/demo/size.tsx correctly 1`] = `
 Array [
   <div
diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
index 286adc3a17..eddfd263af 100644
--- a/components/button/__tests__/index.test.tsx
+++ b/components/button/__tests__/index.test.tsx
@@ -441,4 +441,10 @@ describe('Button', () => {
     const { container } = render(<Button type={'' as any} />);
     expect(container.querySelector('.ant-btn-default')).toBeTruthy();
   });
+
+  it('should support autoInsertSpace', () => {
+    const text = '确定';
+    const { container } = render(<Button autoInsertSpace={false}>{text}</Button>);
+    expect(container.querySelector<HTMLButtonElement>('button')?.textContent).toBe(text);
+  });
 });
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 972c50386d..cdd7090500 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -24,6 +24,7 @@ export type LegacyButtonType = ButtonType | 'danger';
 export interface BaseButtonProps {
   type?: ButtonType;
   icon?: React.ReactNode;
+  iconPosition?: 'start' | 'end';
   shape?: ButtonShape;
   size?: SizeType;
   disabled?: boolean;
@@ -50,6 +51,7 @@ type MergedHTMLAttributes = Omit<
 export interface ButtonProps extends BaseButtonProps, MergedHTMLAttributes {
   href?: string;
   htmlType?: ButtonHTMLType;
+  autoInsertSpace?: boolean;
 }
 
 type LoadingConfigType = {
@@ -90,12 +92,14 @@ const InternalCompoundedButton = React.forwardRef<
     rootClassName,
     children,
     icon,
+    iconPosition = 'start',
     ghost = false,
     block = false,
     // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
     htmlType = 'button',
     classNames: customClassNames,
     style: customStyle = {},
+    autoInsertSpace,
     ...rest
   } = props;
 
@@ -103,7 +107,10 @@ const InternalCompoundedButton = React.forwardRef<
   // Compatible with original `type` behavior
   const mergedType = type || 'default';
 
-  const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
+  const { getPrefixCls, direction, button } = useContext(ConfigContext);
+
+  const mergedInsertSpace = autoInsertSpace ?? button?.autoInsertSpace ?? true;
+
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -149,7 +156,7 @@ const InternalCompoundedButton = React.forwardRef<
 
   useEffect(() => {
     // FIXME: for HOC usage like <FormatMessage />
-    if (!buttonRef || !(buttonRef as any).current || autoInsertSpaceInButton === false) {
+    if (!buttonRef || !(buttonRef as any).current || !mergedInsertSpace) {
       return;
     }
     const buttonText = (buttonRef as any).current.textContent;
@@ -188,7 +195,6 @@ const InternalCompoundedButton = React.forwardRef<
     );
   }
 
-  const autoInsertSpace = autoInsertSpaceInButton !== false;
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
   const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
@@ -212,7 +218,7 @@ const InternalCompoundedButton = React.forwardRef<
       [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
       [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonType(mergedType),
       [`${prefixCls}-loading`]: innerLoading,
-      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace && !innerLoading,
+      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && mergedInsertSpace && !innerLoading,
       [`${prefixCls}-block`]: block,
       [`${prefixCls}-dangerous`]: !!danger,
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -225,7 +231,11 @@ const InternalCompoundedButton = React.forwardRef<
 
   const fullStyle: React.CSSProperties = { ...button?.style, ...customStyle };
 
-  const iconClasses = classNames(customClassNames?.icon, button?.classNames?.icon);
+  const isIconPositionEnd = iconPosition === 'end' && children && children !== 0 && iconType;
+
+  const iconClasses = classNames(customClassNames?.icon, button?.classNames?.icon, {
+    [`${prefixCls}-icon-end`]: isIconPositionEnd,
+  });
   const iconStyle: React.CSSProperties = {
     ...(styles?.icon || {}),
     ...(button?.styles?.icon || {}),
@@ -237,11 +247,27 @@ const InternalCompoundedButton = React.forwardRef<
         {icon}
       </IconWrapper>
     ) : (
-      <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={!!innerLoading} />
+      <LoadingIcon
+        existIcon={!!icon}
+        prefixCls={prefixCls}
+        loading={!!innerLoading}
+        iconPosition={iconPosition}
+      />
     );
 
   const kids =
-    children || children === 0 ? spaceChildren(children, needInserted && autoInsertSpace) : null;
+    children || children === 0 ? spaceChildren(children, needInserted && mergedInsertSpace) : null;
+
+  const genButtonContent = (iconComponent: React.ReactNode, kidsComponent: React.ReactNode) => {
+    const isRTL = direction === 'rtl';
+    const iconFirst = (iconPosition === 'start' && !isRTL) || (iconPosition === 'end' && isRTL);
+    return (
+      <>
+        {iconFirst ? iconComponent : kidsComponent}
+        {iconFirst ? kidsComponent : iconComponent}
+      </>
+    );
+  };
 
   if (linkButtonRestProps.href !== undefined) {
     return wrapCSSVar(
@@ -256,8 +282,7 @@ const InternalCompoundedButton = React.forwardRef<
         ref={buttonRef as React.Ref<HTMLAnchorElement>}
         tabIndex={mergedDisabled ? -1 : 0}
       >
-        {iconNode}
-        {kids}
+        {genButtonContent(iconNode, kids)}
       </a>,
     );
   }
@@ -272,8 +297,7 @@ const InternalCompoundedButton = React.forwardRef<
       disabled={mergedDisabled}
       ref={buttonRef as React.Ref<HTMLButtonElement>}
     >
-      {iconNode}
-      {kids}
+      {genButtonContent(iconNode, kids)}
 
       {/* Styles: compact */}
       {!!compactItemClassnames && <CompactCmp key="compact" prefixCls={prefixCls} />}
diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx
index 0cda77ee32..c0ac0563d6 100644
--- a/components/button/demo/basic.tsx
+++ b/components/button/demo/basic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
     <Button type="dashed">Dashed Button</Button>
diff --git a/components/button/demo/chinese-chars-loading.tsx b/components/button/demo/chinese-chars-loading.tsx
index ab6feab6b6..b184e97fa5 100644
--- a/components/button/demo/chinese-chars-loading.tsx
+++ b/components/button/demo/chinese-chars-loading.tsx
@@ -7,7 +7,7 @@ const Text2 = () => <span>部署</span>;
 const Text3 = () => <>Submit</>;
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Button>
       <span>
         <span>部署</span>
diff --git a/components/button/demo/component-token.tsx b/components/button/demo/component-token.tsx
index f197fc2596..bde16b0040 100644
--- a/components/button/demo/component-token.tsx
+++ b/components/button/demo/component-token.tsx
@@ -24,12 +24,12 @@ const App: React.FC = () => (
     }}
   >
     <Flex gap="small" vertical>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text">TEXT</Button>
         <Button type="primary">CONTAINED</Button>
         <Button>OUTLINED</Button>
       </Flex>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text" disabled>
           TEXT
         </Button>
@@ -38,7 +38,7 @@ const App: React.FC = () => (
         </Button>
         <Button disabled>OUTLINED</Button>
       </Flex>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text" size="small">
           TEXT
         </Button>
diff --git a/components/button/demo/danger.tsx b/components/button/demo/danger.tsx
index d205355e2a..0846bcbf4c 100644
--- a/components/button/demo/danger.tsx
+++ b/components/button/demo/danger.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Button type="primary" danger>
       Primary
     </Button>
diff --git a/components/button/demo/debug-icon.tsx b/components/button/demo/debug-icon.tsx
index d25a57f032..a39d9a1eb4 100644
--- a/components/button/demo/debug-icon.tsx
+++ b/components/button/demo/debug-icon.tsx
@@ -19,7 +19,7 @@ const App: React.FC = () => {
       </Divider>
       <ConfigProvider componentSize={size}>
         <Flex gap="small" vertical>
-          <Flex gap="small" wrap="wrap">
+          <Flex gap="small" wrap>
             <Tooltip title="search">
               <Button type="primary" shape="circle" icon={<SearchOutlined />} />
             </Tooltip>
@@ -34,7 +34,7 @@ const App: React.FC = () => {
             </Tooltip>
             <Button icon={<SearchOutlined />}>Search</Button>
           </Flex>
-          <Flex gap="small" wrap="wrap">
+          <Flex gap="small" wrap>
             <Tooltip title="search">
               <Button shape="circle" icon={<SearchOutlined />} />
             </Tooltip>
diff --git a/components/button/demo/ghost.tsx b/components/button/demo/ghost.tsx
index fe0da63cc4..4615df9ec2 100644
--- a/components/button/demo/ghost.tsx
+++ b/components/button/demo/ghost.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small" className="site-button-ghost-wrapper">
+  <Flex wrap gap="small" className="site-button-ghost-wrapper">
     <Button type="primary" ghost>
       Primary
     </Button>
diff --git a/components/button/demo/icon-position.md b/components/button/demo/icon-position.md
new file mode 100644
index 0000000000..086f349023
--- /dev/null
+++ b/components/button/demo/icon-position.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过设置 `iconPosition` 为 `start` 或 `end` 分别设置按钮图标的位置。
+
+## en-US
+
+Set the position of the button icon by setting `iconPosition` to `start` or `end` respectively.
diff --git a/components/button/demo/icon-position.tsx b/components/button/demo/icon-position.tsx
new file mode 100644
index 0000000000..df4d577183
--- /dev/null
+++ b/components/button/demo/icon-position.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Divider, Flex, Radio, Space, Tooltip } from 'antd';
+
+const App: React.FC = () => {
+  const [position, setPosition] = useState<'start' | 'end'>('start');
+
+  return (
+    <>
+      <Space>
+        <Radio.Group value={position} onChange={(e) => setPosition(e.target.value)}>
+          <Radio.Button value="start">start</Radio.Button>
+          <Radio.Button value="end">end</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Divider orientation="left" plain>
+        Preview
+      </Divider>
+      <Flex gap="small" vertical>
+        <Flex wrap gap="small">
+          <Tooltip title="search">
+            <Button type="primary" shape="circle" icon={<SearchOutlined />} />
+          </Tooltip>
+          <Button type="primary" shape="circle">
+            A
+          </Button>
+          <Button type="primary" icon={<SearchOutlined />} iconPosition={position}>
+            Search
+          </Button>
+          <Tooltip title="search">
+            <Button shape="circle" icon={<SearchOutlined />} />
+          </Tooltip>
+          <Button icon={<SearchOutlined />} iconPosition={position}>
+            Search
+          </Button>
+        </Flex>
+        <Flex wrap gap="small">
+          <Tooltip title="search">
+            <Button shape="circle" icon={<SearchOutlined />} />
+          </Tooltip>
+          <Button icon={<SearchOutlined />} type="text" iconPosition={position}>
+            Search
+          </Button>
+          <Tooltip title="search">
+            <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
+          </Tooltip>
+          <Button type="dashed" icon={<SearchOutlined />} iconPosition={position}>
+            Search
+          </Button>
+          <Button icon={<SearchOutlined />} href="https://www.google.com" iconPosition={position} />
+          <Button type="primary" loading iconPosition={position}>
+            Loading
+          </Button>
+        </Flex>
+      </Flex>
+    </>
+  );
+};
+
+export default App;
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index a41ab8ac51..17e596af26 100644
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -1,11 +1,7 @@
 ## zh-CN
 
-当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。
-
-如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。
+可以通过 `icon `属性添加图标，并使用 `iconPosition` 调整图标的位置。
 
 ## en-US
 
-`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`.
-
-If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
+You can add an icon through the `icon` property and adjust the position of the icon using `iconPosition`.
diff --git a/components/button/demo/icon.tsx b/components/button/demo/icon.tsx
index 855e8d6393..d6b0695024 100644
--- a/components/button/demo/icon.tsx
+++ b/components/button/demo/icon.tsx
@@ -4,7 +4,7 @@ import { Button, Flex, Tooltip } from 'antd';
 
 const App: React.FC = () => (
   <Flex gap="small" vertical>
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Tooltip title="search">
         <Button type="primary" shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
@@ -19,7 +19,7 @@ const App: React.FC = () => (
       </Tooltip>
       <Button icon={<SearchOutlined />}>Search</Button>
     </Flex>
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Tooltip title="search">
         <Button shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
diff --git a/components/button/demo/loading.tsx b/components/button/demo/loading.tsx
index 0562c4516e..50b5b62153 100644
--- a/components/button/demo/loading.tsx
+++ b/components/button/demo/loading.tsx
@@ -23,7 +23,7 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="small" vertical>
-      <Flex gap="small" align="center" wrap="wrap">
+      <Flex gap="small" align="center" wrap>
         <Button type="primary" loading>
           Loading
         </Button>
@@ -32,7 +32,7 @@ const App: React.FC = () => {
         </Button>
         <Button type="primary" icon={<PoweroffOutlined />} loading />
       </Flex>
-      <Flex gap="small" wrap="wrap">
+      <Flex gap="small" wrap>
         <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
           Click me!
         </Button>
diff --git a/components/button/demo/noSpace.md b/components/button/demo/noSpace.md
new file mode 100644
index 0000000000..8a5d3a8570
--- /dev/null
+++ b/components/button/demo/noSpace.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+我们默认在两个汉字之间添加空格，可以通过设置 `autoInsertSpace` 为 `false` 关闭。
+
+## en-US
+
+We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`.
diff --git a/components/button/demo/noSpace.tsx b/components/button/demo/noSpace.tsx
new file mode 100644
index 0000000000..5994ec07b3
--- /dev/null
+++ b/components/button/demo/noSpace.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Flex } from 'antd';
+
+const App: React.FC = () => (
+  <Flex gap="middle" wrap>
+    <Button type="primary" autoInsertSpace={false}>
+      确定
+    </Button>
+    <Button type="primary" autoInsertSpace>
+      确定
+    </Button>
+  </Flex>
+);
+
+export default App;
diff --git a/components/button/demo/size.tsx b/components/button/demo/size.tsx
index 2831519db5..7a874bfd66 100644
--- a/components/button/demo/size.tsx
+++ b/components/button/demo/size.tsx
@@ -18,7 +18,7 @@ const App: React.FC = () => {
         Preview
       </Divider>
       <Flex gap="small" align="flex-start" vertical>
-        <Flex gap="small" wrap="wrap">
+        <Flex gap="small" wrap>
           <Button type="primary" size={size}>
             Primary
           </Button>
@@ -30,7 +30,7 @@ const App: React.FC = () => {
         <Button type="link" size={size}>
           Link
         </Button>
-        <Flex gap="small" wrap="wrap">
+        <Flex gap="small" 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} />
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 03abceddc0..f250d3b14c 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -35,6 +35,7 @@ And 4 other properties additionally.
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Type</code>
 <code src="./demo/icon.tsx">Icon</code>
+<code src="./demo/icon-position.tsx" version="5.17.0">Icon Position</code>
 <code src="./demo/debug-icon.tsx" debug>Debug Icon</code>
 <code src="./demo/debug-block.tsx" debug>Debug Block</code>
 <code src="./demo/size.tsx">Size</code>
@@ -57,6 +58,7 @@ Different button styles can be generated by setting Button properties. The recom
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| autoInsertSpace | We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
 | block | Option to fit button width to its parent width | boolean | false |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | danger | Set the danger status of button | boolean | false |  |
@@ -65,13 +67,14 @@ Different button styles can be generated by setting Button properties. The recom
 | href | Redirect url of link button | string | - |  |
 | htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | Set the icon component of button | ReactNode | - |  |
+| iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 |
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
 | shape | Can be set button shape | `default` \| `circle` \| `round` | `default` |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - |  |
+| onClick | Set the handler to handle `click` event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  |
 
 It accepts all props which native buttons support.
 
@@ -95,18 +98,6 @@ If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvi
 </ConfigProvider>
 ```
 
-### How to remove space between 2 chinese characters?
-
-Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#api) to set `autoInsertSpaceInButton` as `false`.
-
-```jsx
-<ConfigProvider autoInsertSpaceInButton={false}>
-  <Button>按钮</Button>
-</ConfigProvider>
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" width="100px" height="64px" style="box-shadow: none; margin: 0;" alt="Button with two Chinese characters" />
-
 <style>
 .site-button-ghost-wrapper {
   padding: 16px;
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 16c7b166b4..3d85cf848b 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -37,11 +37,12 @@ group:
 
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">按钮类型</code>
-<code src="./demo/icon.tsx">图标按钮</code>
+<code src="./demo/icon.tsx" >按钮图标</code>
+<code src="./demo/icon-position.tsx" version="5.17.0">按钮图标位置</code>
 <code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>
 <code src="./demo/debug-block.tsx" debug>调试按钮block属性</code>
 <code src="./demo/size.tsx">按钮尺寸</code>
-<code src="./demo/disabled.tsx">不可用状态</code>
+<code src="./demo/disabled.tsx">不可用状态</code> 
 <code src="./demo/loading.tsx">加载中状态</code>
 <code src="./demo/multiple.tsx">多个按钮组合</code>
 <code src="./demo/ghost.tsx">幽灵按钮</code>
@@ -51,6 +52,7 @@ group:
 <code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 <code src="./demo/linear-gradient.tsx">渐变按钮</code>
+<code src="./demo/noSpace.tsx" version="5.17.0">移除两个汉字之间的空格</code>
 
 ## API
 
@@ -62,6 +64,7 @@ group:
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 `autoInsertSpace` 为 `false` 关闭 | boolean | `true` | 5.17.0 |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
 | classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | danger | 设置危险按钮 | boolean | false |  |
@@ -70,13 +73,14 @@ group:
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  |
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | 设置按钮的图标组件 | ReactNode | - |  |
+| iconPosition | 设置按钮图标组件的位置 | `start` \| `end` | `start` | 5.17.0 |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
 | shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
 | styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |  |
+| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  |
 
 支持原生 button 的其他所有属性。
 
@@ -100,18 +104,6 @@ group:
 </ConfigProvider>
 ```
 
-### 如何移除两个汉字之间的空格？
-
-根据 Ant Design 设计规范要求，我们会在按钮内（文本按钮和链接按钮除外）只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider-cn#api) 的 `autoInsertSpaceInButton` 为 `false`。
-
-```jsx
-<ConfigProvider autoInsertSpaceInButton={false}>
-  <Button>按钮</Button>
-</ConfigProvider>
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0" width="100px" height="64px" alt="移除两个汉字之间的空格"  />
-
 <style>
 .site-button-ghost-wrapper {
   padding: 16px;
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index a538053116..20e9d37210 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -13,7 +13,6 @@ export type { ComponentToken };
 // ============================== Shared ==============================
 const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
   const { componentCls, iconCls, fontWeight } = token;
-
   return {
     [componentCls]: {
       outline: 'none',
@@ -41,6 +40,10 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
 
       [`${componentCls}-icon`]: {
         lineHeight: 0,
+        // iconPosition in end
+        [`&-end`]: {
+          marginInlineStart: token.marginXS,
+        },
       },
 
       // Leave a space between icon and text.
@@ -52,6 +55,9 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         [`&${componentCls}-loading-icon, &:not(:last-child)`]: {
           marginInlineEnd: token.marginXS,
         },
+        [`&${componentCls}-loading-icon-end`]: {
+          marginInlineStart: token.marginXS,
+        },
       },
 
       '> a': {
diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
index 80ef71c3ff..ebe3c3c045 100644
--- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,5 +1,316 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders components/carousel/demo/arrows.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-carousel"
+  >
+    <div
+      class="slick-slider slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <div
+        class="slick-list"
+      >
+        <div
+          class="slick-track"
+          style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-bottom"
+        style="display: block;"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-carousel ant-carousel-vertical"
+  >
+    <div
+      class="slick-slider slick-vertical slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <div
+        class="slick-list"
+        style="height: 0px;"
+      >
+        <div
+          class="slick-track"
+          style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-left"
+        style="display: block;"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/carousel/demo/arrows.tsx extend context correctly 2`] = `
+[
+  "Warning: React does not recognize the \`%s\` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase \`%s\` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s",
+]
+`;
+
 exports[`renders components/carousel/demo/autoplay.tsx extend context correctly 1`] = `
 <div
   class="ant-carousel"
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
index d2e7d3bfdb..8517ec57cb 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,5 +1,309 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders components/carousel/demo/arrows.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-carousel"
+  >
+    <div
+      class="slick-slider slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <div
+        class="slick-list"
+      >
+        <div
+          class="slick-track"
+          style="width:400%;left:0%"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-bottom"
+        style="display:block"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-carousel ant-carousel-vertical"
+  >
+    <div
+      class="slick-slider slick-vertical slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <div
+        class="slick-list"
+      >
+        <div
+          class="slick-track"
+          style="width:400%;left:0%"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-left"
+        style="display:block"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/carousel/demo/autoplay.tsx correctly 1`] = `
 <div
   class="ant-carousel"
diff --git a/components/carousel/demo/arrows.md b/components/carousel/demo/arrows.md
new file mode 100644
index 0000000000..03bf70d394
--- /dev/null
+++ b/components/carousel/demo/arrows.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+显示切换箭头。
+
+## en-US
+
+Show the arrows for switching.
diff --git a/components/carousel/demo/arrows.tsx b/components/carousel/demo/arrows.tsx
new file mode 100644
index 0000000000..a0fdaf58d7
--- /dev/null
+++ b/components/carousel/demo/arrows.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Carousel } from 'antd';
+
+const contentStyle: React.CSSProperties = {
+  margin: 0,
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
+const App: React.FC = () => (
+  <>
+    <Carousel arrows infinite={false}>
+      <div>
+        <h3 style={contentStyle}>1</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>2</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>3</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>4</h3>
+      </div>
+    </Carousel>
+    <br />
+    <Carousel arrows dotPosition="left" infinite={false}>
+      <div>
+        <h3 style={contentStyle}>1</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>2</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>3</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>4</h3>
+      </div>
+    </Carousel>
+  </>
+);
+
+export default App;
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 9027df75f8..bb8da01285 100644
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -22,6 +22,7 @@ demo:
 <code src="./demo/position.tsx">Position</code>
 <code src="./demo/autoplay.tsx">Scroll automatically</code>
 <code src="./demo/fade.tsx">Fade in</code>
+<code src="./demo/arrows.tsx" version="5.17.0">Arrows for switching</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
@@ -30,6 +31,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| arrows | Whether to show switch arrows | boolean | false | 5.17.0 |
 | autoplay | Whether to scroll automatically | boolean | false |  |
 | autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` |  |
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index c963d66147..915b09bdf6 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -35,6 +35,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const {
     dots = true,
     arrows = false,
+    prevArrow = <button type="button" aria-label="prev" />,
+    nextArrow = <button type="button" aria-label="next" />,
     draggable = false,
     waitForAnimate = false,
     dotPosition = 'bottom',
@@ -115,6 +117,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         dots={enableDots}
         dotsClass={dsClass}
         arrows={arrows}
+        prevArrow={prevArrow}
+        nextArrow={nextArrow}
         draggable={draggable}
         verticalSwiping={vertical}
         waitForAnimate={waitForAnimate}
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index 872112885e..9061edcc1b 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -23,6 +23,7 @@ demo:
 <code src="./demo/position.tsx">位置</code>
 <code src="./demo/autoplay.tsx">自动切换</code>
 <code src="./demo/fade.tsx">渐显</code>
+<code src="./demo/arrows.tsx" version="5.17.0">切换箭头</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
@@ -31,6 +32,7 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| arrows | 是否显示箭头 | boolean | false | 5.17.0 |
 | autoplay | 是否自动切换 | boolean | false |  |
 | autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` |  |
diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts
index 8bb5087e30..87660d6cf6 100644
--- a/components/carousel/style/index.ts
+++ b/components/carousel/style/index.ts
@@ -2,7 +2,7 @@ import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genStyleHooks, mergeToken } from '../../theme/internal';
+import { genStyleHooks } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -15,6 +15,16 @@ export interface ComponentToken {
    * @descEN Height of indicator
    */
   dotHeight: number;
+  /**
+   * @desc 指示点之间的间距
+   * @descEN gap between indicator
+   */
+  dotGap: number;
+  /**
+   * @desc 指示点距离边缘的距离
+   * @descEN dot offset to Carousel edge
+   */
+  dotOffset: number;
   /** @deprecated Use `dotActiveWidth` instead. */
   dotWidthActive: number;
   /**
@@ -22,19 +32,22 @@ export interface ComponentToken {
    * @descEN Width of active indicator
    */
   dotActiveWidth: number;
+  /**
+   * @desc 切换箭头大小
+   * @descEN Size of arrows
+   */
+  arrowSize: number;
+  /**
+   * @desc 切换箭头边距
+   * @descEN arrows offset to Carousel edge
+   */
+  arrowOffset: number;
 }
 
-interface CarouselToken extends FullToken<'Carousel'> {
-  carouselArrowSize: string | number;
-  carouselDotOffset: string | number;
-  carouselDotInline: string | number;
-}
+interface CarouselToken extends FullToken<'Carousel'> {}
 
 const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
-  const { componentCls, antCls, carouselArrowSize, carouselDotOffset, marginXXS } = token;
-  const arrowOffset = token.calc(carouselArrowSize).mul(-1.25).equal();
-
-  const carouselDotMargin = marginXXS;
+  const { componentCls, antCls } = token;
 
   return {
     [componentCls]: {
@@ -133,142 +146,176 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
         display: 'block',
         height: 'auto',
       },
+    },
+  };
+};
 
-      '.slick-arrow.slick-hidden': {
-        display: 'none',
-      },
+const genArrowsStyle: GenerateStyle<CarouselToken> = (token) => {
+  const { componentCls, motionDurationSlow, arrowSize, arrowOffset } = token;
+  const arrowLength = token.calc(arrowSize).div(1.414).equal();
 
-      // Arrows
-      '.slick-prev, .slick-next': {
-        position: 'absolute',
-        top: '50%',
-        display: 'block',
-        width: carouselArrowSize,
-        height: carouselArrowSize,
-        marginTop: token.calc(carouselArrowSize).mul(-1).div(2).equal(),
-        padding: 0,
-        color: 'transparent',
-        fontSize: 0,
-        lineHeight: 0,
-        background: 'transparent',
-        border: 0,
-        outline: 'none',
-        cursor: 'pointer',
-
-        '&:hover, &:focus': {
-          color: 'transparent',
+  return [
+    {
+      [componentCls]: {
+        // Arrows
+        '.slick-prev, .slick-next': {
+          position: 'absolute',
+          top: '50%',
+          width: arrowSize,
+          height: arrowSize,
+          transform: 'translateY(-50%)',
+          color: '#fff',
+          opacity: 0.4,
           background: 'transparent',
+          padding: 0,
+          lineHeight: 0,
+          border: 0,
           outline: 'none',
+          cursor: 'pointer',
+          zIndex: 1,
+          transition: `opacity ${motionDurationSlow}`,
 
-          '&::before': {
+          '&:hover, &:focus': {
             opacity: 1,
           },
-        },
 
-        '&.slick-disabled::before': {
-          opacity: 0.25,
-        },
-      },
-
-      '.slick-prev': {
-        insetInlineStart: arrowOffset,
-
-        '&::before': {
-          content: '"←"',
-        },
-      },
-
-      '.slick-next': {
-        insetInlineEnd: arrowOffset,
-
-        '&::before': {
-          content: '"→"',
-        },
-      },
-
-      // Dots
-      '.slick-dots': {
-        position: 'absolute',
-        insetInlineEnd: 0,
-        bottom: 0,
-        insetInlineStart: 0,
-        zIndex: 15,
-        display: 'flex !important',
-        justifyContent: 'center',
-        paddingInlineStart: 0,
-        margin: 0,
-        listStyle: 'none',
-
-        '&-bottom': {
-          bottom: carouselDotOffset,
-        },
-
-        '&-top': {
-          top: carouselDotOffset,
-          bottom: 'auto',
-        },
-
-        li: {
-          position: 'relative',
-          display: 'inline-block',
-          flex: '0 1 auto',
-          boxSizing: 'content-box',
-          width: token.dotWidth,
-          height: token.dotHeight,
-          marginInline: carouselDotMargin,
-          padding: 0,
-          textAlign: 'center',
-          textIndent: -999,
-          verticalAlign: 'top',
-          transition: `all ${token.motionDurationSlow}`,
-
-          button: {
-            position: 'relative',
-            display: 'block',
-            width: '100%',
-            height: token.dotHeight,
-            padding: 0,
-            color: 'transparent',
-            fontSize: 0,
-            background: token.colorBgContainer,
-            border: 0,
-            borderRadius: token.dotHeight,
-            outline: 'none',
-            cursor: 'pointer',
-            opacity: 0.3,
-            transition: `all ${token.motionDurationSlow}`,
-
-            '&: hover, &:focus': {
-              opacity: 0.75,
-            },
-
-            '&::after': {
-              position: 'absolute',
-              inset: token.calc(carouselDotMargin).mul(-1).equal(),
-              content: '""',
-            },
+          '&.slick-disabled': {
+            pointerEvents: 'none',
+            opacity: 0,
           },
 
-          '&.slick-active': {
-            width: token.dotActiveWidth,
+          '&::after': {
+            boxSizing: 'border-box',
+            position: 'absolute',
+            top: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
+            insetInlineStart: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
+            display: 'inline-block',
+            width: arrowLength,
+            height: arrowLength,
+            border: `0 solid currentcolor`,
+            borderInlineWidth: '2px 0',
+            borderBlockWidth: '2px 0',
+            borderRadius: 1,
+            content: '""',
+          },
+        },
 
-            '& button': {
-              background: token.colorBgContainer,
-              opacity: 1,
+        '.slick-prev': {
+          insetInlineStart: arrowOffset,
+
+          '&::after': {
+            transform: 'rotate(-45deg)',
+          },
+        },
+
+        '.slick-next': {
+          insetInlineEnd: arrowOffset,
+
+          '&::after': {
+            transform: 'rotate(135deg)',
+          },
+        },
+      },
+    },
+  ];
+};
+
+const genDotsStyle: GenerateStyle<CarouselToken> = (token) => {
+  const {
+    componentCls,
+    dotOffset,
+    dotWidth,
+    dotHeight,
+    dotGap,
+    colorBgContainer,
+    motionDurationSlow,
+  } = token;
+  return [
+    {
+      [componentCls]: {
+        '.slick-dots': {
+          position: 'absolute',
+          insetInlineEnd: 0,
+          bottom: 0,
+          insetInlineStart: 0,
+          zIndex: 15,
+          display: 'flex !important',
+          justifyContent: 'center',
+          paddingInlineStart: 0,
+          margin: 0,
+          listStyle: 'none',
+
+          '&-bottom': {
+            bottom: dotOffset,
+          },
+
+          '&-top': {
+            top: dotOffset,
+            bottom: 'auto',
+          },
+
+          li: {
+            position: 'relative',
+            display: 'inline-block',
+            flex: '0 1 auto',
+            boxSizing: 'content-box',
+            width: dotWidth,
+            height: dotHeight,
+            marginInline: dotGap,
+            padding: 0,
+            textAlign: 'center',
+            textIndent: -999,
+            verticalAlign: 'top',
+            transition: `all ${motionDurationSlow}`,
+
+            button: {
+              position: 'relative',
+              display: 'block',
+              width: '100%',
+              height: dotHeight,
+              padding: 0,
+              color: 'transparent',
+              fontSize: 0,
+              background: colorBgContainer,
+              border: 0,
+              borderRadius: dotHeight,
+              outline: 'none',
+              cursor: 'pointer',
+              opacity: 0.2,
+              transition: `all ${motionDurationSlow}`,
+
+              '&: hover, &:focus': {
+                opacity: 0.75,
+              },
+
+              '&::after': {
+                position: 'absolute',
+                inset: token.calc(dotGap).mul(-1).equal(),
+                content: '""',
+              },
             },
 
-            '&: hover, &:focus': {
-              opacity: 1,
+            '&.slick-active': {
+              width: token.dotActiveWidth,
+
+              '& button': {
+                background: colorBgContainer,
+                opacity: 1,
+              },
+
+              '&: hover, &:focus': {
+                opacity: 1,
+              },
             },
           },
         },
       },
     },
-  };
+  ];
 };
 
 const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
-  const { componentCls, carouselDotOffset, marginXXS } = token;
+  const { componentCls, dotOffset, arrowOffset, marginXXS } = token;
 
   const reverseSizeOfDot = {
     width: token.dotHeight,
@@ -277,6 +324,26 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
 
   return {
     [`${componentCls}-vertical`]: {
+      '.slick-prev, .slick-next': {
+        insetInlineStart: '50%',
+        marginBlockStart: 'unset',
+        transform: 'translateX(-50%)',
+      },
+      '.slick-prev': {
+        insetBlockStart: arrowOffset,
+        insetInlineStart: '50%',
+
+        '&::after': {
+          transform: 'rotate(45deg)',
+        },
+      },
+      '.slick-next': {
+        insetBlockStart: 'auto',
+        insetBlockEnd: arrowOffset,
+        '&::after': {
+          transform: 'rotate(-135deg)',
+        },
+      },
       '.slick-dots': {
         top: '50%',
         bottom: 'auto',
@@ -288,11 +355,11 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
 
         '&-left': {
           insetInlineEnd: 'auto',
-          insetInlineStart: carouselDotOffset,
+          insetInlineStart: dotOffset,
         },
 
         '&-right': {
-          insetInlineEnd: carouselDotOffset,
+          insetInlineEnd: dotOffset,
           insetInlineStart: 'auto',
         },
 
@@ -343,12 +410,16 @@ const genCarouselRtlStyle: GenerateStyle<CarouselToken> = (token) => {
   ];
 };
 
-export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
+export const prepareComponentToken: GetDefaultToken<'Carousel'> = (token) => {
   const dotActiveWidth = 24;
 
   return {
+    arrowSize: 16,
+    arrowOffset: token.marginXS,
     dotWidth: 16,
     dotHeight: 3,
+    dotGap: token.marginXXS,
+    dotOffset: 12,
     dotWidthActive: dotActiveWidth,
     dotActiveWidth,
   };
@@ -357,19 +428,13 @@ export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
 // ============================== Export ==============================
 export default genStyleHooks(
   'Carousel',
-  (token) => {
-    const { controlHeightLG, controlHeightSM } = token;
-    const carouselToken = mergeToken<CarouselToken>(token, {
-      carouselArrowSize: token.calc(controlHeightLG).div(2).equal(),
-      carouselDotOffset: token.calc(controlHeightSM).div(2).equal(),
-    });
-
-    return [
-      genCarouselStyle(carouselToken),
-      genCarouselVerticalStyle(carouselToken),
-      genCarouselRtlStyle(carouselToken),
-    ];
-  },
+  (token) => [
+    genCarouselStyle(token),
+    genArrowsStyle(token),
+    genDotsStyle(token),
+    genCarouselVerticalStyle(token),
+    genCarouselRtlStyle(token),
+  ],
   prepareComponentToken,
   {
     deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']],
diff --git a/components/cascader/Panel.tsx b/components/cascader/Panel.tsx
index 7c88e085a5..71cfe1742b 100644
--- a/components/cascader/Panel.tsx
+++ b/components/cascader/Panel.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import type { CascaderProps as RcCascaderProps } from 'rc-cascader';
 import { Panel } from 'rc-cascader';
 import type { PickType } from 'rc-cascader/lib/Panel';
 
-import type { CascaderProps } from '.';
+import type { CascaderProps, DefaultOptionType } from '.';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useBase from './hooks/useBase';
@@ -14,9 +15,17 @@ import usePanelStyle from './style/panel';
 
 export type PanelPickType = Exclude<PickType, 'checkable'> | 'multiple' | 'rootClassName';
 
-export type CascaderPanelProps = Pick<CascaderProps, PanelPickType>;
+export type CascaderPanelProps<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+> = Pick<CascaderProps<OptionType, ValueField, Multiple>, PanelPickType>;
 
-const CascaderPanel: React.FC<CascaderPanelProps> = (props) => {
+function CascaderPanel<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+>(props: CascaderPanelProps<OptionType, ValueField, Multiple>) {
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -53,7 +62,7 @@ const CascaderPanel: React.FC<CascaderPanelProps> = (props) => {
 
   return wrapCSSVar(
     <Panel
-      {...props}
+      {...(props as Pick<RcCascaderProps, PickType>)}
       checkable={checkable}
       prefixCls={cascaderPrefixCls}
       className={classNames(className, hashId, rootClassName, cssVarCls, rootCls)}
@@ -63,6 +72,6 @@ const CascaderPanel: React.FC<CascaderPanelProps> = (props) => {
       loadingIcon={loadingIcon}
     />,
   );
-};
+}
 
 export default CascaderPanel;
diff --git a/components/cascader/__tests__/index.test.tsx b/components/cascader/__tests__/index.test.tsx
index 70001ac062..34c1155f90 100644
--- a/components/cascader/__tests__/index.test.tsx
+++ b/components/cascader/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SingleValueType } from 'rc-cascader/lib/Cascader';
 
-import type { BaseOptionType, DefaultOptionType } from '..';
+import type { DefaultOptionType } from '..';
 import Cascader from '..';
 import { resetWarned } from '../../_util/warning';
 import excludeAllWarning from '../../../tests/shared/excludeWarning';
@@ -71,11 +71,13 @@ const options = [
   },
 ];
 
-function filter<OptionType extends BaseOptionType = DefaultOptionType>(
+function filter<OptionType extends DefaultOptionType = DefaultOptionType>(
   inputValue: string,
   path: OptionType[],
 ): boolean {
-  return path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  return path.some((option) =>
+    option.label?.toString().toLowerCase().includes(inputValue.toLowerCase()),
+  );
 }
 
 describe('Cascader', () => {
@@ -183,7 +185,7 @@ describe('Cascader', () => {
         ],
       },
     ];
-    function customFilter<OptionType extends BaseOptionType = DefaultOptionType>(
+    function customFilter<OptionType extends DefaultOptionType = DefaultOptionType>(
       inputValue: string,
       path: OptionType[],
     ): boolean {
@@ -374,7 +376,7 @@ describe('Cascader', () => {
           {
             value: 'hangzhou',
             label: 'Hangzhou',
-            children: null,
+            children: null as any,
           },
         ],
       },
@@ -516,7 +518,7 @@ describe('Cascader', () => {
 
   it('onChange works correctly when the label of fieldNames is the same as value', () => {
     const onChange = jest.fn();
-    const sameNames = { label: 'label', value: 'label' };
+    const sameNames = { label: 'label', value: 'label' } as const;
     const { container } = render(
       <Cascader options={options} onChange={onChange} showSearch fieldNames={sameNames} />,
     );
diff --git a/components/cascader/__tests__/type.test.tsx b/components/cascader/__tests__/type.test.tsx
index 4dcb9387a9..e7e812420d 100644
--- a/components/cascader/__tests__/type.test.tsx
+++ b/components/cascader/__tests__/type.test.tsx
@@ -80,16 +80,12 @@ describe('Cascader.typescript', () => {
   });
 
   it('single onChange', () => {
-    const { container } = render(
-      <Cascader multiple={false} onChange={(values: (string | number)[]) => values} />,
-    );
+    const { container } = render(<Cascader multiple={false} onChange={(values) => values} />);
     expect(container).toBeTruthy();
   });
 
   it('multiple onChange', () => {
-    const { container } = render(
-      <Cascader multiple onChange={(values: (string | number)[][]) => values} />,
-    );
+    const { container } = render(<Cascader multiple onChange={(values) => values} />);
     expect(container).toBeTruthy();
   });
 });
diff --git a/components/cascader/demo/basic.tsx b/components/cascader/demo/basic.tsx
index 5c51fdec24..cf8d68a998 100644
--- a/components/cascader/demo/basic.tsx
+++ b/components/cascader/demo/basic.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
 
 interface Option {
-  value: string | number;
+  value: string;
   label: string;
   children?: Option[];
 }
@@ -42,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange = (value: (string | number)[]) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/change-on-select.tsx b/components/cascader/demo/change-on-select.tsx
index a9da7593c9..666f7f212e 100644
--- a/components/cascader/demo/change-on-select.tsx
+++ b/components/cascader/demo/change-on-select.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/custom-trigger.tsx b/components/cascader/demo/custom-trigger.tsx
index 65469a9ea2..44cf4f17b0 100644
--- a/components/cascader/demo/custom-trigger.tsx
+++ b/components/cascader/demo/custom-trigger.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -34,7 +34,7 @@ const options: Option[] = [
 const App: React.FC = () => {
   const [text, setText] = useState('Unselect');
 
-  const onChange: SingleCascaderProps<Option>['onChange'] = (_, selectedOptions) => {
+  const onChange: CascaderProps<Option>['onChange'] = (_, selectedOptions) => {
     setText(selectedOptions.map((o) => o.label).join(', '));
   };
 
diff --git a/components/cascader/demo/default-value.tsx b/components/cascader/demo/default-value.tsx
index 926d57e00a..13684ddfd3 100644
--- a/components/cascader/demo/default-value.tsx
+++ b/components/cascader/demo/default-value.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/disabled-option.tsx b/components/cascader/demo/disabled-option.tsx
index 3a06f2a0b9..3ee141444f 100644
--- a/components/cascader/demo/disabled-option.tsx
+++ b/components/cascader/demo/disabled-option.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -45,7 +45,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/fields-name.tsx b/components/cascader/demo/fields-name.tsx
index 29ef521faa..690bce725c 100644
--- a/components/cascader/demo/fields-name.tsx
+++ b/components/cascader/demo/fields-name.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   code: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/hover.tsx b/components/cascader/demo/hover.tsx
index b0cb179a13..27ec2a34d6 100644
--- a/components/cascader/demo/hover.tsx
+++ b/components/cascader/demo/hover.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/lazy.tsx b/components/cascader/demo/lazy.tsx
index c9aac58567..38b0ff6e8f 100644
--- a/components/cascader/demo/lazy.tsx
+++ b/components/cascader/demo/lazy.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
 
 interface Option {
@@ -24,7 +25,7 @@ const optionLists: Option[] = [
 const App: React.FC = () => {
   const [options, setOptions] = useState<Option[]>(optionLists);
 
-  const onChange = (value: (string | number)[], selectedOptions: Option[]) => {
+  const onChange: CascaderProps<Option>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
   };
 
diff --git a/components/cascader/demo/multiple.tsx b/components/cascader/demo/multiple.tsx
index 72ab9bb48b..11fcb8179f 100644
--- a/components/cascader/demo/multiple.tsx
+++ b/components/cascader/demo/multiple.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { MultipleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string | number;
@@ -44,7 +44,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: MultipleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/panel.tsx b/components/cascader/demo/panel.tsx
index 50af7e0420..a96640d9a1 100644
--- a/components/cascader/demo/panel.tsx
+++ b/components/cascader/demo/panel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader, Flex } from 'antd';
-import type { MultipleCascaderProps, SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string | number;
@@ -43,11 +43,11 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
-const onMultipleChange: MultipleCascaderProps<Option>['onChange'] = (value) => {
+const onMultipleChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/search.tsx b/components/cascader/demo/search.tsx
index ba26a07eb2..0494a021a3 100644
--- a/components/cascader/demo/search.tsx
+++ b/components/cascader/demo/search.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Cascader } from 'antd';
 import type { CascaderProps, GetProp } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 type DefaultOptionType = GetProp<CascaderProps, 'options'>[number];
 
@@ -52,7 +51,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value, selectedOptions) => {
+const onChange: CascaderProps<Option>['onChange'] = (value, selectedOptions) => {
   console.log(value, selectedOptions);
 };
 
diff --git a/components/cascader/demo/showCheckedStrategy.tsx b/components/cascader/demo/showCheckedStrategy.tsx
index d924b50bc0..020a93f254 100644
--- a/components/cascader/demo/showCheckedStrategy.tsx
+++ b/components/cascader/demo/showCheckedStrategy.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { MultipleCascaderProps } from 'antd/es/cascader';
 
 const { SHOW_CHILD } = Cascader;
 
@@ -44,7 +44,7 @@ const options: Option[] = [
 ];
 
 const App: React.FC = () => {
-  const onChange: MultipleCascaderProps<Option>['onChange'] = (value) => {
+  const onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
     console.log(value);
   };
   return (
@@ -70,7 +70,7 @@ const App: React.FC = () => {
         onChange={onChange}
         multiple
         maxTagCount="responsive"
-        defaultValue={['bamboo']}
+        defaultValue={[['bamboo']]}
       />
     </>
   );
diff --git a/components/cascader/demo/size.tsx b/components/cascader/demo/size.tsx
index a414b14350..cc90ba4b71 100644
--- a/components/cascader/demo/size.tsx
+++ b/components/cascader/demo/size.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/suffix.tsx b/components/cascader/demo/suffix.tsx
index 2c2d02593e..3e9e07fd1a 100644
--- a/components/cascader/demo/suffix.tsx
+++ b/components/cascader/demo/suffix.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SmileOutlined } from '@ant-design/icons';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -44,7 +44,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 24180832c0..3a0ebf5500 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -4,8 +4,7 @@ import type {
   BaseOptionType,
   DefaultOptionType,
   FieldNames,
-  MultipleCascaderProps as RcMultipleCascaderProps,
-  SingleCascaderProps as RcSingleCascaderProps,
+  CascaderProps as RcCascaderProps,
   ShowSearchType,
 } from 'rc-cascader';
 import RcCascader from 'rc-cascader';
@@ -105,51 +104,37 @@ const defaultSearchRender: ShowSearchType['render'] = (inputValue, path, prefixC
   return optionList;
 };
 
-export type SingleCascaderProps<OptionType extends BaseOptionType = any> = Omit<
-  RcSingleCascaderProps<OptionType>,
-  'checkable' | 'options'
-> & {
-  multiple?: false;
-};
-export type MultipleCascaderProps<OptionType extends BaseOptionType = any> = Omit<
-  RcMultipleCascaderProps<OptionType>,
-  'checkable' | 'options'
-> & {
-  multiple: true;
-};
+export interface CascaderProps<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+> extends Omit<RcCascaderProps<OptionType, ValueField, Multiple>, 'checkable'> {
+  multiple?: Multiple;
+  size?: SizeType;
+  /**
+   * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+   *   default behavior, you can hide it by setting `suffixIcon` to null.
+   */
+  showArrow?: boolean;
+  disabled?: boolean;
+  /** @deprecated Use `variant` instead. */
+  bordered?: boolean;
+  placement?: SelectCommonPlacement;
+  suffixIcon?: React.ReactNode;
+  options?: OptionType[];
+  status?: InputStatus;
+  autoClearSearchValue?: boolean;
 
-type UnionCascaderProps<OptionType extends BaseOptionType> =
-  | SingleCascaderProps<OptionType>
-  | MultipleCascaderProps<OptionType>;
-
-export type CascaderProps<DataNodeType extends BaseOptionType = any> =
-  UnionCascaderProps<DataNodeType> & {
-    multiple?: boolean;
-    size?: SizeType;
-    /**
-     * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
-     *   default behavior, you can hide it by setting `suffixIcon` to null.
-     */
-    showArrow?: boolean;
-    disabled?: boolean;
-    /** @deprecated Use `variant` instead. */
-    bordered?: boolean;
-    placement?: SelectCommonPlacement;
-    suffixIcon?: React.ReactNode;
-    options?: DataNodeType[];
-    status?: InputStatus;
-    autoClearSearchValue?: boolean;
-
-    rootClassName?: string;
-    popupClassName?: string;
-    /** @deprecated Please use `popupClassName` instead */
-    dropdownClassName?: string;
-    /**
-     * @since 5.13.0
-     * @default "outlined"
-     */
-    variant?: Variant;
-  };
+  rootClassName?: string;
+  popupClassName?: string;
+  /** @deprecated Please use `popupClassName` instead */
+  dropdownClassName?: string;
+  /**
+   * @since 5.13.0
+   * @default "outlined"
+   */
+  variant?: Variant;
+}
 
 export interface CascaderRef {
   focus: () => void;
@@ -360,8 +345,13 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
   );
 
   return wrapCascaderCSSVar(wrapSelectCSSVar(renderNode));
-}) as unknown as (<OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(
-  props: React.PropsWithChildren<CascaderProps<OptionType>> & React.RefAttributes<CascaderRef>,
+}) as unknown as (<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+>(
+  props: React.PropsWithChildren<CascaderProps<OptionType, ValueField, Multiple>> &
+    React.RefAttributes<CascaderRef>,
 ) => React.ReactElement) & {
   displayName: string;
   SHOW_PARENT: typeof SHOW_PARENT;
diff --git a/components/config-provider/__tests__/index.test.tsx b/components/config-provider/__tests__/index.test.tsx
index 052274d070..d1818f6674 100644
--- a/components/config-provider/__tests__/index.test.tsx
+++ b/components/config-provider/__tests__/index.test.tsx
@@ -25,7 +25,17 @@ describe('ConfigProvider', () => {
         <Button>{text}</Button>
       </ConfigProvider>,
     );
-    expect(container.querySelector('span')?.innerHTML).toBe(text);
+    expect(container.querySelector<HTMLSpanElement>('span')?.innerHTML).toBe(text);
+  });
+
+  it('button.autoInsertSpace', () => {
+    const text = '确定';
+    const { container } = render(
+      <ConfigProvider button={{ autoInsertSpace: false }}>
+        <Button>{text}</Button>
+      </ConfigProvider>,
+    );
+    expect(container.querySelector<HTMLSpanElement>('span')?.innerHTML).toBe(text);
   });
 
   it('renderEmpty', () => {
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index bfbbbef46e..4050da315f 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -1218,7 +1218,7 @@ describe('ConfigProvider support style and className props', () => {
           className: 'cp-tabs',
           style: { backgroundColor: 'red' },
           addIcon: <span className="cp-test-addIcon">cp-test-addIcon</span>,
-          moreIcon: <span className="cp-test-moreIcon">cp-test-moreIcon</span>,
+          more: { icon: <span className="cp-test-moreIcon">cp-test-moreIcon</span> },
           removeIcon: <span className="cp-test-removeIcon">cp-test-removeIcon</span>,
         }}
       >
diff --git a/components/config-provider/__tests__/useConfig.test.tsx b/components/config-provider/__tests__/useConfig.test.tsx
index 33edb8ce1a..845075aa01 100644
--- a/components/config-provider/__tests__/useConfig.test.tsx
+++ b/components/config-provider/__tests__/useConfig.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from 'antd';
 
 import ConfigProvider from '..';
 import { resetWarned } from '../../_util/warning';
@@ -61,4 +62,18 @@ describe('ConfigProvider.useConfig', () => {
     );
     errSpy.mockRestore();
   });
+
+  it('deprecated autoInsertSpaceInButton', () => {
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <ConfigProvider autoInsertSpaceInButton={false}>
+        <Button>测试</Button>
+      </ConfigProvider>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: ConfigProvider] `autoInsertSpaceInButton` is deprecated. Please use `{ button: { autoInsertSpace: boolean }}` instead.',
+    );
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 15a676fe78..1da8bd7ac0 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -128,7 +128,7 @@ export type ModalConfig = ComponentStyleConfig &
   Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable'>;
 
 export type TabsConfig = ComponentStyleConfig &
-  Pick<TabsProps, 'indicator' | 'indicatorSize' | 'moreIcon' | 'addIcon' | 'removeIcon'>;
+  Pick<TabsProps, 'indicator' | 'indicatorSize' | 'more' | 'moreIcon' | 'addIcon' | 'removeIcon'>;
 
 export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closable' | 'closeIcon'>;
 
@@ -140,7 +140,8 @@ export type InputConfig = ComponentStyleConfig &
 export type TextAreaConfig = ComponentStyleConfig &
   Pick<TextAreaProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear'>;
 
-export type ButtonConfig = ComponentStyleConfig & Pick<ButtonProps, 'classNames' | 'styles'>;
+export type ButtonConfig = ComponentStyleConfig &
+  Pick<ButtonProps, 'classNames' | 'styles' | 'autoInsertSpace'>;
 
 export type NotificationConfig = ComponentStyleConfig & Pick<ArgsProps, 'closeIcon'>;
 
@@ -194,6 +195,7 @@ export interface ConfigConsumerProps {
    * @descEN Set the [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config.
    */
   csp?: CSPConfig;
+  /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
   autoInsertSpaceInButton?: boolean;
   input?: InputConfig;
   textArea?: TextAreaConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 8efe6c3f7e..9c5717683d 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -52,7 +52,6 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true |  |
 | componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
@@ -105,7 +104,7 @@ const {
 | avatar | Set Avatar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
 | card | Set Card common props | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card#api), styles?: [CardProps\["styles"\]](/components/card#api) } | - | 5.7.0, `classNames` and `styles`: 5.14.0 |
 | calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index de714cc910..ec7d7a91f6 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -4,7 +4,7 @@ import IconContext from '@ant-design/icons/lib/components/Context';
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import { merge } from 'rc-util/lib/utils/set';
 
-import warning, { WarningContext } from '../_util/warning';
+import warning, { devUseWarning, WarningContext } from '../_util/warning';
 import type { WarningContextProps } from '../_util/warning';
 import ValidateMessagesContext from '../form/validateMessagesContext';
 import type { Locale } from '../locale';
@@ -122,6 +122,7 @@ export interface ConfigProviderProps {
   children?: React.ReactNode;
   renderEmpty?: RenderEmptyHandler;
   csp?: CSPConfig;
+  /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
   autoInsertSpaceInButton?: boolean;
   form?: FormConfig;
   input?: InputConfig;
@@ -463,6 +464,15 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     floatButtonGroup,
   };
 
+  if (process.env.NODE_ENV !== 'production') {
+    const warningFn = devUseWarning('ConfigProvider');
+    warningFn(
+      !('autoInsertSpaceInButton' in props),
+      'deprecated',
+      '`autoInsertSpaceInButton` is deprecated. Please use `{ button: { autoInsertSpace: boolean }}` instead.',
+    );
+  }
+
   const config: ConfigConsumerProps = {
     ...parentContext,
   };
@@ -482,6 +492,14 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     }
   });
 
+  if (typeof autoInsertSpaceInButton !== 'undefined') {
+    // merge deprecated api
+    config.button = {
+      autoInsertSpace: autoInsertSpaceInButton,
+      ...config.button,
+    };
+  }
+
   // https://github.com/ant-design/ant-design/issues/27617
   const memoedConfig = useMemo(
     () => config,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index f8dad60fc2..f6fedb4467 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -53,7 +53,6 @@ export default Demo;
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |  |
 | componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
@@ -107,7 +106,7 @@ const {
 | avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
 | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
 | calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card-cn#api), styles?: [CardProps\["styles"\]](/components/card-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.14.0 |
 | carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index ddbd8698f7..266fe74a06 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -212,7 +212,7 @@ Added in `4.1.0`.
 | defaultPickerValue | Default panel date, will be reset when panel open | [dayjs](https://day.js.org/) | - | 5.14.0 |
 | defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
-| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - |  |
+| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`, info: { from?: dayjs }) | - | `info.from`: 5.17.0 |
 | format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` |  |
 | id | Config input ids | { start?: string, end?: string } | - | 5.14.0 |
 | pickerValue | Panel date. Used for controlled switching of panel date. Work with `onPanelChange` | [dayjs](https://day.js.org/) | - | 5.14.0 |
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index b8eabfb554..0d28eb3151 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -213,7 +213,7 @@ dayjs.locale('zh-cn');
 | defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | [dayjs](https://day.js.org/)[] | - | 5.14.0 |
 | defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
-| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - |  |
+| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`, info: { from?: dayjs }) | - | `info.from`: 5.17.0 |
 | format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` |  |
 | id | 设置输入框 `id` 属性。 | { start?: string, end?: string } | - | 5.14.0 |
 | pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 `onPanelChange` 使用。 | [dayjs](https://day.js.org/)[] | - | 5.14.0 |
diff --git a/components/date-picker/style/panel.ts b/components/date-picker/style/panel.ts
index fc3188562a..128fd9716c 100644
--- a/components/date-picker/style/panel.ts
+++ b/components/date-picker/style/panel.ts
@@ -308,10 +308,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           width: pickerControlIconSize,
           height: pickerControlIconSize,
           border: `0 solid currentcolor`,
-          borderBlockStartWidth: pickerControlIconBorderWidth,
-          borderBlockEndWidth: 0,
-          borderInlineStartWidth: pickerControlIconBorderWidth,
-          borderInlineEndWidth: 0,
+          borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
+          borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
           content: '""',
         },
       },
@@ -326,10 +324,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           width: pickerControlIconSize,
           height: pickerControlIconSize,
           border: '0 solid currentcolor',
-          borderBlockStartWidth: pickerControlIconBorderWidth,
-          borderBlockEndWidth: 0,
-          borderInlineStartWidth: pickerControlIconBorderWidth,
-          borderInlineEndWidth: 0,
+          borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
+          borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
           content: '""',
         },
       },
diff --git a/components/drawer/DrawerPanel.tsx b/components/drawer/DrawerPanel.tsx
index 31ccb78e33..b422af366a 100644
--- a/components/drawer/DrawerPanel.tsx
+++ b/components/drawer/DrawerPanel.tsx
@@ -5,6 +5,8 @@ import type { DrawerProps as RCDrawerProps } from 'rc-drawer';
 import useClosable, { pickClosable } from '../_util/hooks/useClosable';
 import type { ClosableType } from '../_util/hooks/useClosable';
 import { ConfigContext } from '../config-provider';
+import Spin from '../spin';
+import type { SpinProps } from '../spin';
 
 export interface DrawerClassNames extends NonNullable<RCDrawerProps['classNames']> {
   header?: string;
@@ -38,6 +40,7 @@ export interface DrawerPanelProps {
   children?: React.ReactNode;
   classNames?: DrawerClassNames;
   styles?: DrawerStyles;
+  loading?: boolean | Omit<SpinProps, 'fullscreen' | 'tip'>;
 
   /** @deprecated Please use `styles.header` instead */
   headerStyle?: React.CSSProperties;
@@ -59,6 +62,7 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     title,
     footer,
     extra,
+    loading,
     onClose,
     headerStyle,
     bodyStyle,
@@ -87,6 +91,19 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     },
   );
 
+  // >>>>>>>>> Spinning
+  let spinProps: SpinProps | undefined;
+  if (typeof loading === 'boolean') {
+    spinProps = {
+      spinning: loading,
+    };
+  } else if (typeof loading === 'object') {
+    spinProps = {
+      spinning: true,
+      ...loading,
+    };
+  }
+
   const headerNode = React.useMemo<React.ReactNode>(() => {
     if (!title && !mergedClosable) {
       return null;
@@ -139,6 +156,21 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     );
   }, [footer, footerStyle, prefixCls]);
 
+  if (spinProps?.spinning) {
+    return (
+      <Spin
+        spinning={false}
+        style={{
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        {...spinProps}
+      />
+    );
+  }
+
   return (
     <>
       {headerNode}
diff --git a/components/drawer/__tests__/Drawer.test.tsx b/components/drawer/__tests__/Drawer.test.tsx
index 676d6bb980..bc5f088078 100644
--- a/components/drawer/__tests__/Drawer.test.tsx
+++ b/components/drawer/__tests__/Drawer.test.tsx
@@ -178,6 +178,35 @@ describe('Drawer', () => {
     expect(baseElement.querySelectorAll('button.forceRender').length).toBe(1);
   });
 
+  describe('Drawer loading', () => {
+    it('have a spinner', () => {
+      const { container: wrapper } = render(
+        <Drawer open loading getContainer={false}>
+          Here is content of Drawer
+        </Drawer>,
+      );
+
+      triggerMotion();
+      expect(wrapper.firstChild).toMatchSnapshot();
+    });
+    it('have a custom loading', () => {
+      const loadingContent = 'Custom Loading...';
+      const { container: wrapper } = render(
+        <Drawer
+          open
+          loading={{ indicator: <span>{loadingContent}</span>, spinning: true }}
+          getContainer={false}
+        >
+          Here is content of Drawer
+        </Drawer>,
+      );
+
+      triggerMotion();
+      const [loadingWrapper] = wrapper.getElementsByClassName('ant-spin-dot');
+      expect(loadingWrapper).toHaveTextContent(loadingContent);
+    });
+  });
+
   it('support closeIcon', () => {
     const { container: wrapper } = render(
       <Drawer open closable closeIcon={<span>close</span>} width={400} getContainer={false}>
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 3593c5e35d..6bd0196a06 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -1,5 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Drawer Drawer loading have a spinner 1`] = `
+<div
+  class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+  tabindex="-1"
+>
+  <div
+    class="ant-drawer-mask"
+  />
+  <div
+    aria-hidden="true"
+    data-sentinel="start"
+    style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+    tabindex="0"
+  />
+  <div
+    class="ant-drawer-content-wrapper"
+    style="width: 378px;"
+  >
+    <div
+      aria-modal="true"
+      class="ant-drawer-content"
+      role="dialog"
+    >
+      <div
+        aria-busy="true"
+        aria-live="polite"
+        class="ant-spin ant-spin-spinning"
+        style="height: 100%; display: flex; justify-content: center; align-items: center;"
+      >
+        <span
+          class="ant-spin-dot ant-spin-dot-spin"
+        >
+          <i
+            class="ant-spin-dot-item"
+          />
+          <i
+            class="ant-spin-dot-item"
+          />
+          <i
+            class="ant-spin-dot-item"
+          />
+          <i
+            class="ant-spin-dot-item"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    aria-hidden="true"
+    data-sentinel="end"
+    style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+    tabindex="0"
+  />
+</div>
+`;
+
 exports[`Drawer className is test_drawer 1`] = `
 <div
   class="ant-drawer ant-drawer-right test_drawer ant-drawer-open ant-drawer-inline"
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 2023f35ab0..6fb2c21ac2 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -2781,6 +2781,75 @@ Array [
 
 exports[`renders components/drawer/demo/form-in-drawer.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/drawer/demo/loading.tsx extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open
+    </span>
+  </button>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="width: 378px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          aria-busy="true"
+          aria-live="polite"
+          class="ant-spin ant-spin-spinning"
+          style="height: 100%; display: flex; justify-content: center; align-items: center;"
+        >
+          <span
+            class="ant-spin-dot ant-spin-dot-spin"
+          >
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
+`;
+
+exports[`renders components/drawer/demo/loading.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/drawer/demo/multi-level-drawer.tsx extend context correctly 1`] = `
 Array [
   <button
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
index 5537d3d04c..e2dd27b0b6 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -259,6 +259,17 @@ exports[`renders components/drawer/demo/form-in-drawer.tsx correctly 1`] = `
 </button>
 `;
 
+exports[`renders components/drawer/demo/loading.tsx correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open
+  </span>
+</button>
+`;
+
 exports[`renders components/drawer/demo/multi-level-drawer.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
diff --git a/components/drawer/demo/loading.md b/components/drawer/demo/loading.md
new file mode 100644
index 0000000000..65d98e9df4
--- /dev/null
+++ b/components/drawer/demo/loading.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+设置抽屉加载状态。
+
+## en-US
+
+Set the loading status of Drawer.
diff --git a/components/drawer/demo/loading.tsx b/components/drawer/demo/loading.tsx
new file mode 100644
index 0000000000..c5e5fbc2aa
--- /dev/null
+++ b/components/drawer/demo/loading.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import type { DrawerProps } from 'antd';
+import { Button, Drawer } from 'antd';
+
+const App: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState<DrawerProps['loading']>(true);
+  let id: NodeJS.Timer;
+
+  const showDrawer = () => {
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+    clearTimeout(Number(id));
+  };
+
+  useEffect(() => {
+    setLoading(true);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      id = setTimeout(() => {
+        setLoading(false);
+      }, 1000);
+    }
+  }, [open]);
+
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer
+        title="Basic Drawer"
+        placement="right"
+        closable={false}
+        onClose={onClose}
+        open={open}
+        loading={loading}
+        afterOpenChange={(visible) => !visible && setLoading(true)}
+      >
+        <Button onClick={() => setLoading(true)}>set Loading true</Button>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default App;
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index 30e57a6e8f..0718074deb 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -22,6 +22,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 <!-- prettier-ignore -->
 <code src="./demo/basic-right.tsx">Basic</code>
 <code src="./demo/placement.tsx">Custom Placement</code>
+<code src="./demo/loading.tsx">Loading</code>
 <code src="./demo/extra.tsx">Extra Actions</code>
 <code src="./demo/render-in-current.tsx">Render in current dom</code>
 <code src="./demo/form-in-drawer.tsx">Submit form in drawer</code>
@@ -68,6 +69,7 @@ v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `classNa
 | styles | Semantic structure style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | size | preset size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | title | The title for Drawer | ReactNode | - |  |
+| loading | Show spinning indicator | boolean \| `Omit<SpinProp, 'fullScreen' \| 'tip'>` | false | 5.17.0 |
 | open | Whether the Drawer dialog is visible or not | boolean | false |  |
 | width | Width of the Drawer dialog | string \| number | 378 |  |
 | zIndex | The `z-index` of the Drawer | number | 1000 |  |
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index 51bceabfda..9392fe3a09 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -22,6 +22,7 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/basic-right.tsx">基础抽屉</code>
 <code src="./demo/placement.tsx">自定义位置</code>
+<code src="./demo/loading.tsx">加载中</code>
 <code src="./demo/extra.tsx">额外操作</code>
 <code src="./demo/render-in-current.tsx">渲染在当前 DOM</code>
 <code src="./demo/form-in-drawer.tsx">抽屉表单</code>
@@ -67,6 +68,7 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 `bodyStyle` | CSSProperties | - |  |
 | styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | title | 标题 | ReactNode | - |  |
+| loading | 显示旋转指示器 | boolean \| `Omit<SpinProp, 'fullScreen' \| 'tip'>` | false | 5.17.0 |
 | open | Drawer 是否可见 | boolean | - |
 | width | 宽度 | string \| number | 378 |  |
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
diff --git a/components/flex/__tests__/index.test.tsx b/components/flex/__tests__/index.test.tsx
index 7ec72caa71..d802f0255b 100644
--- a/components/flex/__tests__/index.test.tsx
+++ b/components/flex/__tests__/index.test.tsx
@@ -67,4 +67,19 @@ describe('Flex', () => {
       'ant-flex-align-center',
     );
   });
+
+  it('wrap prop shouled support boolean', () => {
+    const { container, rerender } = render(<Flex>test</Flex>);
+    const element = container.querySelector<HTMLDivElement>('.ant-flex');
+
+    ([true, 'wrap'] as const).forEach((value) => {
+      rerender(<Flex wrap={value}>test</Flex>);
+      expect(element).toHaveClass('ant-flex-wrap-wrap');
+    });
+
+    ([false, 'nowrap'] as const).forEach((value) => {
+      rerender(<Flex wrap={value}>test</Flex>);
+      expect(element).not.toHaveClass('ant-flex-wrap-wrap');
+    });
+  });
 });
diff --git a/components/flex/demo/wrap.tsx b/components/flex/demo/wrap.tsx
index 13e9629c49..07a671a50c 100644
--- a/components/flex/demo/wrap.tsx
+++ b/components/flex/demo/wrap.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const Demo: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     {Array.from({ length: 24 }, (_, i) => (
       <Button key={i} type="primary">
         Button
diff --git a/components/flex/index.en-US.md b/components/flex/index.en-US.md
index aecdbc487d..8a16506113 100644
--- a/components/flex/index.en-US.md
+++ b/components/flex/index.en-US.md
@@ -37,10 +37,10 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | type | Default | Version |
 | --- | --- | --- | --- | --- |
 | vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` |  |
-| wrap | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | nowrap |  |
-| justify | Sets the alignment of elements in the direction of the main axis | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal |  |
-| align | Sets the alignment of elements in the direction of the cross axis | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal |  |
-| flex | flex CSS shorthand properties | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal |  |
+| wrap | Set whether the element is displayed in a single line or in multiple lines | [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) \| boolean | nowrap | boolean: 5.17.0 |
+| justify | Sets the alignment of elements in the direction of the main axis | [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal |  |
+| align | Sets the alignment of elements in the direction of the cross axis | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal |  |
+| flex | flex CSS shorthand properties | [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal |  |
 | gap | Sets the gap between grids | `small` \| `middle` \| `large` \| string \| number | - |  |
 | component | custom element type | React.ComponentType | `div` |  |
 
diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md
index 3ec09c337e..a657a637df 100644
--- a/components/flex/index.zh-CN.md
+++ b/components/flex/index.zh-CN.md
@@ -38,10 +38,10 @@ tag: 5.10.0
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | vertical | flex 主轴的方向是否垂直，使用 `flex-direction: column` | boolean | `false` |
-| wrap | 设置元素单行显示还是多行显示 | 参考 [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) | nowrap |  |
-| justify | 设置元素在主轴方向上的对齐方式 | 参考 [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal |  |
-| align | 设置元素在交叉轴方向上的对齐方式 | 参考 [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal |  |
-| flex | flex CSS 简写属性 | 参考 [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal |  |
+| wrap | 设置元素单行显示还是多行显示 | [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) \| boolean | nowrap | boolean: 5.17.0 |
+| justify | 设置元素在主轴方向上的对齐方式 | [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal |  |
+| align | 设置元素在交叉轴方向上的对齐方式 | [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal |  |
+| flex | flex CSS 简写属性 | [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal |  |
 | gap | 设置网格之间的间隙 | `small` \| `middle` \| `large` \| string \| number | - |  |
 | component | 自定义元素类型 | React.ComponentType | `div` |  |
 
diff --git a/components/flex/interface.ts b/components/flex/interface.ts
index 6e7f42151b..d2d5f8d864 100644
--- a/components/flex/interface.ts
+++ b/components/flex/interface.ts
@@ -7,7 +7,7 @@ export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLEleme
   prefixCls?: string;
   rootClassName?: string;
   vertical?: boolean;
-  wrap?: React.CSSProperties['flexWrap'];
+  wrap?: boolean | React.CSSProperties['flexWrap'];
   justify?: React.CSSProperties['justifyContent'];
   align?: React.CSSProperties['alignItems'];
   flex?: React.CSSProperties['flex'];
diff --git a/components/flex/utils.ts b/components/flex/utils.ts
index 1cd814e697..3acc8dca00 100644
--- a/components/flex/utils.ts
+++ b/components/flex/utils.ts
@@ -2,9 +2,9 @@ import classNames from 'classnames';
 
 import type { FlexProps } from './interface';
 
-export const flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'] as const;
+export const flexWrapValues: React.CSSProperties['flexWrap'][] = ['wrap', 'nowrap', 'wrap-reverse'];
 
-export const justifyContentValues = [
+export const justifyContentValues: React.CSSProperties['justifyContent'][] = [
   'flex-start',
   'flex-end',
   'start',
@@ -17,9 +17,9 @@ export const justifyContentValues = [
   'normal',
   'left',
   'right',
-] as const;
+];
 
-export const alignItemsValues = [
+export const alignItemsValues: React.CSSProperties['alignItems'][] = [
   'center',
   'start',
   'end',
@@ -30,14 +30,13 @@ export const alignItemsValues = [
   'baseline',
   'normal',
   'stretch',
-] as const;
+];
 
 const genClsWrap = (prefixCls: string, props: FlexProps) => {
-  const wrapCls: Record<PropertyKey, boolean> = {};
-  flexWrapValues.forEach((cssKey) => {
-    wrapCls[`${prefixCls}-wrap-${cssKey}`] = props.wrap === cssKey;
-  });
-  return wrapCls;
+  const wrap = props.wrap === true ? 'wrap' : props.wrap;
+  return {
+    [`${prefixCls}-wrap-${wrap}`]: wrap && flexWrapValues.includes(wrap),
+  };
 };
 
 const genClsAlign = (prefixCls: string, props: FlexProps) => {
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7b5de32379..daa2d6bd76 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2143,7 +2143,9 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
           <div
             class="ant-form-item-control-input-content"
           >
-            <span>
+            <span
+              id="customized_form_controls_price"
+            >
               <input
                 class="ant-input ant-input-outlined"
                 style="width: 100px;"
@@ -22212,6 +22214,380 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
 
 exports[`renders components/form/demo/validate-other.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/form/demo/validate-scroll-to-field.tsx extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  style="padding-block: 32px;"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-offset-6 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Scroll to Bio
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="username"
+          title="UserName"
+        >
+          UserName
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              aria-required="true"
+              class="ant-input ant-input-outlined"
+              id="username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="occupation"
+          title="Occupation"
+        >
+          Occupation
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="occupation_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="occupation_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="occupation"
+                    readonly=""
+                    role="combobox"
+                    style="opacity: 0;"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                />
+              </div>
+              <div
+                class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              >
+                <div>
+                  <div
+                    id="occupation_list"
+                    role="listbox"
+                    style="height: 0px; width: 0px; overflow: hidden;"
+                  >
+                    <div
+                      aria-label="Designer"
+                      aria-selected="false"
+                      id="occupation_list_0"
+                      role="option"
+                    >
+                      designer
+                    </div>
+                    <div
+                      aria-label="Developer"
+                      aria-selected="false"
+                      id="occupation_list_1"
+                      role="option"
+                    >
+                      developer
+                    </div>
+                  </div>
+                  <div
+                    class="rc-virtual-list"
+                    style="position: relative;"
+                  >
+                    <div
+                      class="rc-virtual-list-holder"
+                      style="max-height: 256px; overflow-y: auto;"
+                    >
+                      <div>
+                        <div
+                          class="rc-virtual-list-holder-inner"
+                          style="display: flex; flex-direction: column;"
+                        >
+                          <div
+                            aria-selected="false"
+                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                            title="Designer"
+                          >
+                            <div
+                              class="ant-select-item-option-content"
+                            >
+                              Designer
+                            </div>
+                            <span
+                              aria-hidden="true"
+                              class="ant-select-item-option-state"
+                              style="user-select: none;"
+                              unselectable="on"
+                            />
+                          </div>
+                          <div
+                            aria-selected="false"
+                            class="ant-select-item ant-select-item-option"
+                            title="Developer"
+                          >
+                            <div
+                              class="ant-select-item-option-content"
+                            >
+                              Developer
+                            </div>
+                            <span
+                              aria-hidden="true"
+                              class="ant-select-item-option-state"
+                              style="user-select: none;"
+                              unselectable="on"
+                            />
+                          </div>
+                          <div
+                            aria-selected="false"
+                            class="ant-select-item ant-select-item-option"
+                            title="Product Manager"
+                          >
+                            <div
+                              class="ant-select-item-option-content"
+                            >
+                              Product Manager
+                            </div>
+                            <span
+                              aria-hidden="true"
+                              class="ant-select-item-option-state"
+                              style="user-select: none;"
+                              unselectable="on"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <span
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select: none;"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-select-suffix"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="motto"
+          title="Motto"
+        >
+          Motto
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <textarea
+              class="ant-input ant-input-outlined"
+              id="motto"
+              rows="4"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="bio"
+          title="Bio"
+        >
+          Bio
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <textarea
+              aria-required="true"
+              class="ant-input ant-input-outlined"
+              id="bio"
+              rows="6"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-offset-6 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-flex ant-flex-gap-small"
+            >
+              <button
+                class="ant-btn ant-btn-primary"
+                type="submit"
+              >
+                <span>
+                  Submit
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-default ant-btn-dangerous"
+                type="button"
+              >
+                <span>
+                  Reset
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders components/form/demo/validate-scroll-to-field.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/form/demo/validate-static.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index a6e16cbb73..db9a15d1bb 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1624,7 +1624,9 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
           <div
             class="ant-form-item-control-input-content"
           >
-            <span>
+            <span
+              id="customized_form_controls_price"
+            >
               <input
                 class="ant-input ant-input-outlined"
                 style="width:100px"
@@ -9878,6 +9880,281 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
 </form>
 `;
 
+exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  style="padding-block:32px"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-offset-6 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Scroll to Bio
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="username"
+          title="UserName"
+        >
+          UserName
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              aria-required="true"
+              class="ant-input ant-input-outlined"
+              id="username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="occupation"
+          title="Occupation"
+        >
+          Occupation
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="occupation_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="occupation_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="occupation"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                />
+              </div>
+              <span
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-select-suffix"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class=""
+          for="motto"
+          title="Motto"
+        >
+          Motto
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <textarea
+              class="ant-input ant-input-outlined"
+              id="motto"
+              rows="4"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="bio"
+          title="Bio"
+        >
+          Bio
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <textarea
+              aria-required="true"
+              class="ant-input ant-input-outlined"
+              id="bio"
+              rows="6"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-offset-6 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-flex ant-flex-gap-small"
+            >
+              <button
+                class="ant-btn ant-btn-primary"
+                type="submit"
+              >
+                <span>
+                  Submit
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-default ant-btn-dangerous"
+                type="button"
+              >
+                <span>
+                  Reset
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
index 24519be7f6..2bc7e6b26e 100644
--- a/components/form/__tests__/index.test.tsx
+++ b/components/form/__tests__/index.test.tsx
@@ -448,30 +448,117 @@ describe('Form', () => {
     });
   });
 
-  it('scrollToFirstError', async () => {
-    const onFinishFailed = jest.fn();
+  describe('scrollToFirstError', () => {
+    it('should work with scrollToFirstError', async () => {
+      const onFinishFailed = jest.fn();
 
-    const { container } = render(
-      <Form scrollToFirstError={{ block: 'center' }} onFinishFailed={onFinishFailed}>
-        <Form.Item name="test" rules={[{ required: true }]}>
-          <input />
-        </Form.Item>
-        <Form.Item>
-          <Button htmlType="submit">Submit</Button>
-        </Form.Item>
-      </Form>,
-    );
+      const { container } = render(
+        <Form scrollToFirstError={{ block: 'center' }} onFinishFailed={onFinishFailed}>
+          <Form.Item name="test" rules={[{ required: true }]}>
+            <input />
+          </Form.Item>
+          <Form.Item>
+            <Button htmlType="submit">Submit</Button>
+          </Form.Item>
+        </Form>,
+      );
 
-    expect(scrollIntoView).not.toHaveBeenCalled();
-    fireEvent.submit(container.querySelector('form')!);
-    await waitFakeTimer();
+      expect(scrollIntoView).not.toHaveBeenCalled();
+      fireEvent.submit(container.querySelector('form')!);
+      await waitFakeTimer();
 
-    const inputNode = document.getElementById('test');
-    expect(scrollIntoView).toHaveBeenCalledWith(inputNode, {
-      block: 'center',
-      scrollMode: 'if-needed',
+      const inputNode = document.getElementById('test');
+      expect(scrollIntoView).toHaveBeenCalledWith(inputNode, {
+        block: 'center',
+        scrollMode: 'if-needed',
+      });
+      expect(onFinishFailed).toHaveBeenCalled();
+    });
+
+    it('should work with scrollToFirstError with ref', async () => {
+      const ForwardRefInput = React.forwardRef<HTMLInputElement, any>(({ id, ...props }, ref) => (
+        <input {...props} ref={ref} />
+      ));
+
+      const NativeInput = React.forwardRef<any, any>(({ id, ...props }, ref) => {
+        const internalRef = React.useRef<HTMLInputElement>(null);
+        React.useImperativeHandle(ref, () => ({
+          nativeElement: internalRef.current,
+        }));
+        return <input {...props} ref={internalRef} />;
+      });
+
+      const NormalInput = (props: any) => <input {...props} />;
+
+      const { getByRole, getAllByRole } = render(
+        <Form scrollToFirstError>
+          <Form.Item name="foo" rules={[{ required: true }]}>
+            <ForwardRefInput />
+          </Form.Item>
+          <Form.Item name="bar" rules={[{ required: true }]}>
+            <NativeInput />
+          </Form.Item>
+          <Form.Item name="baz" rules={[{ required: true }]}>
+            <NormalInput />
+          </Form.Item>
+          <Form.Item>
+            <Button htmlType="submit">Submit</Button>
+          </Form.Item>
+        </Form>,
+      );
+
+      // click submit to trigger validate
+      const allInputs = getAllByRole('textbox');
+      const button = getByRole('button');
+      expect(allInputs).toHaveLength(3);
+
+      fireEvent.click(button);
+      await waitFakeTimer();
+
+      expect(scrollIntoView).toHaveBeenNthCalledWith(1, allInputs[0], expect.any(Object));
+
+      // change the value of the first input
+      fireEvent.change(allInputs[0], { target: { value: '123' } });
+      fireEvent.click(button);
+      await waitFakeTimer();
+
+      expect(scrollIntoView).toHaveBeenNthCalledWith(2, allInputs[1], expect.any(Object));
+
+      // change the value of the second input
+      fireEvent.change(allInputs[1], { target: { value: 'abc' } });
+      fireEvent.click(button);
+      await waitFakeTimer();
+
+      expect(scrollIntoView).toHaveBeenNthCalledWith(3, allInputs[2], expect.any(Object));
+
+      expect(scrollIntoView).toHaveBeenCalledTimes(3);
+    });
+
+    // https://github.com/ant-design/ant-design/issues/28869
+    it('should work with Upload', async () => {
+      const uploadRef = React.createRef<any>();
+
+      const { getByRole } = render(
+        <Form scrollToFirstError>
+          <Form.Item
+            name="demo-form_dragger"
+            valuePropName="fileList"
+            getValueFromEvent={(e) => (Array.isArray(e) ? e : e?.fileList)}
+            rules={[{ required: true }]}
+          >
+            <Upload name="files" action="/upload.do" ref={uploadRef} />
+          </Form.Item>
+          <Form.Item>
+            <Button htmlType="submit">Submit</Button>
+          </Form.Item>
+        </Form>,
+      );
+      fireEvent.click(getByRole('button'));
+      await waitFakeTimer();
+
+      expect(scrollIntoView).toHaveBeenCalled();
+      expect((scrollIntoView as any).mock.calls[0][0]).toBe(uploadRef.current.nativeElement);
     });
-    expect(onFinishFailed).toHaveBeenCalled();
   });
 
   it('Form.Item should support data-*、aria-* and custom attribute', () => {
diff --git a/components/form/demo/component-token.tsx b/components/form/demo/component-token.tsx
index 9c006b8a1d..15a72c2fa2 100644
--- a/components/form/demo/component-token.tsx
+++ b/components/form/demo/component-token.tsx
@@ -13,6 +13,7 @@ const App: React.FC = () => (
           labelColonMarginInlineStart: 4,
           labelColonMarginInlineEnd: 12,
           itemMarginBottom: 18,
+          inlineItemMarginBottom: 18,
         },
       },
     }}
diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md
index c803e53a18..4eac9aa9e7 100644
--- a/components/form/demo/customized-form-controls.md
+++ b/components/form/demo/customized-form-controls.md
@@ -2,12 +2,14 @@
 
 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：
 
-> - 提供受控属性 `value` 或其它与 [`valuePropName`](https://ant.design/components/form-cn/#formitem) 的值同名的属性。
-> - 提供 `onChange` 事件或 [`trigger`](https://ant.design/components/form-cn/#formitem) 的值同名的事件。
+> - 提供受控属性 `value` 或其它与 [`valuePropName`](#formitem) 的值同名的属性。
+> - 提供 `onChange` 事件或 [`trigger`](#formitem) 的值同名的事件。
+> - 转发 ref 或者传递 id 属性到 dom 以支持 `scrollToField` 方法。
 
 ## en-US
 
 Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:
 
-> - It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](https://ant.design/components/form/#formitem).
-> - It has event `onChange` or an event which name is equal to the value of [`trigger`](https://ant.design/components/form/#formitem).
+> - It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](#formitem).
+> - It has event `onChange` or an event which name is equal to the value of [`trigger`](#formitem).
+> - Forward the ref or pass the id property to dom to support the `scrollToField` method.
diff --git a/components/form/demo/customized-form-controls.tsx b/components/form/demo/customized-form-controls.tsx
index 5f0dcc32f9..6d0dd525a9 100644
--- a/components/form/demo/customized-form-controls.tsx
+++ b/components/form/demo/customized-form-controls.tsx
@@ -11,11 +11,13 @@ interface PriceValue {
 }
 
 interface PriceInputProps {
+  id?: string;
   value?: PriceValue;
   onChange?: (value: PriceValue) => void;
 }
 
-const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
+const PriceInput: React.FC<PriceInputProps> = (props) => {
+  const { id, value = {}, onChange } = props;
   const [number, setNumber] = useState(0);
   const [currency, setCurrency] = useState<Currency>('rmb');
 
@@ -42,7 +44,7 @@ const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
   };
 
   return (
-    <span>
+    <span id={id}>
       <Input
         type="text"
         value={value.number || number}
diff --git a/components/form/demo/validate-scroll-to-field.md b/components/form/demo/validate-scroll-to-field.md
new file mode 100644
index 0000000000..0b68803858
--- /dev/null
+++ b/components/form/demo/validate-scroll-to-field.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+校验失败时/手动滚动到错误字段。
+
+## en-US
+
+When validation fails or manually scroll to the error field.
diff --git a/components/form/demo/validate-scroll-to-field.tsx b/components/form/demo/validate-scroll-to-field.tsx
new file mode 100644
index 0000000000..53209679df
--- /dev/null
+++ b/components/form/demo/validate-scroll-to-field.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Button, Flex, Form, Input, Select } from 'antd';
+
+const App = () => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      scrollToFirstError
+      style={{ paddingBlock: 32 }}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 14 }}
+    >
+      <Form.Item wrapperCol={{ offset: 6 }}>
+        <Button onClick={() => form.scrollToField('bio')}>Scroll to Bio</Button>
+      </Form.Item>
+
+      <Form.Item name="username" label="UserName" rules={[{ required: true }]}>
+        <Input />
+      </Form.Item>
+
+      <Form.Item label="Occupation" name="occupation">
+        <Select
+          options={[
+            { label: 'Designer', value: 'designer' },
+            { label: 'Developer', value: 'developer' },
+            { label: 'Product Manager', value: 'product-manager' },
+          ]}
+        />
+      </Form.Item>
+
+      <Form.Item name="motto" label="Motto">
+        <Input.TextArea rows={4} />
+      </Form.Item>
+
+      <Form.Item name="bio" label="Bio" rules={[{ required: true }]}>
+        <Input.TextArea rows={6} />
+      </Form.Item>
+
+      <Form.Item wrapperCol={{ offset: 6 }}>
+        <Flex gap="small">
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+          <Button danger onClick={() => form.resetFields()}>
+            Reset
+          </Button>
+        </Flex>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default App;
diff --git a/components/form/hooks/useForm.ts b/components/form/hooks/useForm.ts
index 5905cbb981..36bbaaa2de 100644
--- a/components/form/hooks/useForm.ts
+++ b/components/form/hooks/useForm.ts
@@ -23,6 +23,23 @@ function toNamePathStr(name: NamePath) {
   return namePath.join('_');
 }
 
+function getFieldDOMNode(name: NamePath, wrapForm: FormInstance) {
+  const field = wrapForm.getFieldInstance(name);
+
+  if (field instanceof HTMLElement) {
+    return field;
+  }
+
+  if (field?.nativeElement instanceof HTMLElement) {
+    return field.nativeElement;
+  }
+
+  const fieldId = getFieldId(toArray(name), wrapForm.__INTERNAL__.name);
+  if (fieldId) {
+    return document.getElementById(fieldId);
+  }
+}
+
 export default function useForm<Values = any>(form?: FormInstance<Values>): [FormInstance<Values>] {
   const [rcForm] = useRcForm();
   const itemsRef = React.useRef<Record<string, React.ReactElement>>({});
@@ -42,9 +59,7 @@ export default function useForm<Values = any>(form?: FormInstance<Values>): [For
           },
         },
         scrollToField: (name: NamePath, options: ScrollOptions = {}) => {
-          const namePath = toArray(name);
-          const fieldId = getFieldId(namePath, wrapForm.__INTERNAL__.name);
-          const node: HTMLElement | null = fieldId ? document.getElementById(fieldId) : null;
+          const node = getFieldDOMNode(name, wrapForm);
 
           if (node) {
             scrollIntoView(node, {
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index f8913707d7..e08ff2b44f 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -47,6 +47,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 <code src="./demo/validate-static.tsx">Customized Validation</code>
 <code src="./demo/dynamic-rule.tsx">Dynamic Rules</code>
 <code src="./demo/form-dependencies.tsx">Dependencies</code>
+<code src="./demo/validate-scroll-to-field.tsx" iframe="360">Slide to error field</code>
 <code src="./demo/validate-other.tsx">Other Form Controls</code>
 <code src="./demo/disabled-input-debug.tsx" debug>Disabled Input Debug</code>
 <code src="./demo/label-debug.tsx" debug>label ellipsis</code>
@@ -539,7 +540,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | pattern | Regex pattern | RegExp |  |
 | required | Required field | boolean |  |
 | transform | Transform value to the rule before validation | (value) => any |  |
-| type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/yiminghe/async-validator#type) | string |  |
+| type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/react-component/async-validator#type) | string |  |
 | validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] |  |
 | validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#rule), value) => Promise |  |
 | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
@@ -666,6 +667,8 @@ React can not get correct interaction of controlled component with async value u
 
 See similar issues: [#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994)
 
+Starting from version `5.17.0`, the sliding operation will prioritize using the ref element forwarded by the form control elements. Therefore, when considering custom components to support verification scrolling, please consider forwarding it to the form control elements first.
+
 `scrollToFirstError` and `scrollToField` deps on `id` attribute passed to form control, please make sure that it hasn't been ignored in your custom form control. Check [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js) for solution.
 
 2. multiple forms on same page
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 2c1dd029cb..f50aaad683 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -48,6 +48,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 <code src="./demo/validate-static.tsx">自定义校验</code>
 <code src="./demo/dynamic-rule.tsx">动态校验规则</code>
 <code src="./demo/form-dependencies.tsx">校验与更新依赖</code>
+<code src="./demo/validate-scroll-to-field.tsx" iframe="360">滑动到错误字段</code>
 <code src="./demo/validate-other.tsx">校验其他组件</code>
 <code src="./demo/disabled-input-debug.tsx" debug>Disabled Input Debug</code>
 <code src="./demo/label-debug.tsx" debug>测试 label 省略</code>
@@ -538,7 +539,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | pattern | 正则表达式匹配 | RegExp |  |
 | required | 是否为必选字段 | boolean |  |
 | transform | 将字段值转换成目标值后进行校验 | (value) => any |  |
-| type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/yiminghe/async-validator#type) | string |  |
+| type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/react-component/async-validator#type) | string |  |
 | validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] |  |
 | validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#rule), value) => Promise |  |
 | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
@@ -665,6 +666,8 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互
 
 类似问题：[#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994)
 
+从 `5.17.0` 版本开始，滑动操作将优先使用表单控件元素所转发的 ref 元素。因此，在考虑自定义组件支持校验滚动时，请优先考虑将其转发给表单控件元素。
+
 滚动依赖于表单控件元素上绑定的 `id` 字段，如果自定义控件没有将 `id` 赋到正确的元素上，这个功能将失效。你可以参考这个 [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js)。
 
 2. 页面内有多个表单
diff --git a/components/form/style/index.ts b/components/form/style/index.ts
index 25868bc0c0..5f6950cf78 100644
--- a/components/form/style/index.ts
+++ b/components/form/style/index.ts
@@ -45,6 +45,11 @@ export interface ComponentToken {
    * @descEN Form item margin bottom
    */
   itemMarginBottom: number;
+  /**
+   * @desc 行内布局表单项间距
+   * @descEN Inline layout form item margin bottom
+   */
+  inlineItemMarginBottom: number;
   /**
    * @desc 垂直布局标签内边距
    * @descEN Vertical layout label padding
@@ -410,7 +415,7 @@ const genHorizontalStyle: GenerateStyle<FormToken> = (token) => {
 };
 
 const genInlineStyle: GenerateStyle<FormToken> = (token) => {
-  const { componentCls, formItemCls } = token;
+  const { componentCls, formItemCls, inlineItemMarginBottom } = token;
 
   return {
     [`${componentCls}-inline`]: {
@@ -420,7 +425,7 @@ const genInlineStyle: GenerateStyle<FormToken> = (token) => {
       [formItemCls]: {
         flex: 'none',
         marginInlineEnd: token.margin,
-        marginBottom: 0,
+        marginBottom: inlineItemMarginBottom,
 
         '&-row': {
           flexWrap: 'nowrap',
@@ -552,6 +557,7 @@ export const prepareComponentToken: GetDefaultToken<'Form'> = (token) => ({
   itemMarginBottom: token.marginLG,
   verticalLabelPadding: `0 0 ${token.paddingXS}px`,
   verticalLabelMargin: 0,
+  inlineItemMarginBottom: 0,
 });
 
 export const prepareToken: (
diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
index 7656509f7a..5992a453d5 100644
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@@ -97,4 +97,4 @@ InputNumber 的值由内部逻辑封装而成，通过 `onBlur` 等事件获取
 
 > 不建议使用 `type` 属性
 
-InputNumber 组件允许你使用 input 元素的所有属性最终透传至 input 元素，当你传入 `type="number"` 时 input 元素也会添加这个属性，这会使 input 元素触发原生特性（允许鼠标滚轮改变数值），从而导致  `changeOnWheel` 无法控制鼠标滚轮是否改变数值。
+InputNumber 组件允许你使用 input 元素的所有属性最终透传至 input 元素，当你传入 `type="number"` 时 input 元素也会添加这个属性，这会使 input 元素触发原生特性（允许鼠标滚轮改变数值），从而导致 `changeOnWheel` 无法控制鼠标滚轮是否改变数值。
diff --git a/components/input/OTP/OTPInput.tsx b/components/input/OTP/OTPInput.tsx
index a89d730dee..a910841f08 100644
--- a/components/input/OTP/OTPInput.tsx
+++ b/components/input/OTP/OTPInput.tsx
@@ -9,10 +9,14 @@ export interface OTPInputProps extends Omit<InputProps, 'onChange'> {
   onChange: (index: number, value: string) => void;
   /** Tell parent to do active offset */
   onActiveChange: (nextIndex: number) => void;
+
+  mask?: boolean | string;
 }
 
 const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
-  const { value, onChange, onActiveChange, index, ...restProps } = props;
+  const { value, onChange, onActiveChange, index, mask, ...restProps } = props;
+
+  const internalValue = value && typeof mask === 'string' ? mask : value;
 
   const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     onChange(index, e.target.value);
@@ -56,13 +60,14 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
     <Input
       {...restProps}
       ref={inputRef}
-      value={value}
+      value={internalValue}
       onInput={onInternalChange}
       onFocus={syncSelection}
       onKeyDown={onInternalKeyDown}
       onKeyUp={onInternalKeyUp}
       onMouseDown={syncSelection}
       onMouseUp={syncSelection}
+      type={mask === true ? 'password' : 'text'}
     />
   );
 });
diff --git a/components/input/OTP/index.tsx b/components/input/OTP/index.tsx
index 19f0bdb584..be9e1edde1 100644
--- a/components/input/OTP/index.tsx
+++ b/components/input/OTP/index.tsx
@@ -5,11 +5,13 @@ import pickAttrs from 'rc-util/lib/pickAttrs';
 
 import { getMergedStatus } from '../../_util/statusUtils';
 import type { InputStatus } from '../../_util/statusUtils';
+import { devUseWarning } from '../../_util/warning';
 import { ConfigContext } from '../../config-provider';
 import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
 import useSize from '../../config-provider/hooks/useSize';
 import type { SizeType } from '../../config-provider/SizeContext';
 import { FormItemInputContext } from '../../form/context';
+import type { FormItemStatusContextProps } from '../../form/context';
 import type { Variant } from '../../form/hooks/useVariants';
 import type { InputRef } from '../Input';
 import useStyle from '../style/otp';
@@ -42,6 +44,8 @@ export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
   // Status
   disabled?: boolean;
   status?: InputStatus;
+
+  mask?: boolean | string;
 }
 
 function strToArr(str: string) {
@@ -61,9 +65,19 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
     disabled,
     status: customStatus,
     autoFocus,
+    mask,
     ...restProps
   } = props;
 
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Input.OTP');
+    warning(
+      !(typeof mask === 'string' && mask.length > 1),
+      'usage',
+      '`mask` prop should be a single character.',
+    );
+  }
+
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('otp', customizePrefixCls);
 
@@ -85,7 +99,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
   const formContext = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(formContext.status, customStatus);
 
-  const proxyFormContext = React.useMemo(
+  const proxyFormContext = React.useMemo<FormItemStatusContextProps>(
     () => ({
       ...formContext,
       status: mergedStatus,
@@ -194,10 +208,11 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
   };
 
   // ======================== Render ========================
-  const inputSharedProps = {
+  const inputSharedProps: Partial<OTPInputProps> = {
     variant,
     disabled,
     status: mergedStatus as InputStatus,
+    mask,
   };
 
   return wrapCSSVar(
@@ -216,10 +231,9 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
       )}
     >
       <FormItemInputContext.Provider value={proxyFormContext}>
-        {new Array(length).fill(0).map((_, index) => {
+        {Array.from({ length }).map((_, index) => {
           const key = `otp-${index}`;
           const singleValue = valueCells[index] || '';
-
           return (
             <OTPInput
               ref={(inputEle) => {
diff --git a/components/input/Password.tsx b/components/input/Password.tsx
index 4ac551b29e..787a8ca46a 100644
--- a/components/input/Password.tsx
+++ b/components/input/Password.tsx
@@ -35,7 +35,13 @@ const actionMap: Record<PropertyKey, keyof React.DOMAttributes<HTMLSpanElement>>
 type IconPropsType = React.HTMLAttributes<HTMLSpanElement> & React.Attributes;
 
 const Password = React.forwardRef<InputRef, PasswordProps>((props, ref) => {
-  const { visibilityToggle = true } = props;
+  const {
+    disabled,
+    action = 'click',
+    visibilityToggle = true,
+    iconRender = defaultIconRender,
+  } = props;
+
   const visibilityControlled =
     typeof visibilityToggle === 'object' && visibilityToggle.visible !== undefined;
   const [visible, setVisible] = useState(() =>
@@ -53,7 +59,6 @@ const Password = React.forwardRef<InputRef, PasswordProps>((props, ref) => {
   const removePasswordTimeout = useRemovePasswordTimeout(inputRef);
 
   const onVisibleChange = () => {
-    const { disabled } = props;
     if (disabled) {
       return;
     }
@@ -70,7 +75,6 @@ const Password = React.forwardRef<InputRef, PasswordProps>((props, ref) => {
   };
 
   const getIcon = (prefixCls: string) => {
-    const { action = 'click', iconRender = defaultIconRender } = props;
     const iconTrigger = actionMap[action] || '';
     const icon = iconRender(visible);
     const iconProps: IconPropsType = {
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index e0e725077e..8ce331e0d5 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10116,242 +10116,259 @@ exports[`renders components/input/demo/group.tsx extend context correctly 2`] =
 
 exports[`renders components/input/demo/otp.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
 >
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <h5
-      class="ant-typography"
-    >
-      With formatter (Upcase)
-    </h5>
+    With formatter (Upcase)
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
+    With Disabled
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <h5
-      class="ant-typography"
-    >
-      With Disabled
-    </h5>
+    With Length (8)
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
+    With variant
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <h5
-      class="ant-typography"
-    >
-      With Length (8)
-    </h5>
-  </div>
+    With custom display character
+  </h5>
   <div
-    class="ant-space-item"
+    class="ant-otp"
   >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <h5
-      class="ant-typography"
-    >
-      With variant
-    </h5>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
 </div>
 `;
 
-exports[`renders components/input/demo/otp.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/input/demo/otp.tsx extend context correctly 2`] = `
+[
+  "Warning: [antd: Input.OTP] \`mask\` prop should be a single character.",
+]
+`;
 
 exports[`renders components/input/demo/password-input.tsx extend context correctly 1`] = `
 <div
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index 1e91e8c307..bb2c97cf69 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -3513,237 +3513,250 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
 
 exports[`renders components/input/demo/otp.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
 >
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <h5
-      class="ant-typography"
-    >
-      With formatter (Upcase)
-    </h5>
+    With formatter (Upcase)
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
+    With Disabled
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
+      disabled=""
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <h5
-      class="ant-typography"
-    >
-      With Disabled
-    </h5>
+    With Length (8)
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-disabled ant-input-outlined ant-otp-input"
-        disabled=""
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
+    With variant
+  </h5>
+  <div
+    class="ant-otp"
+  >
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-filled ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
-  <div
-    class="ant-space-item"
+  <h5
+    class="ant-typography"
   >
-    <h5
-      class="ant-typography"
-    >
-      With Length (8)
-    </h5>
-  </div>
+    With custom display character
+  </h5>
   <div
-    class="ant-space-item"
+    class="ant-otp"
   >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-outlined ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <h5
-      class="ant-typography"
-    >
-      With variant
-    </h5>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <div
-      class="ant-otp"
-    >
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-      <input
-        class="ant-input ant-input-filled ant-otp-input"
-        size="1"
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
+    <input
+      class="ant-input ant-input-outlined ant-otp-input"
+      size="1"
+      type="text"
+      value=""
+    />
   </div>
 </div>
 `;
diff --git a/components/input/__tests__/otp.test.tsx b/components/input/__tests__/otp.test.tsx
index edcaccfe7a..8d5dee4719 100644
--- a/components/input/__tests__/otp.test.tsx
+++ b/components/input/__tests__/otp.test.tsx
@@ -13,13 +13,13 @@ describe('Input.OTP', () => {
   mountTest(Input.OTP);
   rtlTest(Input.OTP);
 
-  function getText(container: HTMLElement) {
-    const inputList = container.querySelectorAll('input');
+  const getText = (container: HTMLElement) => {
+    const inputList = container.querySelectorAll<HTMLInputElement>('input');
     return Array.from(inputList)
       .map((input) => input.value || ' ')
       .join('')
       .replace(/\s*$/, '');
-  }
+  };
 
   beforeEach(() => {
     jest.useFakeTimers();
@@ -137,4 +137,34 @@ describe('Input.OTP', () => {
     fireEvent.input(container.querySelector('input')!, { target: { value: 'little' } });
     expect(getText(container)).toBe('LITTLE');
   });
+
+  it('support mask prop', () => {
+    // default
+    const { container, rerender } = render(<OTP defaultValue="bamboo" />);
+    expect(getText(container)).toBe('bamboo');
+
+    // support string
+    rerender(<OTP defaultValue="bamboo" mask="*" />);
+    expect(getText(container)).toBe('******');
+
+    // support emoji
+    rerender(<OTP defaultValue="bamboo" mask="🔒" />);
+    expect(getText(container)).toBe('🔒🔒🔒🔒🔒🔒');
+  });
+
+  it('should throw Error when mask.length > 1', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<OTP mask="abc" />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Input.OTP] `mask` prop should be a single character.',
+    );
+    errSpy.mockRestore();
+  });
+
+  it('should not throw Error when mask.length <= 1', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<OTP mask="x" />);
+    expect(errSpy).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/input/demo/otp.tsx b/components/input/demo/otp.tsx
index 9b82e3d24d..9e70d36b12 100644
--- a/components/input/demo/otp.tsx
+++ b/components/input/demo/otp.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { Flex, Input, Typography } from 'antd';
 import type { GetProp } from 'antd';
-import { Input, Space, Typography } from 'antd';
+import type { OTPProps } from 'antd/es/input/OTP';
 
 const { Title } = Typography;
 
@@ -9,12 +10,12 @@ const App: React.FC = () => {
     console.log('onChange:', text);
   };
 
-  const sharedProps = {
+  const sharedProps: OTPProps = {
     onChange,
   };
 
   return (
-    <Space direction="vertical">
+    <Flex gap="middle" align="flex-start" vertical>
       <Title level={5}>With formatter (Upcase)</Title>
       <Input.OTP formatter={(str) => str.toUpperCase()} {...sharedProps} />
       <Title level={5}>With Disabled</Title>
@@ -23,7 +24,9 @@ const App: React.FC = () => {
       <Input.OTP length={8} {...sharedProps} />
       <Title level={5}>With variant</Title>
       <Input.OTP variant="filled" {...sharedProps} />
-    </Space>
+      <Title level={5}>With custom display character</Title>
+      <Input.OTP mask="🔒" {...sharedProps} />
+    </Flex>
   );
 };
 
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index 4c9931ecd1..d24fcfc4a5 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -124,11 +124,16 @@ Supports all props of `Input`.
 
 Added in `5.16.0`.
 
+> Notes for developers
+>
+> When the `mask` prop is string, we recommend receiving a single character or a single emoji. If multiple characters or multiple emoji are passed, a warning will be thrown.
+
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | defaultValue | Default value | string | - |  |
 | disabled | Whether the input is disabled | boolean | false |  |
 | formatter | Format display, blank fields will be filled with ` ` | (value: string) => string | - |  |
+| mask | Custom display, the original value will not be modified | boolean \| string | `false` | `5.17.0` |
 | length | The number of input elements | number | 6 |  |
 | status | Set validation status | 'error' \| 'warning' | - |  |
 | size | The size of the input box | `small` \| `middle` \| `large` | `middle` |  |
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index 3fd03b2641..7ccd116396 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -125,11 +125,16 @@ interface CountConfig {
 
 `5.16.0` 新增。
 
+> 开发者注意事项：
+>
+> 当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | defaultValue | 默认值 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | formatter | 格式化展示，留空字段会被 ` ` 填充 | (value: string) => string | - |  |
+| mask | 自定义展示，和 `formatter` 的区别是不会修改原始值 | boolean \| string | `false` | `5.17.0` |
 | length | 输入元素数量 | number | 6 |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - |  |
 | size | 输入框大小 | `small` \| `middle` \| `large` | `middle` |  |
diff --git a/components/layout/demo/basic.tsx b/components/layout/demo/basic.tsx
index ad38c34e10..9f8cb3d846 100644
--- a/components/layout/demo/basic.tsx
+++ b/components/layout/demo/basic.tsx
@@ -41,7 +41,7 @@ const layoutStyle = {
 };
 
 const App: React.FC = () => (
-  <Flex gap="middle" wrap="wrap">
+  <Flex gap="middle" wrap>
     <Layout style={layoutStyle}>
       <Header style={headerStyle}>Header</Header>
       <Content style={contentStyle}>Content</Content>
diff --git a/components/progress/demo/circle-mini.tsx b/components/progress/demo/circle-mini.tsx
index 8e884cf97f..116e25c8ae 100644
--- a/components/progress/demo/circle-mini.tsx
+++ b/components/progress/demo/circle-mini.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Progress type="circle" percent={30} size={80} />
     <Progress type="circle" percent={70} size={80} status="exception" />
     <Progress type="circle" percent={100} size={80} />
diff --git a/components/progress/demo/circle-steps.tsx b/components/progress/demo/circle-steps.tsx
index d4fd2d25f5..6d9276447b 100644
--- a/components/progress/demo/circle-steps.tsx
+++ b/components/progress/demo/circle-steps.tsx
@@ -10,7 +10,7 @@ const App: React.FC = () => {
       <Slider min={2} max={10} value={stepsCount} onChange={setStepsCount} />
       <Typography.Title level={5}>Custom gap:</Typography.Title>
       <Slider step={4} min={0} max={40} value={stepsGap} onChange={setStepsGap} />
-      <Flex wrap="wrap" gap="middle" style={{ marginTop: 16 }}>
+      <Flex wrap gap="middle" style={{ marginTop: 16 }}>
         <Progress
           type="dashboard"
           steps={8}
diff --git a/components/progress/demo/circle.tsx b/components/progress/demo/circle.tsx
index ccb23bb610..2f557f6e8c 100644
--- a/components/progress/demo/circle.tsx
+++ b/components/progress/demo/circle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Progress type="circle" percent={75} />
     <Progress type="circle" percent={70} status="exception" />
     <Progress type="circle" percent={100} />
diff --git a/components/progress/demo/dashboard.tsx b/components/progress/demo/dashboard.tsx
index d0b3554f1a..2b1d666bc5 100644
--- a/components/progress/demo/dashboard.tsx
+++ b/components/progress/demo/dashboard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Progress type="dashboard" percent={75} />
     <Progress type="dashboard" percent={75} gapDegree={30} />
   </Flex>
diff --git a/components/progress/demo/format.tsx b/components/progress/demo/format.tsx
index cc8bb9d06b..54f79dd31b 100644
--- a/components/progress/demo/format.tsx
+++ b/components/progress/demo/format.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Progress type="circle" percent={75} format={(percent) => `${percent} Days`} />
     <Progress type="circle" percent={100} format={() => 'Done'} />
   </Flex>
diff --git a/components/progress/demo/gradient-line.tsx b/components/progress/demo/gradient-line.tsx
index 6af08b7159..56f97865da 100644
--- a/components/progress/demo/gradient-line.tsx
+++ b/components/progress/demo/gradient-line.tsx
@@ -17,12 +17,12 @@ const App: React.FC = () => (
   <Flex vertical gap="middle">
     <Progress percent={99.9} strokeColor={twoColors} />
     <Progress percent={50} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="small" wrap>
       <Progress type="circle" percent={90} strokeColor={twoColors} />
       <Progress type="circle" percent={100} strokeColor={twoColors} />
       <Progress type="circle" percent={93} strokeColor={conicColors} />
     </Flex>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="small" wrap>
       <Progress type="dashboard" percent={90} strokeColor={twoColors} />
       <Progress type="dashboard" percent={100} strokeColor={twoColors} />
       <Progress type="dashboard" percent={93} strokeColor={conicColors} />
diff --git a/components/progress/demo/linecap.tsx b/components/progress/demo/linecap.tsx
index 6528588db5..9377220fb2 100644
--- a/components/progress/demo/linecap.tsx
+++ b/components/progress/demo/linecap.tsx
@@ -4,7 +4,7 @@ import { Flex, Progress } from 'antd';
 const App: React.FC = () => (
   <Flex vertical gap="small">
     <Progress strokeLinecap="butt" percent={75} />
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Progress strokeLinecap="butt" type="circle" percent={75} />
       <Progress strokeLinecap="butt" type="dashboard" percent={75} />
     </Flex>
diff --git a/components/progress/demo/segment.tsx b/components/progress/demo/segment.tsx
index 80e27c2500..e4dfeca9dc 100644
--- a/components/progress/demo/segment.tsx
+++ b/components/progress/demo/segment.tsx
@@ -6,7 +6,7 @@ const App: React.FC = () => (
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} success={{ percent: 30 }} />
     </Tooltip>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="small" wrap>
       <Tooltip title="3 done / 3 in progress / 4 to do">
         <Progress percent={60} success={{ percent: 30 }} type="circle" />
       </Tooltip>
diff --git a/components/progress/demo/size.tsx b/components/progress/demo/size.tsx
index 8e4aef3719..dcca8185aa 100644
--- a/components/progress/demo/size.tsx
+++ b/components/progress/demo/size.tsx
@@ -8,17 +8,17 @@ const App: React.FC = () => (
       <Progress percent={50} size="small" />
       <Progress percent={50} size={[300, 20]} />
     </Flex>
-    <Flex align="center" wrap="wrap" gap={30}>
+    <Flex align="center" wrap gap={30}>
       <Progress type="circle" percent={50} />
       <Progress type="circle" percent={50} size="small" />
       <Progress type="circle" percent={50} size={20} />
     </Flex>
-    <Flex align="center" wrap="wrap" gap={30}>
+    <Flex align="center" wrap gap={30}>
       <Progress type="dashboard" percent={50} />
       <Progress type="dashboard" percent={50} size="small" />
       <Progress type="dashboard" percent={50} size={20} />
     </Flex>
-    <Flex align="center" wrap="wrap" gap={30}>
+    <Flex align="center" wrap gap={30}>
       <Progress steps={3} percent={50} />
       <Progress steps={3} percent={50} size="small" />
       <Progress steps={3} percent={50} size={20} />
diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
index a2e8b1ee45..dc503151f3 100644
--- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -31,7 +31,7 @@ Array [
         >
           <div
             class="ant-qrcode ant-qrcode-borderless"
-            style="width: 160px; height: 160px; background-color: transparent;"
+            style="background-color: transparent; width: 160px; height: 160px;"
           >
             <canvas
               height="160"
@@ -56,7 +56,7 @@ exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] =
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -89,7 +89,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -102,7 +102,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
+      style="background-color: rgb(245, 245, 245); width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -189,7 +189,7 @@ Array [
   </div>,
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <canvas
       height="160"
@@ -211,7 +211,7 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
 >
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: rgb(255, 255, 255); margin-bottom: 16px;"
+    style="background-color: rgb(255, 255, 255); margin-bottom: 16px; width: 160px; height: 160px;"
   >
     <canvas
       height="160"
@@ -235,7 +235,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly
 Array [
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent; margin-bottom: 16px;"
+    style="background-color: transparent; margin-bottom: 16px; width: 160px; height: 160px;"
   >
     <canvas
       height="160"
@@ -315,7 +315,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly
 exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] = `
 <div
   class="ant-qrcode"
-  style="width: 160px; height: 160px; background-color: transparent;"
+  style="background-color: transparent; width: 160px; height: 160px;"
 >
   <canvas
     height="160"
@@ -336,7 +336,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
 >
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <div
       class="ant-qrcode-mask"
@@ -371,7 +371,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <div
       class="ant-qrcode-mask"
@@ -420,7 +420,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <div
       class="ant-qrcode-mask"
@@ -450,7 +450,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -463,7 +463,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <svg
         height="160"
diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
index 31d0bc909e..b2cac4ce0a 100644
--- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
@@ -20,7 +20,7 @@ exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -51,7 +51,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -64,7 +64,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:#f5f5f5"
+      style="background-color:#f5f5f5;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -149,7 +149,7 @@ Array [
   </div>,
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <canvas
       height="160"
@@ -169,7 +169,7 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
 >
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:#fff;margin-bottom:16px"
+    style="background-color:#fff;margin-bottom:16px;width:160px;height:160px"
   >
     <canvas
       height="160"
@@ -191,7 +191,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx correctly 1`] = `
 Array [
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent;margin-bottom:16px"
+    style="background-color:transparent;margin-bottom:16px;width:160px;height:160px"
   >
     <canvas
       height="160"
@@ -269,7 +269,7 @@ Array [
 exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
 <div
   class="ant-qrcode"
-  style="width:160px;height:160px;background-color:transparent"
+  style="background-color:transparent;width:160px;height:160px"
 >
   <canvas
     height="160"
@@ -288,7 +288,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
 >
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <div
       class="ant-qrcode-mask"
@@ -323,7 +323,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
   </div>
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <div
       class="ant-qrcode-mask"
@@ -372,7 +372,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
   </div>
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <div
       class="ant-qrcode-mask"
@@ -400,7 +400,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -413,7 +413,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <svg
         height="160"
diff --git a/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap b/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
index 2e3bc986de..395f0a8557 100644
--- a/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`QRCode test should correct render 1`] = `
 <div>
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <canvas
       height="160"
diff --git a/components/qr-code/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx
index 9420a60988..bb00ea746f 100644
--- a/components/qr-code/__tests__/index.test.tsx
+++ b/components/qr-code/__tests__/index.test.tsx
@@ -7,16 +7,12 @@ import { fireEvent, render } from '../../../tests/utils';
 import type { QRCodeProps } from '../interface';
 
 describe('QRCode test', () => {
-  mountTest(QRCode as any);
-  rtlTest(QRCode as any);
+  mountTest(() => <QRCode value="" />);
+  rtlTest(() => <QRCode value="" />);
 
   it('should correct render', () => {
     const { container } = render(<QRCode value="test" />);
-    expect(
-      container
-        ?.querySelector<HTMLDivElement>('.ant-qrcode')
-        ?.querySelector<HTMLCanvasElement>('canvas'),
-    ).toBeTruthy();
+    expect(container?.querySelector<HTMLCanvasElement>('.ant-qrcode canvas')).toBeTruthy();
     expect(container).toMatchSnapshot();
   });
 
@@ -31,25 +27,21 @@ describe('QRCode test', () => {
 
   it('support custom icon', () => {
     const { container } = render(<QRCode value="test" icon="test" />);
-    expect(
-      container
-        ?.querySelector<HTMLDivElement>('.ant-qrcode')
-        ?.querySelector<HTMLImageElement>('img'),
-    ).toBeTruthy();
+    expect(container?.querySelector<HTMLImageElement>('.ant-qrcode img')).toBeTruthy();
   });
 
   it('support custom size', () => {
     const { container } = render(<QRCode value="test" size={100} />);
-    expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px');
+    const canvas = container.querySelector<HTMLCanvasElement>('.ant-qrcode > canvas')!;
+    expect(canvas.width).toBe(100);
+    expect(canvas.height).toBe(100);
   });
 
   it('support refresh', () => {
     const refresh = jest.fn();
     const { container } = render(<QRCode value="test" status="expired" onRefresh={refresh} />);
     fireEvent.click(
-      container
-        ?.querySelector<HTMLDivElement>('.ant-qrcode')
-        ?.querySelector<HTMLButtonElement>('button.ant-btn-link')!,
+      container?.querySelector<HTMLButtonElement>('.ant-qrcode button.ant-btn-link')!,
     );
     expect(refresh).toHaveBeenCalled();
   });
@@ -88,10 +80,15 @@ describe('QRCode test', () => {
     errSpy.mockRestore();
   });
 
-  it('correct style order', () => {
-    const { container } = render(<QRCode value="test" size={80} style={{ width: 100 }} />);
-    expect(container.querySelector<HTMLDivElement>('.ant-qrcode')).toHaveStyle(
-      'width: 100px; height: 80px',
+  it('correct style for wrapper & canvas', () => {
+    const { container } = render(
+      <QRCode value="test" size={60} style={{ width: '100%', height: '80%' }} />,
+    );
+    expect(container.querySelector<HTMLElement>('.ant-qrcode')).toHaveStyle(
+      'width: 100%; height: 80%;',
+    );
+    expect(container.querySelector<HTMLElement>('.ant-qrcode canvas')).toHaveStyle(
+      'width: 100%; height: 80%;',
     );
   });
 });
diff --git a/components/qr-code/demo/status.tsx b/components/qr-code/demo/status.tsx
index 55f9aa33e8..fa03165866 100644
--- a/components/qr-code/demo/status.tsx
+++ b/components/qr-code/demo/status.tsx
@@ -4,7 +4,7 @@ import { Flex, QRCode } from 'antd';
 const value = 'https://ant.design';
 
 const App: React.FC = () => (
-  <Flex gap="middle" wrap="wrap">
+  <Flex gap="middle" wrap>
     <QRCode value={value} status="loading" />
     <QRCode value={value} status="expired" onRefresh={() => console.log('refresh')} />
     <QRCode value={value} status="scanned" />
diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx
index 3dafc0157a..ad48315887 100644
--- a/components/qr-code/index.tsx
+++ b/components/qr-code/index.tsx
@@ -52,7 +52,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     level: errorLevel,
     bgColor,
     fgColor: color,
-    style: { width: undefined, height: undefined },
+    style: { width: style?.width, height: style?.height },
     imageSettings: icon ? imageSettings : undefined,
   };
 
@@ -79,10 +79,10 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
   });
 
   const mergedStyle: React.CSSProperties = {
-    width: size,
-    height: size,
     backgroundColor: bgColor,
     ...style,
+    width: style?.width ?? size,
+    height: style?.height ?? size,
   };
 
   return wrapCSSVar(
diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts
index 6fa15c93b1..2ad72f41ce 100644
--- a/components/qr-code/style/index.ts
+++ b/components/qr-code/style/index.ts
@@ -60,6 +60,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
     },
     [`${componentCls}-borderless`]: {
       borderColor: 'transparent',
+      padding: 0,
+      borderRadius: 0,
     },
   };
 };
diff --git a/components/table/demo/drag-column-sorting.tsx b/components/table/demo/drag-column-sorting.tsx
index cab43005f0..610d9a8557 100644
--- a/components/table/demo/drag-column-sorting.tsx
+++ b/components/table/demo/drag-column-sorting.tsx
@@ -34,17 +34,19 @@ interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
 interface BodyCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
   id: string;
 }
-type DragIndexState = {
+
+interface DragIndexState {
   active: UniqueIdentifier;
   over: UniqueIdentifier | undefined;
   direction?: 'left' | 'right';
-};
+}
+
 const DragIndexContext = createContext<DragIndexState>({ active: -1, over: -1 });
 
 const dragActiveStyle = (dragState: DragIndexState, id: string) => {
   const { active, over, direction } = dragState;
   // drag active style
-  let style = {};
+  let style: React.CSSProperties = {};
   if (active && active === id) {
     style = { backgroundColor: 'gray', opacity: 0.5 };
   }
@@ -58,32 +60,20 @@ const dragActiveStyle = (dragState: DragIndexState, id: string) => {
   return style;
 };
 
-const TableBodyCell = (props: BodyCellProps) => {
+const TableBodyCell: React.FC<BodyCellProps> = (props) => {
   const dragState = useContext<DragIndexState>(DragIndexContext);
-  return (
-    <td
-      {...props}
-      style={{
-        ...props.style,
-        ...dragActiveStyle(dragState, props.id),
-      }}
-    />
-  );
+  return <td {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />;
 };
 
-const TableHeaderCell = (props: HeaderCellProps) => {
+const TableHeaderCell: React.FC<HeaderCellProps> = (props) => {
   const dragState = useContext(DragIndexContext);
-  const { attributes, listeners, setNodeRef, isDragging } = useSortable({
-    id: props.id,
-  });
-
+  const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });
   const style: React.CSSProperties = {
     ...props.style,
     cursor: 'move',
     ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
     ...dragActiveStyle(dragState, props.id),
   };
-
   return <th {...props} ref={setNodeRef} style={style} {...attributes} {...listeners} />;
 };
 
@@ -121,27 +111,13 @@ const dataSource: DataType[] = [
     address: 'Sidney No. 1 Lake Park',
   },
 ];
+
 const baseColumns: TableColumnsType<DataType> = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-  },
-  {
-    title: 'Gender',
-    dataIndex: 'gender',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-  },
-  {
-    title: 'Email',
-    dataIndex: 'email',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-  },
+  { title: 'Name', dataIndex: 'name' },
+  { title: 'Gender', dataIndex: 'gender' },
+  { title: 'Age', dataIndex: 'age' },
+  { title: 'Email', dataIndex: 'email' },
+  { title: 'Address', dataIndex: 'address' },
 ];
 
 const App: React.FC = () => {
@@ -151,12 +127,8 @@ const App: React.FC = () => {
     baseColumns.map((column, i) => ({
       ...column,
       key: `${i}`,
-      onHeaderCell: () => ({
-        id: `${i}`,
-      }),
-      onCell: () => ({
-        id: `${i}`,
-      }),
+      onHeaderCell: () => ({ id: `${i}` }),
+      onCell: () => ({ id: `${i}` }),
     })),
   );
 
@@ -171,10 +143,10 @@ const App: React.FC = () => {
 
   const onDragEnd = ({ active, over }: DragEndEvent) => {
     if (active.id !== over?.id) {
-      setColumns((prev) => {
-        const activeIndex = prev.findIndex((i) => i.key === active.id);
-        const overIndex = prev.findIndex((i) => i.key === over?.id);
-        return arrayMove(prev, activeIndex, overIndex);
+      setColumns((prevState) => {
+        const activeIndex = prevState.findIndex((i) => i.key === active?.id);
+        const overIndex = prevState.findIndex((i) => i.key === over?.id);
+        return arrayMove(prevState, activeIndex, overIndex);
       });
     }
     setDragIndex({ active: -1, over: -1 });
@@ -201,22 +173,17 @@ const App: React.FC = () => {
       <SortableContext items={columns.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
         <DragIndexContext.Provider value={dragIndex}>
           <Table
-            components={{
-              header: {
-                cell: TableHeaderCell,
-              },
-              body: {
-                cell: TableBodyCell,
-              },
-            }}
             rowKey="key"
             columns={columns}
             dataSource={dataSource}
+            components={{
+              header: { cell: TableHeaderCell },
+              body: { cell: TableBodyCell },
+            }}
           />
         </DragIndexContext.Provider>
       </SortableContext>
       <DragOverlay>
-        {/* TODO:  Since the tableheadercell custom component uses antd to render the cell style, it is currently not possible to copy the same component as tableheadercell. */}
         <th style={{ backgroundColor: 'gray', padding: 16 }}>
           {columns[columns.findIndex((i) => i.key === dragIndex.active)]?.title as React.ReactNode}
         </th>
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index 71240f8c2d..232a282fb8 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import type { TabsProps as RcTabsProps } from 'rc-tabs';
 import RcTabs from 'rc-tabs';
 import type { GetIndicatorSize } from 'rc-tabs/lib/hooks/useIndicator';
-import type { EditableConfig } from 'rc-tabs/lib/interface';
+import type { EditableConfig, MoreProps } from 'rc-tabs/lib/interface';
 
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
@@ -31,6 +31,8 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
   hideAdd?: boolean;
   centered?: boolean;
   addIcon?: React.ReactNode;
+  moreIcon?: React.ReactNode;
+  more?: MoreProps;
   removeIcon?: React.ReactNode;
   onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
   children?: React.ReactNode;
@@ -50,6 +52,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
     addIcon,
     removeIcon,
     moreIcon,
+    more,
     popupClassName,
     children,
     items,
@@ -111,7 +114,6 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
     <RcTabs
       direction={direction}
       getPopupContainer={getPopupContainer}
-      moreTransitionName={`${rootPrefixCls}-slide-up`}
       {...otherProps}
       items={mergedItems}
       className={classNames(
@@ -131,7 +133,11 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
       popupClassName={classNames(popupClassName, hashId, cssVarCls, rootCls)}
       style={mergedStyle}
       editable={editable}
-      moreIcon={moreIcon ?? tabs?.moreIcon ?? <EllipsisOutlined />}
+      more={{
+        icon: tabs?.more?.icon ?? tabs?.moreIcon ?? moreIcon ?? <EllipsisOutlined />,
+        transitionName: `${rootPrefixCls}-slide-up`,
+        ...more,
+      }}
       prefixCls={prefixCls}
       animated={mergedAnimated}
       indicator={mergedIndicator}
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index 93f15e3acc..261b71231f 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -56,7 +56,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
 | indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
 | items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 |
-| moreIcon | 自定义折叠 icon | ReactNode | `<EllipsisOutlined />` | 4.14.0 |
+| more | 自定义折叠 | [MoreProps](#more) | { icon: `<EllipsisOutlined />` , trigger: 'hover' } |  |
 | removeIcon | 自定义删除按钮，设置 `type="editable-card"` 时有效 | ReactNode | `<CloseOutlined />` | 5.15.0 |
 | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 |
 | renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
@@ -88,6 +88,13 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | children | 选项卡头显示内容 | ReactNode | - |  |
 | closable | 是否显示选项卡的关闭按钮，在 `type="editable-card"` 时有效 | boolean | true |  |
 
+### MoreProps
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | ---- | ---- |
+| icon | 自定义折叠图标 | ReactNode | -  |    |
+| [DropdownProps](/components/dropdown-cn#api) |      |      |    |     |
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tabs"></ComponentTokenTable>
diff --git a/components/tag/demo/borderless.tsx b/components/tag/demo/borderless.tsx
index da95014d87..4997f1c170 100644
--- a/components/tag/demo/borderless.tsx
+++ b/components/tag/demo/borderless.tsx
@@ -3,7 +3,7 @@ import { Divider, Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag bordered={false}>Tag 1</Tag>
       <Tag bordered={false}>Tag 2</Tag>
       <Tag bordered={false} closable>
@@ -14,7 +14,7 @@ const App: React.FC = () => (
       </Tag>
     </Flex>
     <Divider />
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag bordered={false} color="processing">
         processing
       </Tag>
diff --git a/components/tag/demo/borderlessLayout.tsx b/components/tag/demo/borderlessLayout.tsx
index a3c614732d..fc4fb70fb0 100644
--- a/components/tag/demo/borderlessLayout.tsx
+++ b/components/tag/demo/borderlessLayout.tsx
@@ -5,7 +5,7 @@ const App: React.FC = () => {
   const { token } = theme.useToken();
   return (
     <div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>
-      <Flex gap="4px 0" wrap="wrap">
+      <Flex gap="4px 0" wrap>
         <Tag bordered={false}>Tag 1</Tag>
         <Tag bordered={false}>Tag 2</Tag>
         <Tag bordered={false} closable>
@@ -16,7 +16,7 @@ const App: React.FC = () => {
         </Tag>
       </Flex>
       <Divider />
-      <Flex gap="4px 0" wrap="wrap">
+      <Flex gap="4px 0" wrap>
         <Tag bordered={false} color="magenta">
           magenta
         </Tag>
diff --git a/components/tag/demo/checkable.tsx b/components/tag/demo/checkable.tsx
index fcb473ccd5..fa1df11f93 100644
--- a/components/tag/demo/checkable.tsx
+++ b/components/tag/demo/checkable.tsx
@@ -14,7 +14,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <Flex gap={4} wrap="wrap" align="center">
+    <Flex gap={4} wrap align="center">
       <span>Categories:</span>
       {tagsData.map<React.ReactNode>((tag) => (
         <Tag.CheckableTag
diff --git a/components/tag/demo/colorful-inverse.tsx b/components/tag/demo/colorful-inverse.tsx
index f19b365a96..79311197be 100644
--- a/components/tag/demo/colorful-inverse.tsx
+++ b/components/tag/demo/colorful-inverse.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="4px 0" wrap="wrap">
+  <Flex gap="4px 0" wrap>
     <Tag color="magenta-inverse">magenta</Tag>
     <Tag color="red-inverse">red</Tag>
     <Tag color="volcano-inverse">volcano</Tag>
diff --git a/components/tag/demo/colorful.tsx b/components/tag/demo/colorful.tsx
index e0e4e4765f..eff1319ea5 100644
--- a/components/tag/demo/colorful.tsx
+++ b/components/tag/demo/colorful.tsx
@@ -4,7 +4,7 @@ import { Divider, Flex, Tag } from 'antd';
 const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag color="magenta">magenta</Tag>
       <Tag color="red">red</Tag>
       <Tag color="volcano">volcano</Tag>
@@ -18,7 +18,7 @@ const App: React.FC = () => (
       <Tag color="purple">purple</Tag>
     </Flex>
     <Divider orientation="left">Custom</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag color="#f50">#f50</Tag>
       <Tag color="#2db7f5">#2db7f5</Tag>
       <Tag color="#87d068">#87d068</Tag>
diff --git a/components/tag/demo/component-token.tsx b/components/tag/demo/component-token.tsx
index f47a7fa493..a85dd57807 100644
--- a/components/tag/demo/component-token.tsx
+++ b/components/tag/demo/component-token.tsx
@@ -6,7 +6,7 @@ const App: React.FC = () => (
   <ConfigProvider
     theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }}
   >
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag>
         <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
       </Tag>
diff --git a/components/tag/demo/control.tsx b/components/tag/demo/control.tsx
index bf25ca662b..2fb7992f68 100644
--- a/components/tag/demo/control.tsx
+++ b/components/tag/demo/control.tsx
@@ -71,7 +71,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       {tags.map<React.ReactNode>((tag, index) => {
         if (editInputIndex === index) {
           return (
diff --git a/components/tag/demo/customize.tsx b/components/tag/demo/customize.tsx
index 007608b36c..861153432b 100644
--- a/components/tag/demo/customize.tsx
+++ b/components/tag/demo/customize.tsx
@@ -3,7 +3,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="4px 0" wrap="wrap">
+  <Flex gap="4px 0" wrap>
     <Tag closable closeIcon="关 闭">
       Tag1
     </Tag>
diff --git a/components/tag/demo/draggable.tsx b/components/tag/demo/draggable.tsx
index ad4b7e792e..9fb889ae08 100644
--- a/components/tag/demo/draggable.tsx
+++ b/components/tag/demo/draggable.tsx
@@ -68,7 +68,7 @@ const App: React.FC = () => {
   return (
     <DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
       <SortableContext items={items} strategy={horizontalListSortingStrategy}>
-        <Flex gap="4px 0" wrap="wrap">
+        <Flex gap="4px 0" wrap>
           {items.map<React.ReactNode>((item) => (
             <DraggableTag tag={item} key={item.id} />
           ))}
diff --git a/components/tag/demo/icon.tsx b/components/tag/demo/icon.tsx
index 04fbbe9563..18f8a7f177 100644
--- a/components/tag/demo/icon.tsx
+++ b/components/tag/demo/icon.tsx
@@ -8,7 +8,7 @@ import {
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="4px 0" wrap="wrap">
+  <Flex gap="4px 0" wrap>
     <Tag icon={<TwitterOutlined />} color="#55acee">
       Twitter
     </Tag>
diff --git a/components/tag/demo/status.tsx b/components/tag/demo/status.tsx
index af768a92c5..ed401f4f91 100644
--- a/components/tag/demo/status.tsx
+++ b/components/tag/demo/status.tsx
@@ -12,7 +12,7 @@ import { Divider, Flex, Tag } from 'antd';
 const App: React.FC = () => (
   <>
     <Divider orientation="left">Without icon</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag color="success">success</Tag>
       <Tag color="processing">processing</Tag>
       <Tag color="error">error</Tag>
@@ -20,7 +20,7 @@ const App: React.FC = () => (
       <Tag color="default">default</Tag>
     </Flex>
     <Divider orientation="left">With icon</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag icon={<CheckCircleOutlined />} color="success">
         success
       </Tag>
diff --git a/components/theme/util/genComponentStyleHook.tsx b/components/theme/util/genComponentStyleHook.tsx
index 8dee7e34d6..831717db05 100644
--- a/components/theme/util/genComponentStyleHook.tsx
+++ b/components/theme/util/genComponentStyleHook.tsx
@@ -171,6 +171,9 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
       hashId,
       nonce: () => csp?.nonce!,
       clientOnly: options.clientOnly,
+      layer: {
+        name: 'antd',
+      },
 
       // antd is always at top of styles
       order: options.order || -999,
diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts
index 47ee6557e3..d34569df80 100644
--- a/components/theme/util/useResetIconStyle.ts
+++ b/components/theme/util/useResetIconStyle.ts
@@ -15,6 +15,9 @@ const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
       hashId: '',
       path: ['ant-design-icons', iconPrefixCls],
       nonce: () => csp?.nonce!,
+      layer: {
+        name: 'antd',
+      },
     },
     () => [
       {
diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
index f4faf82bf4..ed9fccb6b0 100644
--- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -423,7 +423,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                   </div>
                   <div
                     aria-grabbed="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                     draggable="false"
                   >
                     <span
@@ -451,6 +451,126 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                       </span>
                     </span>
                   </div>
+                  <div
+                    aria-grabbed="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
+                    draggable="false"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    >
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                      />
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                    />
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                      title="leaf3"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        leaf3
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
+                    draggable="false"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    >
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                      />
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                    />
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                      title="leaf4"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        leaf4
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
+                    draggable="false"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    >
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                      />
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                    />
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                      title="leaf5"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        leaf5
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                    draggable="false"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    >
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                      />
+                      <span
+                        class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                    />
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                      title="leaf6"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        leaf6
+                      </span>
+                    </span>
+                  </div>
                   <div
                     aria-grabbed="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
@@ -527,7 +647,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                         <b
                           style="color: rgb(0, 136, 204);"
                         >
-                          leaf3
+                          leaf11
                         </b>
                       </span>
                     </span>
diff --git a/components/tree-select/demo/basic.tsx b/components/tree-select/demo/basic.tsx
index 009d49f7fb..0cd1c35998 100644
--- a/components/tree-select/demo/basic.tsx
+++ b/components/tree-select/demo/basic.tsx
@@ -1,3 +1,4 @@
+import type { SyntheticEvent } from 'react';
 import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
 
@@ -18,6 +19,22 @@ const treeData = [
             value: 'leaf2',
             title: 'leaf2',
           },
+          {
+            value: 'leaf3',
+            title: 'leaf3',
+          },
+          {
+            value: 'leaf4',
+            title: 'leaf4',
+          },
+          {
+            value: 'leaf5',
+            title: 'leaf5',
+          },
+          {
+            value: 'leaf6',
+            title: 'leaf6',
+          },
         ],
       },
       {
@@ -25,8 +42,8 @@ const treeData = [
         title: 'parent 1-1',
         children: [
           {
-            value: 'leaf3',
-            title: <b style={{ color: '#08c' }}>leaf3</b>,
+            value: 'leaf11',
+            title: <b style={{ color: '#08c' }}>leaf11</b>,
           },
         ],
       },
@@ -40,6 +57,10 @@ const App: React.FC = () => {
     setValue(newValue);
   };
 
+  const onPopupScroll = (e: SyntheticEvent) => {
+    console.log('onPopupScroll', e);
+  };
+
   return (
     <TreeSelect
       showSearch
@@ -51,6 +72,7 @@ const App: React.FC = () => {
       treeDefaultExpandAll
       onChange={onChange}
       treeData={treeData}
+      onPopupScroll={onPopupScroll}
     />
   );
 };
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index a8d0804d54..e0d7bef5ba 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -86,6 +86,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onSearch | A callback function, can be executed when the search input changes | function(value: string) | - |  |
 | onSelect | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - |  |
 | onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - |  |
+| onPopupScroll | Called when dropdown scrolls | (event: MouseEvent) => void | - | 5.17.0 |
 
 ### Tree Methods
 
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index c33960329e..f7cd874ada 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -87,6 +87,7 @@ demo:
 | onSearch | 文本框值变化时的回调 | function(value: string) | - |  |
 | onSelect | 被选中时调用 | function(value, node, extra) | - |  |
 | onTreeExpand | 展示节点时调用 | function(expandedKeys) | - |  |
+| onPopupScroll | 下拉列表滚动时的回调 | (event: MouseEvent) => void | - | 5.17.0 |
 
 ### Tree 方法
 
diff --git a/components/typography/Base/CopyBtn.tsx b/components/typography/Base/CopyBtn.tsx
index 6269dca261..59d748d368 100644
--- a/components/typography/Base/CopyBtn.tsx
+++ b/components/typography/Base/CopyBtn.tsx
@@ -14,18 +14,28 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
   prefixCls: string;
   copied: boolean;
   locale: Locale['Text'];
-  onCopy: React.MouseEventHandler<HTMLDivElement>;
+  onCopy: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   iconOnly: boolean;
   loading: boolean;
 }
 
-export default function CopyBtn(props: CopyBtnProps) {
-  const { prefixCls, copied, locale = {}, onCopy, iconOnly, tooltips, icon, loading } = props;
+const CopyBtn: React.FC<CopyBtnProps> = (props) => {
+  const {
+    prefixCls,
+    copied,
+    locale,
+    iconOnly,
+    tooltips,
+    icon,
+    loading: btnLoading,
+    tabIndex,
+    onCopy,
+  } = props;
 
   const tooltipNodes = toList(tooltips);
   const iconNodes = toList(icon);
 
-  const { copied: copiedText, copy: copyText } = locale;
+  const { copied: copiedText, copy: copyText } = locale ?? {};
 
   const copyTitle = copied
     ? getNode(tooltipNodes[1], copiedText)
@@ -40,13 +50,16 @@ export default function CopyBtn(props: CopyBtnProps) {
           [`${prefixCls}-copy-success`]: copied,
           [`${prefixCls}-copy-icon-only`]: iconOnly,
         })}
-        onClick={onCopy as any}
+        onClick={onCopy}
         aria-label={ariaLabel}
+        tabIndex={tabIndex}
       >
         {copied
           ? getNode(iconNodes[1], <CheckOutlined />, true)
-          : getNode(iconNodes[0], loading ? <LoadingOutlined /> : <CopyOutlined />, true)}
+          : getNode(iconNodes[0], btnLoading ? <LoadingOutlined /> : <CopyOutlined />, true)}
       </TransButton>
     </Tooltip>
   );
-}
+};
+
+export default CopyBtn;
diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index 18369e9c7a..e0cb2e507f 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -33,6 +33,7 @@ export interface CopyConfig {
   icon?: React.ReactNode;
   tooltips?: React.ReactNode;
   format?: 'text/plain' | 'text/html';
+  tabIndex?: number;
 }
 
 interface EditConfig {
@@ -48,6 +49,7 @@ interface EditConfig {
   autoSize?: boolean | AutoSizeType;
   triggerType?: ('icon' | 'text')[];
   enterIcon?: React.ReactNode;
+  tabIndex?: number;
 }
 
 export interface EllipsisConfig {
@@ -372,8 +374,12 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   const renderExpand = () => {
     const { expandable, symbol } = ellipsisConfig;
 
-    if (!expandable) return null;
-    if (expanded && expandable !== 'collapsible') return null;
+    if (!expandable) {
+      return null;
+    }
+    if (expanded && expandable !== 'collapsible') {
+      return null;
+    }
 
     return (
       <a
@@ -389,9 +395,11 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
 
   // Edit
   const renderEdit = () => {
-    if (!enableEdit) return;
+    if (!enableEdit) {
+      return;
+    }
 
-    const { icon, tooltip } = editConfig;
+    const { icon, tooltip, tabIndex } = editConfig;
 
     const editTitle = toArray(tooltip)[0] || textLocale?.edit;
     const ariaLabel = typeof editTitle === 'string' ? editTitle : '';
@@ -403,6 +411,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
           className={`${prefixCls}-edit`}
           onClick={onEditClick}
           aria-label={ariaLabel}
+          tabIndex={tabIndex}
         >
           {icon || <EditOutlined role="button" />}
         </TransButton>
diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx
index a70c405754..19dbd5cfa7 100644
--- a/components/typography/__tests__/copy.test.tsx
+++ b/components/typography/__tests__/copy.test.tsx
@@ -328,4 +328,28 @@ describe('Typography copy', () => {
     );
     expect(container.querySelector('.ant-typography-copy')).toBeTruthy();
   });
+
+  it('tabIndex of copy button', () => {
+    const { container } = render(
+      <Base component="p" copyable={{ tabIndex: -1 }}>
+        test
+      </Base>,
+    );
+    expect(container.querySelector('.ant-typography-copy')?.getAttribute('tabIndex')).toBe('-1');
+  });
+
+  it('locale text for button tooltip', async () => {
+    const { container } = render(
+      <Base component="p" copyable>
+        test
+      </Base>,
+    );
+    fireEvent.mouseEnter(container.querySelectorAll('.ant-typography-copy')[0]);
+    await waitFakeTimer();
+    await waitFor(() => {
+      expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copy');
+    });
+    fireEvent.click(container.querySelectorAll('.ant-typography-copy')[0]);
+    expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copied');
+  });
 });
diff --git a/components/typography/__tests__/editable.test.tsx b/components/typography/__tests__/editable.test.tsx
index dad429d471..dc34d0ecf5 100644
--- a/components/typography/__tests__/editable.test.tsx
+++ b/components/typography/__tests__/editable.test.tsx
@@ -90,4 +90,16 @@ describe('Typography.Editable', () => {
     );
     expect(container.querySelector('.ant-typography-edit')).toBeTruthy();
   });
+
+  it('tabIndex of edit button', () => {
+    const { container, rerender } = render(<Base component="p">test</Base>);
+    expect(container.querySelector('.ant-typography-edit')).toBeFalsy();
+
+    rerender(
+      <Base component="p" editable={{ tabIndex: -1 }}>
+        test
+      </Base>,
+    );
+    expect(container.querySelector('.ant-typography-edit')?.getAttribute('tabIndex')).toBe('-1');
+  });
 });
diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
index a97c2eb0cf..76ca8c0a32 100644
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@@ -92,6 +92,7 @@ Common props ref：[Common props](/docs/react/common-props)
       icon: ReactNode,
       tooltips: false | [ReactNode, ReactNode],
       format: 'text/plain' | 'text/html',
+      tabIndex: number,
     }
 
 | Property | Description | Type | Default | Version |
@@ -101,6 +102,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | text | The text to copy | string | - |  |
 | tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode] | \[`Copy`, `Copied`] | 4.4.0 |
 | onCopy | Called when copied text | function | - |  |
+| tabIndex | Set tabIndex of the copy button | number | 0 | 5.17.0 |
 
 ### editable
 
@@ -117,6 +119,7 @@ Common props ref：[Common props](/docs/react/common-props)
       onEnd: function,
       triggerType: ('icon' | 'text')[],
       enterIcon: ReactNode,
+      tabIndex: number,
     }
 
 | Property | Description | Type | Default | Version |
@@ -133,6 +136,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 |
 | triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] |  |
 | enterIcon | Custom "enter" icon in the edit field (passing `null` removes the icon) | ReactNode | `<EnterOutlined />` | 4.17.0 |
+| tabIndex | Set tabIndex of the edit button | number | 0 | 5.17.0 |
 
 ### ellipsis
 
diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
index a490ce477e..a9d20f108b 100644
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@@ -93,6 +93,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
       icon: ReactNode,
       tooltips: false | [ReactNode, ReactNode],
       format: 'text/plain' | 'text/html',
+      tabIndex: number,
     }
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -102,6 +103,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | text | 拷贝到剪切板里的文本 | string | - |  |
 | tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode] | \[`复制`, `复制成功`] | 4.4.0 |
 | onCopy | 拷贝成功的回调函数 | function | - |  |
+| tabIndex | 自定义复制按钮的 tabIndex | number | 0 | 5.17.0 |
 
 ### editable
 
@@ -118,6 +120,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
       onEnd: function,
       triggerType: ('icon' | 'text')[],
       enterIcon: ReactNode,
+      tabIndex: number,
     }
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -134,6 +137,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | onEnd | 按 ENTER 结束编辑状态时触发 | function | - | 4.14.0 |
 | triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array&lt;`icon`\|`text`> | \[`icon`] |  |
 | enterIcon | 在编辑段中自定义“enter”图标（传递“null”将删除图标） | ReactNode | `<EnterOutlined />` | 4.17.0 |
+| tabIndex | 自定义编辑按钮的 tabIndex | number | 0 | 5.17.0 |
 
 ### ellipsis
 
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index b13296acc6..e30a1dc004 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -32,6 +32,11 @@ export interface UploadRef<T = any> {
   onError: (error: Error, response: any, file: RcFile) => void;
   fileList: UploadFile<T>[];
   upload: RcUpload | null;
+  /**
+   * Get native element for wrapping upload
+   * @since 5.17.0
+   */
+  nativeElement: HTMLSpanElement | null;
 }
 
 const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (props, ref) => {
@@ -79,6 +84,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
   const [dragState, setDragState] = React.useState<string>('drop');
 
   const upload = React.useRef<RcUpload>(null);
+  const wrapRef = React.useRef<HTMLSpanElement>(null);
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Upload');
@@ -331,6 +337,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     onError,
     fileList: mergedFileList,
     upload: upload.current,
+    nativeElement: wrapRef.current,
   }));
 
   const { getPrefixCls, direction, upload: ctxUpload } = React.useContext(ConfigContext);
@@ -431,6 +438,8 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
 
   const mergedStyle: React.CSSProperties = { ...ctxUpload?.style, ...style };
 
+  // ======================== Render ========================
+
   if (type === 'drag') {
     const dragCls = classNames(hashId, prefixCls, `${prefixCls}-drag`, {
       [`${prefixCls}-drag-uploading`]: mergedFileList.some((file) => file.status === 'uploading'),
@@ -440,7 +449,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     });
 
     return wrapCSSVar(
-      <span className={mergedCls}>
+      <span className={mergedCls} ref={wrapRef}>
         <div
           className={dragCls}
           style={mergedStyle}
@@ -469,12 +478,14 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
 
   if (listType === 'picture-card' || listType === 'picture-circle') {
     return wrapCSSVar(
-      <span className={mergedCls}>{renderUploadList(uploadButton, !!children)}</span>,
+      <span className={mergedCls} ref={wrapRef}>
+        {renderUploadList(uploadButton, !!children)}
+      </span>,
     );
   }
 
   return wrapCSSVar(
-    <span className={mergedCls}>
+    <span className={mergedCls} ref={wrapRef}>
       {uploadButton}
       {renderUploadList()}
     </span>,
diff --git a/components/upload/__tests__/upload.test.tsx b/components/upload/__tests__/upload.test.tsx
index 9841b171ae..a9ec579fb4 100644
--- a/components/upload/__tests__/upload.test.tsx
+++ b/components/upload/__tests__/upload.test.tsx
@@ -1082,4 +1082,11 @@ describe('Upload', () => {
       expect(file.status).toBe('done');
     });
   });
+
+  it('container ref', () => {
+    const ref = React.createRef<any>();
+    render(<Upload ref={ref} />);
+    expect(ref.current?.nativeElement).toBeTruthy();
+    expect(ref.current?.nativeElement instanceof HTMLElement).toBeTruthy();
+  });
 });
diff --git a/components/upload/demo/avatar.tsx b/components/upload/demo/avatar.tsx
index 40346e7bc7..45c8958cc3 100644
--- a/components/upload/demo/avatar.tsx
+++ b/components/upload/demo/avatar.tsx
@@ -49,7 +49,7 @@ const App: React.FC = () => {
   );
 
   return (
-    <Flex gap="middle" wrap="wrap">
+    <Flex gap="middle" wrap>
       <Upload
         name="avatar"
         listType="picture-card"
diff --git a/docs/react/compatible-style.en-US.md b/docs/react/compatible-style.en-US.md
index 04cf206c59..aaa308ac59 100644
--- a/docs/react/compatible-style.en-US.md
+++ b/docs/react/compatible-style.en-US.md
@@ -11,9 +11,33 @@ Ant Design supports the last 2 versions of modern browsers. If you need to be co
 
 Please ref [`@ant-design/cssinjs`](https://github.com/ant-design/cssinjs#styleprovider).
 
+## `layer` Downgrade
+
+Ant Design supports configuring `layer` for unified downgrade since `5.17.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`):
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+antd styles will be encapsulated in `@layer` to lower the priority:
+
+```diff
+++  @layer antd {
+      :where(.css-bAMboO).ant-btn {
+        color: #fff;
+      }
+++  }
+```
+
 ## Compatible adjustment
 
-The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers (or encounter priority conflicts like TailwindCSS), you can use `@ant-design/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
+The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@ant-design/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
 
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
@@ -147,3 +171,91 @@ root.render(
   </StyleProvider>,
 );
 ```
+
+## Compatible with Third-party Style Libraries
+
+In some cases, you may need antd to coexist with other style libraries, such as `Tailwind CSS`, `Emotion`, `styled-components`, etc. Unlike traditional CSS solutions, these third-party libraries are often not easy to override antd styles by increasing CSS selector priority. You can configure `@layer` for antd to lower its CSS selector weight, and arrange `@layer` order to solve style override problems:
+
+### antd config `@layer`
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+### TailwindCSS Arrange `@layer`
+
+In global.css, adjust `@layer` to control the order of style override. Place `tailwind-base` before `antd`:
+
+```less
+@layer tailwind-base, antd;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+@tailwind components;
+@tailwind utilities;
+```
+
+### reset.css
+
+If you use antd's `reset.css` style, you need to specify `@layer` for it to prevent the style from overriding antd:
+
+```less
+@layer reset, antd;
+
+@import url(reset.css) layer(reset);
+```
+
+### With other CSS-in-JS libraries
+
+After configuring `@layer` for antd, you don't need to do any additional configuration for other CSS-in-JS libraries. Your CSS-in-JS can completely override antd styles.
+
+### SSR Scene
+
+When using SSR, styles are often rendered inline in HTML through `<style />`. At this time, please make sure that the styles with the specified `@layer` priority order are loaded before `@layer` is used.
+
+#### ❌ Wrong
+
+```html
+<head>
+  <!-- SSR Injection style -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+
+  <!-- css file contains @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or write @layer xxx, antd; in html directly -->
+  <style>
+    @layer xxx, antd;
+  </style>
+</head>
+```
+
+#### ✅ Correct
+
+```html
+<head>
+  <!-- css file contains @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or write @layer xxx, antd; in html directly -->
+  <style>
+    @layer xxx, antd;
+  </style>
+
+  <!-- SSR Injection style -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+</head>
+```
diff --git a/docs/react/compatible-style.zh-CN.md b/docs/react/compatible-style.zh-CN.md
index c049085cbe..fd0b28e639 100644
--- a/docs/react/compatible-style.zh-CN.md
+++ b/docs/react/compatible-style.zh-CN.md
@@ -11,9 +11,33 @@ Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧
 
 查看 [`@ant-design/cssinjs`](https://github.com/ant-design/cssinjs#styleprovider).
 
+## `layer` 降权
+
+Ant Design 从 `5.17.0` 起支持配置 `layer` 进行统一降权。经过降权后，antd 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 `@layer` 浏览器兼容性）：
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+antd 的样式会被封装在 `@layer` 中，以降低优先级：
+
+```diff
+++  @layer antd {
+      :where(.css-bAMboO).ant-btn {
+        color: #fff;
+      }
+++  }
+```
+
 ## `:where` 选择器
 
-Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或与 [TailwindCSS 优先级冲突](https://github.com/ant-design/ant-design/issues/38794#issuecomment-1328262525)），你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
+Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
 
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
@@ -147,3 +171,91 @@ root.render(
   </StyleProvider>,
 );
 ```
+
+## 兼容三方样式库
+
+在某些情况下，你可能需要 antd 与其他样式库共存，比如 `Tailwind CSS`、`Emotion`、`styled-components` 等。不同于传统 CSS 方案，这些三方库往往不太容易通过提升 CSS 选择器优先级的方式覆盖 antd 的样式。你可以通过为 antd 配置 `@layer` 降低其 CSS 选择器权重，同时通过合理安排 `@layer` 顺序来解决样式覆盖问题：
+
+### antd 配置 `@layer`
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+### TailwindCSS 排布 `@layer`
+
+在 global.css 中，调整 `@layer` 来控制样式的覆盖顺序。让 `tailwind-base` 置于 `antd` 之前：
+
+```less
+@layer tailwind-base, antd;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+@tailwind components;
+@tailwind utilities;
+```
+
+### reset.css
+
+如果你使用了 antd 的 `reset.css` 样式，你需要为其也指定 `@layer` 以防止将 antd 降权的样式覆盖：
+
+```less
+@layer reset, antd;
+
+@import url(reset.css) layer(reset);
+```
+
+### 其他 CSS-in-JS 库
+
+当你为 antd 配置完 `@layer` 后，你不需要为其他的 CSS-in-JS 库做任何额外的配置。你的 CSS-in-JS 已经可以完全覆盖 antd 的样式了。
+
+### SSR 场景
+
+在 SSR 场景下，样式往往会通过 `<style />` 内联渲染到 HTML 中。此时请务必确保你的样式顺序中指定 `@layer` 优先级顺序的样式在 `@layer` 被使用之前被加载。
+
+#### ❌ 错误的写法
+
+```html
+<head>
+  <!-- SSR 注入样式 -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+
+  <!-- css 文件中包含 @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or 直接书写 @layer xxx, antd; 在 html 中 -->
+  <style>
+    @layer xxx, antd;
+  </style>
+</head>
+```
+
+#### ✅ 正确的写法
+
+```html
+<head>
+  <!-- css 文件中包含 @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or 直接书写 @layer xxx, antd; 在 html 中 -->
+  <style>
+    @layer xxx, antd;
+  </style>
+
+  <!-- SSR 注入样式 -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+</head>
+```
diff --git a/package.json b/package.json
index 68712afb72..ecfaaea5e7 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.2",
-    "@ant-design/cssinjs": "^1.18.5",
+    "@ant-design/cssinjs": "^1.19.1",
     "@ant-design/icons": "^5.3.6",
     "@ant-design/react-slick": "~1.1.2",
     "@babel/runtime": "^7.24.5",
@@ -130,13 +130,13 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "qrcode.react": "^3.1.0",
-    "rc-cascader": "~3.24.1",
+    "rc-cascader": "~3.25.0",
     "rc-checkbox": "~3.2.0",
     "rc-collapse": "~3.7.3",
     "rc-dialog": "~9.4.0",
     "rc-drawer": "~7.1.0",
     "rc-dropdown": "~4.2.0",
-    "rc-field-form": "~1.44.0",
+    "rc-field-form": "~2.0.0",
     "rc-image": "~7.6.0",
     "rc-input": "~1.4.5",
     "rc-input-number": "~9.0.0",
@@ -145,7 +145,7 @@
     "rc-motion": "^2.9.0",
     "rc-notification": "~5.4.0",
     "rc-pagination": "~4.0.4",
-    "rc-picker": "~4.4.2",
+    "rc-picker": "~4.5.0",
     "rc-progress": "~4.0.0",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.4.0",
@@ -155,11 +155,11 @@
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.45.5",
-    "rc-tabs": "~14.1.1",
+    "rc-tabs": "~15.0.0 ",
     "rc-textarea": "~1.6.3",
     "rc-tooltip": "~6.2.0",
     "rc-tree": "~5.8.5",
-    "rc-tree-select": "~5.19.0",
+    "rc-tree-select": "~5.20.0",
     "rc-upload": "~4.5.2",
     "rc-util": "^5.39.1",
     "scroll-into-view-if-needed": "^3.1.0",
diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap
index 65a17fcc00..40ca1dd0d3 100644
--- a/scripts/__snapshots__/check-site.ts.snap
+++ b/scripts/__snapshots__/check-site.ts.snap
@@ -226,7 +226,7 @@ exports[`site test Component components/table zh Page 1`] = `9`;
 
 exports[`site test Component components/tabs en Page 1`] = `2`;
 
-exports[`site test Component components/tabs zh Page 1`] = `2`;
+exports[`site test Component components/tabs zh Page 1`] = `3`;
 
 exports[`site test Component components/tag en Page 1`] = `2`;