Popconfirm

Matches Arco Popconfirm with small action buttons and a status icon. See the Element Plus docs for props.

Click Confirmation

Click Delete to open the confirmation; confirm and cancel update the status.

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

<template>
  <el-popconfirm title="Delete this project?" confirm-button-text="Delete" cancel-button-text="Cancel" @confirm="status = 'Deleted'" @cancel="status = 'Cancelled'">
    <template #reference><el-button type="danger">Delete</el-button></template>
  </el-popconfirm>
  <el-text aria-live="polite">{{ status }}</el-text>
</template>

Differences from Arco

• The default question-mark icon differs from Arco's information icon.
• Cancel defaults to Element Plus's text style; cancel-button-type="default" gives it a neutral fill.