
## Confirm

```vue
<template>
  <el-button @click="open">Show Confirm</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    'This will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning'
    }
  ).then(() => {
    console.log('Confirmed')
  }).catch(() => {
    console.log('Cancelled')
  })
}
</script>

Prompt

<template>
  <el-button @click="open">Show Prompt</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.prompt('Please input your email', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: 'Invalid Email'
  }).then(({ value }) => {
    console.log('Email:', value)
  }).catch(() => {
    console.log('Cancelled')
  })
}
</script>

Customization

<template>
  <el-button @click="open">Custom MessageBox</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox({
    title: 'Message',
    message: 'This is a custom message',
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        setTimeout(() => {
          done()
          instance.confirmButtonLoading = false
        }, 1000)
      } else {
        done()
      }
    }
  })
}
</script>

Centered

<template>
  <el-button @click="open">Centered</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    'This is a centered message',
    'Center',
    {
      center: true
    }
  )
}
</script>

Draggable

<template>
  <el-button @click="open">Draggable</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    'This is a draggable message',
    'Draggable',
    {
      draggable: true
    }
  )
}
</script>

API Reference

Methods

Method	Description	Parameters
ElMessageBox.alert	Show alert dialog	`(message, title, options)`
ElMessageBox.confirm	Show confirm dialog	`(message, title, options)`
ElMessageBox.prompt	Show prompt dialog	`(message, title, options)`
ElMessageBox.close	Close message box	—

Options

Name	Description	Type	Default
title	Title	`string`	`''`
message	Content	`string \| VNode`	—
type	Message type	`'primary' \| 'success' \| 'warning' \| 'info' \| 'error'`	—
icon	Custom icon	`string \| Component`	—
dangerouslyUseHTMLString	Render message as HTML	`boolean`	`false`
customClass	Custom class	`string`	`''`
customStyle	Custom style	`CSSProperties`	`{}`
showClose	Show close button	`boolean`	`true`
showCancelButton	Show cancel button	`boolean`	`false`
showConfirmButton	Show confirm button	`boolean`	`true`
cancelButtonText	Cancel button text	`string`	`'Cancel'`
confirmButtonText	Confirm button text	`string`	`'OK'`
cancelButtonType	Cancel button type	Button type enum	—
confirmButtonType	Confirm button type	Button type enum	`'primary'`
closeOnClickModal	Close on backdrop click	`boolean`	`true`
closeOnPressEscape	Close on ESC	`boolean`	`true`
center	Center content	`boolean`	`false`
draggable	Enable dragging	`boolean`	`false`
beforeClose	Callback before close	`(action, instance, done) => void`	—
distinguishCancelAndClose	Distinguish cancel vs close	`boolean`	`false`
inputPlaceholder	Input placeholder	`string`	`''`
inputPattern	Input validation pattern	`RegExp`	—
inputValidator	Input validator	`(value) => boolean \| string`	—
inputErrorMessage	Validation error message	`string`	`'Illegal input'`

Best Practices

Use alert for simple notifications
Use confirm for action confirmations
Use prompt for user input
Use beforeClose for async operations

el-message-box

MessageBox Component

When to Use

Alert