Message Box

A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.


By design MessageBox provides simulations of system's alert, confirm and prompt,so it's content should be simple. For more complicated contents, please use Dialog.


Alert interrupts user operation until the user confirms.


Confirm is used to ask users' confirmation.


Prompt is used when user input is required.

Use VNode

message can be VNode.


Can be customized to show various content.

Use HTML String

message supports HTML string.


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.

Distinguishing cancel and close

In some cases, clicking the cancel button and close button may have different meanings.

Centered content

Content of MessageBox can be centered.

Customized Icon

The icon can be customized to any Vue component or render function (JSX).


MessageBox can be draggable.

Global method

If Element Plus is fully imported, it will add the following global methods for app.config.globalProperties: $msgbox, $alert, $confirm and $prompt. So in a Vue instance you can call MessageBox like what we did in this page. The parameters are:

  • $msgbox(options)
  • $alert(message, title, options) or $alert(message, options)
  • $confirm(message, title, options) or $confirm(message, options)
  • $prompt(message, title, options) or $prompt(message, options)

App context inheritance > 2.0.4

Now message box accepts a context as second (forth if you are using message box variants) 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.

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

// in your setup method
const { appContext } = getCurrentInstance()!
// You can pass it like:
ElMessageBox({}, appContext)
// or if you are using variants
ElMessageBox.alert('Hello world!', 'Title', {}, appContext)

Local import

If you prefer importing MessageBox on demand:

import { ElMessageBox } from 'element-plus'

The corresponding methods are: ElMessageBox, ElMessageBox.alert, ElMessageBox.confirm and ElMessageBox.prompt. The parameters are the same as above.


AttributeDescriptionTypeAccepted ValuesDefault
autofocusauto focus when open MessageBoxbooleantrue
titletitle of the MessageBoxstring
messagecontent of the MessageBoxstring | VNode | (() => VNode)
dangerouslyUseHTMLStringwhether message is treated as HTML stringbooleanfalse
typemessage type, used for icon displaystringsuccess / info / warning / error
iconcustom icon component, overrides typestring | Component
custom-classcustom class name for MessageBoxstring
custom-stylecustom inline style for MessageBoxCSSProperties
callbackMessageBox closing callback if you don't prefer Promisefunction(action, instance), where action can be 'confirm', 'cancel' or 'close', and instance is the MessageBox instance. You can access to that instance's attributes and methods
showClosewhether to show close icon of MessageBoxbooleantrue
before-closecallback before MessageBox closes, and it will prevent MessageBox from closingfunction(action, instance, done), where action can be 'confirm', 'cancel' or 'close'; instance is the MessageBox instance, and you can access to that instance's attributes and methods; done is for closing the instance
distinguish-cancel-and-closewhether to distinguish canceling and closing the MessageBoxbooleanfalse
lock-scrollwhether to lock body scroll when MessageBox promptsbooleantrue
show-cancel-buttonwhether to show a cancel buttonbooleanfalse (true when called with confirm and prompt)
show-confirm-buttonwhether to show a confirm buttonbooleantrue
cancel-button-texttext content of cancel buttonstringCancel
confirm-button-texttext content of confirm buttonstringOK
cancel-button-classcustom class name of cancel buttonstring
confirm-button-classcustom class name of confirm buttonstring
close-on-click-modalwhether MessageBox can be closed by clicking the maskbooleantrue (false when called with alert)
close-on-press-escapewhether MessageBox can be closed by pressing the ESCbooleantrue (false when called with alert)
close-on-hash-changewhether to close MessageBox when hash changesbooleantrue
show-inputwhether to show an inputbooleanfalse (true when called with prompt)
input-placeholderplaceholder of inputstring
input-typetype of inputstringtext
input-valueinitial value of inputstring
input-patternregexp for the inputregexp
input-validatorvalidation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessagefunction
input-error-messageerror message when validation failsstringIllegal input
centerwhether to align the content in centerbooleanfalse
draggablewhether MessageBox is draggablebooleanfalse
round-buttonwhether to use round buttonbooleanfalse
button-sizecustom size of confirm and cancel buttonsstringsmall / default / largedefault
append-toset the root element for the message boxstring | HTMLElement