Message

Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.

Basic usage

Displays at the top by default, and disappears after 3 seconds. You can control the position using the placement property.

The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element Plus has registered a $message method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.

export function MessageBasic() {  return (    <div className={styles.row}>      <ElButton plain onClick={() => message("This is a message.")}>        Show message      </ElButton>      <ElButton        plain        onClick={() =>          message({            message: (              <span style={{ lineHeight: 1, fontSize: 14 }}>                Message can be <i style={{ color: "teal" }}>VNode</i>              </span>            ),          })        }      >        VNode      </ElButton>    </div>  );}

Types

Used to show the feedback of Success, Warning, Message and Error activities.

When you need more customizations, Message component can also take an object as parameter. For example, setting value of type can define different types, and its default is info. In such cases the main body is passed in as the value of message. Also, we have registered methods for different types, so you can directly call it without passing a type like open4. primary has been added in 2.9.11.

export function MessageDifferentTypes() {  return (    <div className={styles.row}>      <ElButton        plain        onClick={() =>          message({ message: "This is a primary message.", type: "primary" })        }      >        Primary      </ElButton>      <ElButton        plain        onClick={() =>          message({ message: "This is a success message.", type: "success" })        }      >        Success      </ElButton>      <ElButton        plain        onClick={() =>          message({ message: "This is a warning message.", type: "warning" })        }      >        Warning      </ElButton>      <ElButton        plain        onClick={() => message({ message: "This is a info message.", type: "info" })}      >        Info      </ElButton>      <ElButton        plain        onClick={() =>          message({ message: "This is a error message.", type: "error" })        }      >        Error      </ElButton>    </div>  );}

Plain 2.6.3

Set plain to have a plain background.

export function MessagePlain() {  return (    <div className={styles.row}>      <ElButton        plain        onClick={() =>          message({            message: "This is a primary message.",            type: "primary",            plain: true,          })        }      >        Primary      </ElButton>      <ElButton        plain        onClick={() =>          message({            message: "This is a success message.",            type: "success",            plain: true,          })        }      >        Success      </ElButton>      <ElButton        plain        onClick={() =>          message({            message: "This is a warning message.",            type: "warning",            plain: true,          })        }      >        Warning      </ElButton>      <ElButton        plain        onClick={() =>          message({ message: "This is a info message.", type: "info", plain: true })        }      >        Info      </ElButton>      <ElButton        plain        onClick={() =>          message({ message: "This is a error message.", type: "error", plain: true })        }      >        Error      </ElButton>    </div>  );}

Closable

A close button can be added.

A default Message cannot be closed manually. If you need a closable message, you can set showClose field. Besides, same as notification, message has a controllable duration. Default duration is 3000 ms, and it won't disappear when set to 0.

export function MessageClosable() {  return (    <div className={styles.row}>      <ElButton        plain        onClick={() =>          message({            message: "This is a primary message.",            type: "primary",            showClose: true,          })        }      >        Primary      </ElButton>      <ElButton        plain        onClick={() =>          message({            message: "This is a success message.",            type: "success",            showClose: true,          })        }      >        Success      </ElButton>      <ElButton        plain        onClick={() =>          message({            message: "This is a warning message.",            type: "warning",            showClose: true,          })        }      >        Warning      </ElButton>      <ElButton        plain        onClick={() =>          message({            message: "This is a info message.",            type: "info",            showClose: true,          })        }      >        Info      </ElButton>      <ElButton        plain        onClick={() =>          message({            message: "This is a error message.",            type: "error",            showClose: true,          })        }      >        Error      </ElButton>      <ElButton        plain        onClick={() =>          message({            showClose: true,            message: "This is a message that does not automatically close.",            duration: 0,          })        }      >        Won&apos;t close automatically      </ElButton>    </div>  );}

Use HTML string

message supports HTML string.

Set dangerouslyUseHTMLString to true and message will be treated as an HTML string.

export function MessageRawHtml() {  return (    <ElButton      plain      onClick={() =>        message({          dangerouslyUseHTMLString: true,          message: "<strong>This is <i>HTML</i> string</strong>",        })      }    >      Use HTML string    </ElButton>  );}

WARNING

Although message property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. So when dangerouslyUseHTMLString is on, please make sure the content of message is trusted, and never assign message to user-provided content.

Grouping

merge messages with the same content.

Set grouping to true and the same content of message will be merged.

export function MessageGrouping() {  return (    <ElButton      plain      onClick={() =>        message({          message: "This is a message.",          grouping: true,          type: "success",        })      }    >      Show message    </ElButton>  );}

Placement 2.11.0

Control the position where messages appear. Messages can be displayed at the top (default) or other placements of the viewport.

export function MessagePlacement() {  const counters = useRef<Record<string, number>>({});  return (    <div className={styles.row}>      <ElButton        plain        onClick={() => {          const count = (counters.current.top ?? 0) + 1;          counters.current.top = count;          message({            message: `This is a message from the top ${count}`,            type: "success",            placement: "top",          });        }}      >        Top      </ElButton>      <ElButton        plain        onClick={() => {          const count = (counters.current["top-left"] ?? 0) + 1;          counters.current["top-left"] = count;          message({            message: `This is a message from the top-left ${count}`,            type: "info",            placement: "top-left",          });        }}      >        Top Left      </ElButton>      <ElButton        plain        onClick={() => {          const count = (counters.current["top-right"] ?? 0) + 1;          counters.current["top-right"] = count;          message({            message: `This is a message from the top-right ${count}`,            type: "primary",            placement: "top-right",          });        }}      >        Top Right      </ElButton>      <ElButton        plain        onClick={() => {          const count = (counters.current.bottom ?? 0) + 1;          counters.current.bottom = count;          message({            message: `This is a message from the bottom ${count}`,            type: "warning",            placement: "bottom",          });        }}      >        Bottom      </ElButton>      <ElButton        plain        onClick={() => {          const count = (counters.current["bottom-left"] ?? 0) + 1;          counters.current["bottom-left"] = count;          message({            message: `This is a message from the bottom-left ${count}`,            type: "warning",            placement: "bottom-left",          });        }}      >        Bottom Left      </ElButton>      <ElButton        plain        onClick={() => {          const count = (counters.current["bottom-right"] ?? 0) + 1;          counters.current["bottom-right"] = count;          message({            message: `This is a message from the bottom-right ${count}`,            type: "error",            placement: "bottom-right",          });        }}      >        Bottom Right      </ElButton>    </div>  );}

Global method

Element Plus has added a global method $message for app.config.globalProperties. So in a vue instance you can call Message like what we did in this page.

Local import

import { ElMessage } from 'element-plus'

In this case you should call ElMessage(options). We have also registered methods for different types, e.g. ElMessage.success(options). You can call ElMessage.closeAll() to manually close all the instances.

App context inheritance 2.0.3

Now message accepts a context as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.

You can use it like this:

TIP

If you globally registered ElMessage component, it will automatically inherit your app context.

import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

// in your setup method
const { appContext } = getCurrentInstance()!
ElMessage({}, appContext)

API

Options

Name	Description	Type	Default
message	message text	`string` / `VNode` / `Function`	''
type	message type	`enum`	info
plain 2.6.3	whether message is plain	`boolean`	false
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
onClose	callback function when closed with the message instance as the parameter	`Function`	—
offset	set the distance to the viewport edge (top when placement is 'top', bottom when placement is 'bottom')	`number`	16
placement 2.11.0	message placement position	`enum`	top
appendTo	set the root element for the message, default to `document.body`	`CSSSelector` / `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.

Name	Description	Type
close	close the Message	`Function`