---
title: "MazDialogConfirm"
description: "MazDialogConfirm is a standalone component that dialogs with the user to show important information and propose confirmation. You should wait for this response with await."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-dialog-confirm"
---

# MazDialogConfirm

> MazDialogConfirm is a standalone component that dialogs with the user to show important information and propose confirmation. You should wait for this response with await.

- Package: `maz-ui`
- Import: `import MazDialogConfirm from 'maz-ui/components/MazDialogConfirm'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-dialog-confirm

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

**Note:**

This component uses [MazDialog](./maz-dialog.md), so it inherits all its props

**Tip:**

This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props

## Basic usage

```vue
<script setup>
import MazDialogConfirm, { useMazDialogConfirm } from 'maz-ui/components/MazDialogConfirm'
import MazDialog from 'maz-ui/components/MazDialog'

import { ref } from 'vue'

const confirmDialog = ref(false)

const { showDialogAndWaitChoice, data } = useMazDialogConfirm()

data.value = {
  title: 'Delete user',
  message: 'Are you sure you want to delete this user?',
}

const buttons: DialogCustomButton[] = [
  {
    text: 'Cancel',
    type: 'reject',
    color: 'destructive',
    outlined: true,
    response: 'cancel',
    size: 'sm',
  },
  {
    text: 'Delete!',
    type: 'resolve',
    color: 'success',
    response: 'delete',
    size: 'lg',
  },
]

async function askToUser() {
  try {
    const acceptResponse = await showDialogAndWaitChoice('one')
    toast.success(acceptResponse, {
      position: 'top-right'
    })
    const rejectResponse = await showDialogAndWaitChoice('two')
    toast.success(rejectResponse, {
      position: 'top-right'
    })
    confirmDialog.value = true
  }
  catch (rejectResponse) {
    toast.error(rejectResponse, {
      position: 'top-right'
    })
  }
}
</script>

<template>
  <MazBtn @click="askToUser">
    Ask user
  </MazBtn>

  <MazDialogConfirm
    :data="dataPromiseOne"
    identifier="one"
  />

  <MazDialogConfirm identifier="two" :buttons="buttons">
    <template #title>
      Do you really want to delete this user?
    </template>
    <template #default>
      Are you really sure you want to delete this user?
    </template>
  </MazDialogConfirm>

  <MazDialog v-model="confirmDialog">
    <template #title>
      User deleted
    </template>
    <template #default>
      User has been deleted!
    </template>
    <template #footer="{ close }">
      <MazBtn @click="close">
        Ok
      </MazBtn>
    </template>
  </MazDialog>
</template>
```

## Types

```ts
interface MazDialogConfirmData {
  /**
   * Dialog title
   */
  title?: string
  /**
   * Dialog message
   */
  message?: string
  /**
   * Dialog custom buttons
   * @default [{ text: 'Confirm', color: 'success', type: 'accept' }, { text: 'Cancel', color: 'destructive', type: 'reject' }]
   * @type {MazDialogConfirmButton[]}
   */
  buttons?: MazDialogConfirmButton[]
}

// All props of MazBtn
interface MazDialogConfirmButton {
  text?: string
  block?: boolean
  color?: Color
  disabled?: boolean
  loading?: boolean
  outlined?: boolean
  rounded?: boolean
  size?: Size
  text: string
  type: 'accept' | 'reject'
  response?: unknown
}

type Color = 'primary'
    | 'secondary'
    | 'info'
    | 'success'
    | 'warning'
    | 'destructive'
    | 'accent'
    | 'contrast'
    | 'transparent'

type Size = 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
```

## MazDialogConfirm API

`import MazDialogConfirm from 'maz-ui/components/MazDialogConfirm'`

### Props

- `identifier` (`string`, required): Uniq identifier of the dialog - This is used to identify the dialog in the state.
- `title` (`string`): Dialog title displayed in the header Title of the modal in header.
- `message` (`string`): Dialog message displayed in the body.
- `reject-text` (`string`): Text for the reject button - will be applied only if buttons props is not provided.
- `reject-props` (`(Omit<MazBtnProps, "type"> & MazDialogConfirmButton)`, default: `{ color: 'destructive', type: 'reject', text: 'Cancel', response: 'reject' }`): Props for the reject button - will be applied only if buttons props is not provided.
- `hide-reject-button` (`boolean`, default: `false`): Hide the reject button (unset: the value of `useMazDialogConfirm().data`, else shown).
- `accept-text` (`string`): Text for the accept button.
- `accept-props` (`(Omit<MazBtnProps, "type"> & MazDialogConfirmButton)`, default: `{ color: 'success', type: 'accept', text: 'Confirm', response: 'accept' }`): Props for the accept button - will be applied only if buttons props is not provided.
- `hide-accept-button` (`boolean`, default: `false`): Hide the accept button (unset: the value of `useMazDialogConfirm().data`, else shown).
- `buttons` (`MazDialogConfirmButton[]`): Buttons to display in the footer.
- `model-value` (`boolean`): Modal's model value.
- `hide-close-button` (`boolean`): Remove the close button in header.
- `max-width` (`string`, default: `` Theme preset `components.dialog.max-width` via `var(--maz-dialog-max-width, 38rem)` ``): Modal's max-width.
- `min-width` (`string`, default: `` Theme preset `components.dialog.min-width` via `var(--maz-dialog-min-width, 32rem)` ``): Modal's min-width.
- `scrollable` (`boolean`): Modal's content becomes scrollable - warning: a overflow is applied.
- `persistent` (`boolean`): Persistent dialog (not closable by clicking outside and remove close button).
- `teleport-selector` (`string`): Teleport selector.
- `before-close` (`(() => void | Promise<void>)`): Function called before modal is close.
- `close-on-escape` (`boolean`, default: `true`): Prevent close on escape key.
- `transition-name` (`string`): Transition name.
- `backdrop-class` (`ClassValue`): Backdrop class.
- `backdrop-content-class` (`ClassValue`): Backdrop content class.
- `content-padding` (`boolean`): Add padding to the content.
- `justify` (`"none" | "center" | "end" | "start" | "space-between" | "space-around"`): Justify content.
- `align` (`"none" | "center" | "end" | "start"`): Align content.
- `variant` (`"bottom-sheet" | "dialog" | "drawer"`): Variant.
- `aria-labelledby` (`string`): ID for aria-labelledby.
- `aria-describedby` (`string`): ID for aria-describedby.

### Events

- `@open` (payload: `value?: void | undefined`): Emitted when modal is open
- `@close` (payload: `value?: void | undefined`): Emitted when modal is close

### Slots

- `#title`: title slot - Place your title
- `#default`: Default slot - Place your content Bindings: `accept: (reason?: unknown) => Promise<unknown>` (accept function), `reject: (reason?: unknown) => Promise<unknown>` (reject function).
- `#footer-button`: Footer slot Bindings: `accept: (reason?: unknown) => Promise<unknown>` (accept function), `reject: (reason?: unknown) => Promise<unknown>` (reject function).

### Exposed (template ref)

- `close`: Close the dialog
- `isActive`: Check if the dialog is active