Dialog

Maps to Arco Modal with a left-aligned title by default; center aligns the title and footer controls. See the Element Plus docs for props.

Basic Dialog

Open the dialog with a button and close it with cancel, confirm or the close control.

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <el-button type="primary" @click="open = true">Open dialog</el-button>
  <el-dialog v-model="open" title="Project settings" >
    Review the changes before continuing.
    <template #footer>
      <el-button @click="open = false">Cancel</el-button>
      <el-button type="primary" @click="open = false">Confirm</el-button>
    </template>
  </el-dialog>
</template>

Centered Dialog

Combine center and align-center to center the title, actions and dialog.

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <el-button type="primary" @click="open = true">Open centered dialog</el-button>
  <el-dialog v-model="open" title="Project settings" center align-center>
    Review the changes before continuing.
    <template #footer>
      <el-button @click="open = false">Cancel</el-button>
      <el-button type="primary" @click="open = false">Confirm</el-button>
    </template>
  </el-dialog>
</template>

Differences from Arco

• Element Plus's default top offset remains; align-center provides Arco's vertical centering.