Message Box

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

TIP

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

Alert interrupts user operation until the user confirms.

Confirm

Confirm is used to ask users' confirmation.

Prompt

Prompt is used when user input is required.

Use VNode

message can be VNode.

Customization

Can be customized to show various content.

Use HTML String

message supports HTML string.

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.

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).

Draggable

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.

API

Options

Name	Description	Type	Default
autofocus	auto focus when open MessageBox	`boolean`	true
title	title of the MessageBox	`string`	''
message	content of the MessageBox	`string` / `VNode` / `Function` 2.2.17	—
dangerouslyUseHTMLString	whether `message` is treated as HTML string	`boolean`	false
type	message type, used for icon display	`enum`	''
icon	custom icon component, overrides `type`	`string` / `Component`	''
custom-class	custom class name for MessageBox	`string`	''
custom-style	custom inline style for MessageBox	`CSSProperties`	{}
callback	MessageBox closing callback if you don't prefer Promise	`Function`	null
showClose	whether to show close icon of MessageBox	`boolean`	true
before-close	callback before MessageBox closes, and it will prevent MessageBox from closing	`Function`	null
distinguish-cancel-and-close	whether to distinguish canceling and closing the MessageBox	`boolean`	false
lock-scroll	whether to lock body scroll when MessageBox prompts	`boolean`	true
show-cancel-button	whether to show a cancel button	`boolean`	false (true when called with confirm and prompt)
show-confirm-button	whether to show a confirm button	`boolean`	true
cancel-button-text	text content of cancel button	`string`	Cancel
confirm-button-text	text content of confirm button	`string`	OK
cancel-button-class	custom class name of cancel button	`string`	''
confirm-button-class	custom class name of confirm button	`string`	''
close-on-click-modal	whether MessageBox can be closed by clicking the mask	`boolean`	true (false when called with alert)
close-on-press-escape	whether MessageBox can be closed by pressing the ESC	`boolean`	true (false when called with alert)
close-on-hash-change	whether to close MessageBox when hash changes	`boolean`	true
show-input	whether to show an input	`boolean`	false (true when called with prompt)
input-placeholder	placeholder of input	`string`	''
input-type	type of input	`string`	text
input-value	initial value of input	`string`	null
input-pattern	regexp for the input	`regexp`	null
input-validator	validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage	`Function`	null
input-error-message	error message when validation fails	`string`	Illegal input
center	whether to align the content in center	`boolean`	false
draggable	whether MessageBox is draggable	`boolean`	false
overflow 2.5.4	draggable MessageBox can overflow the viewport	`boolean`	false
round-button	whether to use round button	`boolean`	false
button-size	custom size of confirm and cancel buttons	`string`	default
append-to 2.2.19	set the root element for the message box	`string` / `HTMLElement`	—

Source

Component • Docs

Contributors

Message

Notification

Message Box #

Alert #

Confirm #

Prompt #

Use VNode #

Customization #

Use HTML String #

Distinguishing cancel and close #

Centered content #

Customized Icon #

Draggable #

Global method #

App context inheritance > 2.0.4 #

Local import #

API #

Options #

Source #

Contributors #