diff --git a/docs/en-US/component/message.md b/docs/en-US/component/message.md
index 8c2e7fa02a..0e96a6d962 100644
--- a/docs/en-US/component/message.md
+++ b/docs/en-US/component/message.md
@@ -106,29 +106,30 @@ const { appContext } = getCurrentInstance()!
 ElMessage({}, appContext)
 ```
 
-## Message API
+## API
 
 ### Options
 
-| Attribute                  | Description                                                                    | Type                                          | Default         |
-| -------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------- | --------------- |
-| `message`                  | message text                                                                   | `string \| VNode \| (() => VNode)`            | —               |
-| `type`                     | message type                                                                   | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'`        |
-| `icon`                     | custom icon component, overrides `type`                                        | `string \| Component`                         | —               |
-| `dangerouslyUseHTMLString` | whether `message` is treated as HTML string                                    | `boolean`                                     | `false`         |
-| `custom-class`             | custom class name for Message                                                  | `string`                                      | —               |
-| `duration`                 | display duration, millisecond. If set to 0, it will not turn off automatically | `number`                                      | `3000`          |
-| `show-close`               | whether to show a close button                                                 | `boolean`                                     | `false`         |
-| `center`                   | whether to center the text                                                     | `boolean`                                     | `false`         |
-| `on-close`                 | callback function when closed with the message instance as the parameter       | `function`                                    | —               |
-| `offset`                   | set the distance to the top of viewport                                        | `number`                                      | `20`            |
-| `appendTo`                 | set the root element for the message                                           | `string \| HTMLElement`                       | `document.body` |
-| `grouping`                 | merge messages with the same content, type of VNode message is not supported   | `boolean`                                     | `false`         |
+| Name                     | Description                                                                                          | Type                                                 | Default |
+| ------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
+| message                  | message text                                                                                         | ^[string] / ^[VNode] / ^[Function]`() => VNode`      | ''      |
+| type                     | message type                                                                                         | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info    |
+| icon                     | custom icon component, overrides `type`                                                              | ^[string] / ^[Component]                             | —       |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string                                                          | ^[boolean]                                           | false   |
+| customClass              | custom class name for Message                                                                        | ^[string]                                            | ''      |
+| duration                 | display duration, millisecond. If set to 0, it will not turn off automatically                       | ^[number]                                            | 3000    |
+| showClose                | whether to show a close button                                                                       | ^[boolean]                                           | false   |
+| center                   | whether to center the text                                                                           | ^[boolean]                                           | false   |
+| onClose                  | callback function when closed with the message instance as the parameter                             | ^[Function]`() => void`                              | —       |
+| offset                   | set the distance to the top of viewport                                                              | ^[number]                                            | 16      |
+| appendTo                 | set the root element for the message, default to `document.body`                                     | ^[string] / ^[HTMLElement]                           | —       |
+| grouping                 | merge messages with the same content, type of VNode message is not supported                         | ^[boolean]                                           | false   |
+| repeatNum                | The number of repetitions, similar to badge, is used as the initial number when used with `grouping` | ^[number]                                            | 1       |
 
 ### Methods
 
 `Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
 
-| Method  | Description       |
-| ------- | ----------------- |
-| `close` | close the Message |
+| Name  | Description       | Type                    |
+| ----- | ----------------- | ----------------------- |
+| close | close the Message | ^[Function]`() => void` |
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 63fdcfe71c..3291dc51fd 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -36,30 +36,51 @@ export const messageDefaults = mutable({
 } as const)
 
 export const messageProps = buildProps({
+  /**
+   * @description custom class name for Message
+   */
   customClass: {
     type: String,
     default: messageDefaults.customClass,
   },
+  /**
+   * @description whether to center the text
+   */
   center: {
     type: Boolean,
     default: messageDefaults.center,
   },
+  /**
+   * @description whether `message` is treated as HTML string
+   */
   dangerouslyUseHTMLString: {
     type: Boolean,
     default: messageDefaults.dangerouslyUseHTMLString,
   },
+  /**
+   * @description display duration, millisecond. If set to 0, it will not turn off automatically
+   */
   duration: {
     type: Number,
     default: messageDefaults.duration,
   },
+  /**
+   * @description custom icon component, overrides `type`
+   */
   icon: {
     type: iconPropType,
     default: messageDefaults.icon,
   },
+  /**
+   * @description message dom id
+   */
   id: {
     type: String,
     default: messageDefaults.id,
   },
+  /**
+   * @description message text
+   */
   message: {
     type: definePropType<string | VNode | (() => VNode)>([
       String,
@@ -68,31 +89,52 @@ export const messageProps = buildProps({
     ]),
     default: messageDefaults.message,
   },
+  /**
+   * @description callback function when closed with the message instance as the parameter
+   */
   onClose: {
     type: definePropType<() => void>(Function),
     required: false,
   },
+  /**
+   * @description whether to show a close button
+   */
   showClose: {
     type: Boolean,
     default: messageDefaults.showClose,
   },
+  /**
+   * @description message type
+   */
   type: {
     type: String,
     values: messageTypes,
     default: messageDefaults.type,
   },
+  /**
+   * @description set the distance to the top of viewport
+   */
   offset: {
     type: Number,
     default: messageDefaults.offset,
   },
+  /**
+   * @description input box size
+   */
   zIndex: {
     type: Number,
     default: messageDefaults.zIndex,
   },
+  /**
+   * @description merge messages with the same content, type of VNode message is not supported
+   */
   grouping: {
     type: Boolean,
     default: messageDefaults.grouping,
   },
+  /**
+   * @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`
+   */
   repeatNum: {
     type: Number,
     default: messageDefaults.repeatNum,
@@ -116,6 +158,9 @@ export type MessageOptions = Partial<
 >
 export type MessageParams = MessageOptions | MessageOptions['message']
 export type MessageParamsNormalized = Omit<MessageProps, 'id'> & {
+  /**
+   * @description set the root element for the message, default to `document.body`
+   */
   appendTo: HTMLElement
 }
 export type MessageOptionsWithType = Omit<MessageOptions, 'type'>
@@ -124,6 +169,9 @@ export type MessageParamsWithType =
   | MessageOptions['message']
 
 export interface MessageHandler {
+  /**
+   * @description close the Message
+   */
   close: () => void
 }