diff --git a/components/actions/demo/basic.md b/components/actions/demo/basic.md
new file mode 100644
index 00000000..673339b1
--- /dev/null
+++ b/components/actions/demo/basic.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+基础用法。
+
+## en-US
+
+Basic usage.
diff --git a/components/actions/demo/basic.tsx b/components/actions/demo/basic.tsx
new file mode 100644
index 00000000..79f2f95b
--- /dev/null
+++ b/components/actions/demo/basic.tsx
@@ -0,0 +1,26 @@
+import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
+import { Actions, ActionsProps } from '@ant-design/x';
+import { message } from 'antd';
+import React from 'react';
+
+const actionItems = [
+ {
+ key: 'retry',
+ icon: ,
+ label: '重试',
+ },
+ {
+ key: 'copy',
+ icon: ,
+ label: '复制',
+ },
+];
+
+const Demo: React.FC = () => {
+ const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => {
+ message.success(`you click ${keyPath.join(',')}`);
+ };
+ return ;
+};
+
+export default Demo;
diff --git a/components/actions/demo/sub.md b/components/actions/demo/sub.md
new file mode 100644
index 00000000..2645dbac
--- /dev/null
+++ b/components/actions/demo/sub.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+更多菜单项。
+
+## en-US
+
+Basic usage.
diff --git a/components/actions/demo/sub.tsx b/components/actions/demo/sub.tsx
new file mode 100644
index 00000000..643b6ce5
--- /dev/null
+++ b/components/actions/demo/sub.tsx
@@ -0,0 +1,54 @@
+import {
+ CopyOutlined,
+ DeleteOutlined,
+ RedoOutlined,
+ ReloadOutlined,
+ ShareAltOutlined,
+} from '@ant-design/icons';
+import { Actions, ActionsProps } from '@ant-design/x';
+import { message } from 'antd';
+import React from 'react';
+
+const actionItems: ActionsProps['items'] = [
+ {
+ key: 'retry',
+ label: '重试',
+ icon: ,
+ },
+ {
+ key: 'copy',
+ label: '复制',
+ icon: ,
+ },
+ {
+ key: 'more',
+ // icon: , // 不传使用默认的icon
+ children: [
+ {
+ key: 'share',
+ label: '分享',
+ icon: ,
+ children: [
+ { key: 'qq', label: 'QQ' },
+ { key: 'wechat', label: '微信' },
+ ],
+ },
+ { key: 'import', label: '引用' },
+ { key: 'delete', label: '删除', icon: , onClick: () => {}, danger: true },
+ ],
+ },
+ {
+ key: 'clear',
+ label: '清空',
+ icon: ,
+ },
+];
+
+const Demo: React.FC = () => {
+ const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => {
+ message.success(`you click ${keyPath}`);
+ };
+ return ;
+};
+
+export default Demo;
diff --git a/components/actions/demo/variant.md b/components/actions/demo/variant.md
new file mode 100644
index 00000000..05c7a86a
--- /dev/null
+++ b/components/actions/demo/variant.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用`variant`切换变体。
+
+## en-US
+
+Use `variant` to switch variants.
diff --git a/components/actions/demo/variant.tsx b/components/actions/demo/variant.tsx
new file mode 100644
index 00000000..0357caf0
--- /dev/null
+++ b/components/actions/demo/variant.tsx
@@ -0,0 +1,26 @@
+import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
+import { Actions, ActionsProps } from '@ant-design/x';
+import { message } from 'antd';
+import React from 'react';
+
+const actionItems = [
+ {
+ key: 'retry',
+ icon: ,
+ label: '重试',
+ },
+ {
+ key: 'copy',
+ icon: ,
+ label: '复制',
+ },
+];
+
+const Demo: React.FC = () => {
+ const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => {
+ message.success(`you click ${keyPath.join(',')}`);
+ };
+ return ;
+};
+
+export default Demo;
diff --git a/components/actions/index.en-US.md b/components/actions/index.en-US.md
new file mode 100644
index 00000000..f3f1b8ac
--- /dev/null
+++ b/components/actions/index.en-US.md
@@ -0,0 +1,62 @@
+---
+category: Components
+group:
+ title: Common
+ order: 0
+title: Actions
+description: Used for quickly configuring required action buttons or features in some AI scenarios.
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+demo:
+ cols: 1
+---
+
+## When to Use
+
+The Actions component is used for quickly configuring required action buttons or features in some AI scenarios.
+
+## Examples
+
+
+Basic
+More Menu Items
+Using Variants
+
+## API
+
+Common props ref:[Common props](/docs/react/common-props)
+
+### Actions
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| items | A list containing multiple action items | ActionItemType[] | - | - |
+| rootClassName | Style class for the root node | string | - | - |
+| onClick | Callback function when an action item is clicked | `function({ item, key, keyPath, selectedKeys, domEvent })` | - | - |
+| style | Style for the root node | React.CSSProperties | - | - |
+| variant | Variant | `'borderless' \| 'border'` | 'border' | - |
+| prefixCls | Prefix for style class names | string | - | - |
+
+### ItemType
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| label | The display label for the custom action | string | - | - |
+| key | The unique identifier for the custom action | string | - | - |
+| icon | The icon for the custom action | ReactNode | - | - |
+| onClick | Callback function when the custom action button is clicked | () => void | - | - |
+
+### SubItemType
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| key | The unique identifier for the custom action | string | - | - |
+| label | The display label for the custom action | string | - | - |
+| icon | The icon for the custom action | ReactNode | - | - |
+| children | Sub action items | ActionItemType[] | - | - |
+| triggerSubMenuAction | Action to trigger the sub-menu | `hover \| click` | - | - |
+| onClick | Callback function when the custom action button is clicked | () => void | - | - |
+
+### ActionItemType
+
+> type `ActionItemType` = `ItemType` | `SubItemType`
diff --git a/components/actions/index.zh-CN.md b/components/actions/index.zh-CN.md
new file mode 100644
index 00000000..f0087cc0
--- /dev/null
+++ b/components/actions/index.zh-CN.md
@@ -0,0 +1,63 @@
+---
+category: Components
+group:
+ title: 通用
+ order: 0
+title: Actions
+subtitle: 操作栏
+description: 用于快速配置一些 AI 场景下所需要的操作按钮/功能。
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+demo:
+ cols: 1
+---
+
+## 何时使用
+
+Actions 组件用于快速配置一些 AI 场景下所需要的操作按钮/功能
+
+## 代码演示
+
+
+基本
+更多菜单项
+使用变体
+
+## API
+
+通用属性参考:[通用属性](/docs/react/common-props)
+
+### Actions
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| items | 包含多个操作项的列表 | ActionItemType[] | - | - |
+| rootClassName | 根节点样式类 | string | - | - |
+| onClick | Item 操作项被点击时的回调函数 | `function({ item, key, keyPath, selectedKeys, domEvent })` | - | - |
+| style | 根节点样式 | React.CSSProperties | - | - |
+| variant | 变体 | `'borderless' \| 'border'` | 'border' | - |
+| prefixCls | 样式类名的前缀 | string | - | - |
+
+### ItemType
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| ------- | ------------------------------ | ---------- | ------ | ---- |
+| label | 自定义操作的显示标签 | string | - | - |
+| key | 自定义操作的唯一标识 | string | - | - |
+| icon | 自定义操作的图标 | ReactNode | - | - |
+| onClick | 点击自定义操作按钮时的回调函数 | () => void | - | - |
+
+### SubItemType
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| -------------------- | ------------------------------ | ---------------- | ------ | ---- |
+| key | 自定义操作的唯一标识 | string | - | - |
+| label | 自定义操作的显示标签 | string | - | - |
+| icon | 自定义操作的图标 | ReactNode | - | - |
+| children | 子操作项 | ActionItemType[] | - | - |
+| triggerSubMenuAction | 触发子菜单的操作 | `hover \| click` | - | - |
+| onClick | 点击自定义操作按钮时的回调函数 | () => void | - | - |
+
+### ActionItemType
+
+> type `ActionItemType` = `ItemType` | `SubItemType`