diff --git a/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx b/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx
new file mode 100644
index 000000000..eccadc763
--- /dev/null
+++ b/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Popconfirm, Space } from '@oceanbase/design';
+import { Action } from '@oceanbase/ui';
+import { DownOutlined } from '@oceanbase/icons';
+
+export default () => {
+  return (
+    <Action.Group
+      moreText={
+        <Space size={4}>
+          更多
+          <DownOutlined />
+        </Space>
+      }
+    >
+      <Action.Button type="primary" tooltip="This is tooltip">
+        action1
+      </Action.Button>
+      <Popconfirm placement="bottom" title="Confirm to delete it?">
+        <Action.Button danger tooltip="This is tooltip">
+          危险按钮
+        </Action.Button>
+      </Popconfirm>
+      <Action.Button>action3</Action.Button>
+      <Action.Button>action4</Action.Button>
+      <Action.Button>action5</Action.Button>
+    </Action.Group>
+  );
+};
diff --git a/packages/ui/src/Action/index.md b/packages/ui/src/Action/index.md
index 4970b10e5..57b173e29 100644
--- a/packages/ui/src/Action/index.md
+++ b/packages/ui/src/Action/index.md
@@ -7,14 +7,12 @@ nav:
 
 ## 代码演示
 
+<!-- prettier-ignore -->
 <code src="./demo/link.tsx" title="Action.Link"></code>
-
 <code src="./demo/button.tsx" title="Action.Button"></code>
-
 <code src="./demo/loading.tsx" title="loading 状态"></code>
-
+<code src="./demo/with-tooltip-popconfirm.tsx" title="带 Tooltip 和 Popconfirm"></code>
 <code src="./demo/fixed.tsx" title="固定展示、不被折叠的 Action"></code>
-
 <code src="./demo/groupControl.tsx" title="整体控制状态"></code>
 
 ## API