Confirm Dialog

ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.

Service

CConfirmDialog is controlled via the ConfirmationService that needs to be installed as an application plugin.

import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';

const app = createApp(App);
app.use(ConfirmationService);

Recommended location of the CConfirmDialog is the main application template so that the component can be accessed in a shared manner.

<template>
  <ConfirmDialog/>
</template>

The useConfirm composable is used to interact with the component.

<script setup lang="ts">
  import {useConfirm} from "primevue/useconfirm";

  const confirm = useConfirm();
</script>

Basic

CConfirmDialog is displayed by calling the require method of the $confirm instance by passing the options to customize the Dialog.

<template>
  <CButton @click="confirmSave()" label="Save"/>
</template>

<script setup lang="ts">
  import {useConfirm} from 'primevue/useconfirm';
  import {useToast} from 'primevue/usetoast';
  

  const confirm = useConfirm();
  const toast = useToast();

  const confirmSave = () => {
    confirm.require({
      message: 'Are you sure you want to proceed?',
      header: 'Confirmation',
      accept: () => {
        toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
      },
      reject: () => {
        toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
      },
    });
  };
</script>

Custom Buttons

Buttons Label

You can customize the labels of the buttons using the acceptLabel and rejectLabel properties.

Buttons Icons

You can add icons to the buttons using the acceptIcon and rejectIcon properties.

Buttons Props

You can pass additional properties to the buttons using the acceptProps and rejectProps properties.

<template>
  <CButton @click="confirmDelete()" label="Save"/>
</template>

<script setup lang="ts">
  import {useConfirm} from 'primevue/useconfirm';
  import {useToast} from 'primevue/usetoast';
  import { PrimeIcons } from '@primevue/core/api';
  

  const confirm = useConfirm();
  const toast = useToast();

  const confirmDelete = () => {
    confirm.require({
      message: 'Are you sure you want to delete the account?',
      header: 'Delete Account',
      rejectLabel: 'Back to safety',
      rejectIcon: PrimeIcons.CHEVRON_LEFT,
      rejectProps: {
        severity: 'success',
        outlined: true
      },
      acceptLabel: 'Yes, I am sure',
      acceptIcon: PrimeIcons.TRASH,
      acceptProps: {
        severity: 'error',
      },
    });
  };
</script>