diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 3b07e3cc..18dd1f59 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -18,6 +18,11 @@ export interface BubbleContextProps {
   onUpdate?: VoidFunction;
 }
 
+type RenderSlotNode =
+  | BubbleProps<any>['footer']
+  | BubbleProps<any>['header']
+  | BubbleProps<any>['extra'];
+
 export const BubbleContext = React.createContext<BubbleContextProps>({});
 
 const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, ref) => {
@@ -40,6 +45,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    extra,
     _key,
     ...otherHtmlProps
   } = props;
@@ -117,7 +123,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     () => (messageRender ? messageRender(typedContent as any) : typedContent),
     [typedContent, messageRender],
   );
-  const renderSlot = (node: BubbleProps<any>['footer'] | BubbleProps<any>['header']) =>
+  const renderSlot = (node: RenderSlotNode) =>
     typeof node === 'function' ? node(typedContent, { key: _key }) : node;
 
   // ============================ Render ============================
@@ -148,6 +154,21 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
       )}
     >
       {contentNode}
+      {(extra || extra === 0) && (
+        <div
+          className={classnames(
+            `${prefixCls}-extra`,
+            contextConfig.classNames.extra,
+            classNames.extra,
+          )}
+          style={{
+            ...contextConfig.styles.extra,
+            ...styles.extra,
+          }}
+        >
+          {renderSlot(extra)}
+        </div>
+      )}
     </div>
   );
 
diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1369428b..ca91376b 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1432,6 +1432,83 @@ exports[`renders components/bubble/demo/debug-list.tsx extend context correctly
 
 exports[`renders components/bubble/demo/debug-list.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/bubble/demo/extra.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Hello ice !
+      <div
+        class="ant-bubble-extra"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Hello Ant Design X !
+      <div
+        class="ant-bubble-extra"
+      >
+        <span
+          aria-label="exclamation-circle"
+          class="anticon anticon-exclamation-circle"
+          role="img"
+          style="color: #ff4d4f;"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="exclamation-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/bubble/demo/extra.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/bubble/demo/header-and-footer.tsx extend context correctly 1`] = `
 <div
   class="ant-bubble ant-bubble-start"
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 8d2c2f46..00c10bf3 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -1336,6 +1336,81 @@ exports[`renders components/bubble/demo/debug-list.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/bubble/demo/extra.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Hello ice !
+      <div
+        class="ant-bubble-extra"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Hello Ant Design X !
+      <div
+        class="ant-bubble-extra"
+      >
+        <span
+          aria-label="exclamation-circle"
+          class="anticon anticon-exclamation-circle"
+          role="img"
+          style="color:#ff4d4f"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="exclamation-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/bubble/demo/header-and-footer.tsx correctly 1`] = `
 <div
   class="ant-bubble ant-bubble-start"
diff --git a/components/bubble/__tests__/index.test.tsx b/components/bubble/__tests__/index.test.tsx
index b5e3ee5f..578e95d8 100644
--- a/components/bubble/__tests__/index.test.tsx
+++ b/components/bubble/__tests__/index.test.tsx
@@ -64,6 +64,26 @@ describe('bubble', () => {
     expect(element?.textContent).toBe('Footer for: Test content');
   });
 
+  it('should render static extra', () => {
+    const { container } = render(<Bubble content="extra content" extra="extra" />);
+    const element = container.querySelector<HTMLSpanElement>('.ant-bubble .ant-bubble-extra');
+    expect(element).toBeTruthy();
+    expect(element?.textContent).toBe('extra');
+  });
+
+  it('should render extra with function and get content', () => {
+    const content = 'extra content';
+    const extraFunction = (content: BubbleContentType) => (
+      <div className="test-extra">{`Extra for: ${content}`}</div>
+    );
+    const { container } = render(<Bubble content={content} extra={extraFunction} />);
+    const element = container.querySelector<HTMLSpanElement>(
+      '.ant-bubble .ant-bubble-extra .test-extra',
+    );
+    expect(element).toBeTruthy();
+    expect(element?.textContent).toBe('Extra for: extra content');
+  });
+
   it('Bubble support typing', () => {
     const { container } = render(<Bubble typing content="test" />);
     expect(container.querySelector<HTMLDivElement>('.ant-bubble')).toHaveClass('ant-bubble-typing');
diff --git a/components/bubble/demo/_semantic.tsx b/components/bubble/demo/_semantic.tsx
index 7eeaf8d8..c3f4e8e4 100644
--- a/components/bubble/demo/_semantic.tsx
+++ b/components/bubble/demo/_semantic.tsx
@@ -1,4 +1,4 @@
-import { CopyOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons';
+import { CopyOutlined, LoadingOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble } from '@ant-design/x';
 import { Avatar, Button, Space, theme } from 'antd';
 import React from 'react';
@@ -11,12 +11,14 @@ const locales = {
     header: '头部的容器',
     content: '聊天内容的容器',
     footer: '底部的容器',
+    extra: '额外的容器',
   },
   en: {
     avatar: 'Wrapper element of the avatar',
     header: 'Wrapper element of the header',
     content: 'Wrapper element of the content',
     footer: 'Wrapper element of the footer',
+    extra: 'Wrapper element of the extra',
   },
 };
 
@@ -33,6 +35,7 @@ const App: React.FC = () => {
         { name: 'header', desc: locale.header },
         { name: 'content', desc: locale.content },
         { name: 'footer', desc: locale.footer },
+        { name: 'extra', desc: locale.extra },
       ]}
     >
       <Bubble
@@ -45,6 +48,7 @@ const App: React.FC = () => {
             <Button color="default" variant="text" size="small" icon={<CopyOutlined />} />
           </Space>
         }
+        extra={<LoadingOutlined spin />}
       />
     </SemanticPreview>
   );
diff --git a/components/bubble/demo/extra.md b/components/bubble/demo/extra.md
new file mode 100644
index 00000000..c046d746
--- /dev/null
+++ b/components/bubble/demo/extra.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义扩展内容。
+
+## en-US
+
+Customize extra content
diff --git a/components/bubble/demo/extra.tsx b/components/bubble/demo/extra.tsx
new file mode 100644
index 00000000..f33c9895
--- /dev/null
+++ b/components/bubble/demo/extra.tsx
@@ -0,0 +1,17 @@
+import { ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import { Flex } from 'antd';
+import React from 'react';
+
+const App = () => (
+  <Flex vertical gap="small">
+    <Bubble content="Hello ice !" extra={<LoadingOutlined spin />} />
+    <Bubble
+      placement="end"
+      content="Hello Ant Design X !"
+      extra={<ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />}
+    />
+  </Flex>
+);
+
+export default App;
diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md
index 8e3662a3..346e6b89 100644
--- a/components/bubble/index.en-US.md
+++ b/components/bubble/index.en-US.md
@@ -21,6 +21,7 @@ Often used when chatting.
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/avatar-and-placement.tsx">Placement and avatar</code>
 <code src="./demo/header-and-footer.tsx">Header and footer</code>
+<code src="./demo/extra.tsx" version="1.5.0">Extra content</code>
 <code src="./demo/loading.tsx">Loading</code>
 <code src="./demo/typing.tsx">Typing effect</code>
 <code src="./demo/custom-content.tsx">Custom rendering content.</code>
@@ -46,8 +47,9 @@ Common props ref：[Common props](/docs/react/common-props)
 | avatar | Avatar component | React.ReactNode | - | - |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | - |
 | content | Content of bubble | ContentType | - | - |
-| footer | Footer content | React.ReactNode \| (content: ContentType, info:{ key?: string \| number }) => React.ReactNode | - | - |
-| header | Header content | React.ReactNode \| (content: ContentType, info:{ key?: string \| number }) => React.ReactNode | - | - |
+| footer | Footer content | [SlotRenderType](#slotrendertype) | - | - |
+| header | Header content | [SlotRenderType](#slotrendertype) | - | - |
+| extra | Extra content | [SlotRenderType](#slotrendertype) | - | 1.5.0 |
 | loading | Loading state of Message | boolean | - |  |
 | placement | Direction of Message | `start` \| `end` | `start` |  |
 | shape | Shape of bubble | `round` \| `corner` | - |  |  | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - |  |
@@ -57,6 +59,18 @@ Common props ref：[Common props](/docs/react/common-props)
 | messageRender | Customize display content | <ContentType extends [BubbleContentType](https://github.com/ant-design/x/blob/d3232c925a0dc61ad763c6664e16f07323ebca4a/components/bubble/interface.ts#L21) = string>(content?: ContentType) => ReactNode | - |  |
 | onTypingComplete | Callback when typing effect is completed. If typing is not set, it will be triggered immediately when rendering. | () => void | - |  |
 
+#### SlotRenderType
+
+```typescript
+type SlotInfoType = {
+  key?: string | number;
+};
+
+type SlotRenderType<ContentType> =
+  | React.ReactNode
+  | ((content: ContentType, info: SlotInfoType) => React.ReactNode);
+```
+
 #### ContentType
 
 Default Type
diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md
index 71457966..7563291e 100644
--- a/components/bubble/index.zh-CN.md
+++ b/components/bubble/index.zh-CN.md
@@ -22,6 +22,7 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/avatar-and-placement.tsx">支持位置和头像</code>
 <code src="./demo/header-and-footer.tsx">头和尾</code>
+<code src="./demo/extra.tsx" version="1.5.0">额外内容</code>
 <code src="./demo/loading.tsx">加载中</code>
 <code src="./demo/typing.tsx">打字效果</code>
 <code src="./demo/custom-content.tsx">自定义渲染内容</code>
@@ -47,8 +48,9 @@ demo:
 | avatar | 展示头像 | React.ReactNode | - |  |
 | classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - |  |
 | content | 聊天内容 | ContentType | - |  |
-| footer | 底部内容 | React.ReactNode \| (content: ContentType ,info: { key?: string \| number }) => React.ReactNode | - |  |
-| header | 头部内容 | React.ReactNode \| (content: ContentType, info: { key?: string \| number }) => React.ReactNode | - |  |
+| footer | 底部内容 | [SlotRenderType](#slotrendertype) | - |  |
+| header | 头部内容 | [SlotRenderType](#slotrendertype) | - |  |
+| extra | 额外内容 | [SlotRenderType](#slotrendertype) | - | 1.5.0 |
 | loading | 聊天内容加载状态 | boolean | - |  |
 | placement | 信息位置 | `start` \| `end` | `start` |  |
 | shape | 气泡形状 | `round` \| `corner` | - |  |
@@ -59,6 +61,18 @@ demo:
 | messageRender | 自定义渲染内容 | (content?: ContentType) => ReactNode | - |  |
 | onTypingComplete | 打字效果完成时的回调，如果没有设置 typing 将在渲染时立刻触发 | () => void | - |  |
 
+#### SlotRenderType
+
+```typescript
+type SlotInfoType = {
+  key?: string | number;
+};
+
+type SlotRenderType<ContentType> =
+  | React.ReactNode
+  | ((content: ContentType, info: SlotInfoType) => React.ReactNode);
+```
+
 #### ContentType
 
 默认类型
diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
index 3aaf40a9..98f4df7f 100644
--- a/components/bubble/interface.ts
+++ b/components/bubble/interface.ts
@@ -16,13 +16,18 @@ export interface TypingOption {
   suffix?: React.ReactNode;
 }
 
-type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
+type SemanticType = 'avatar' | 'content' | 'header' | 'footer' | 'extra';
 
 export type BubbleContentType = React.ReactNode | AnyObject | React.ReactNode | string | number;
 
 type SlotInfoType = {
   key?: string | number;
 };
+
+type SlotRenderType<ContentType> =
+  | React.ReactNode
+  | ((content: ContentType, info: SlotInfoType) => React.ReactNode);
+
 export interface BubbleProps<ContentType extends BubbleContentType = string>
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
   prefixCls?: string;
@@ -40,6 +45,7 @@ export interface BubbleProps<ContentType extends BubbleContentType = string>
   shape?: 'round' | 'corner';
   _key?: number | string;
   onTypingComplete?: VoidFunction;
-  header?: React.ReactNode | ((content: ContentType, info: SlotInfoType) => React.ReactNode);
-  footer?: React.ReactNode | ((content: ContentType, info: SlotInfoType) => React.ReactNode);
+  header?: SlotRenderType<ContentType>;
+  footer?: SlotRenderType<ContentType>;
+  extra?: SlotRenderType<ContentType>;
 }
diff --git a/components/bubble/style/index.ts b/components/bubble/style/index.ts
index b7319603..2210e879 100644
--- a/components/bubble/style/index.ts
+++ b/components/bubble/style/index.ts
@@ -142,6 +142,21 @@ const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
           },
         },
       },
+
+      // =========================== Extra =============================
+      [`& ${componentCls}-extra`]: {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+      },
+
+      [`&-start ${componentCls}-extra`]: {
+        insetInlineStart: `calc(100% + ${token.paddingXS})`,
+      },
+
+      [`&-end ${componentCls}-extra`]: {
+        insetInlineEnd: `calc(100% + ${token.paddingXS})`,
+      },
     },
   };
 };