---
title: "useDialog"
description: "Vue composable for handling dialog plugin in your components"
package: "maz-ui"
url: "https://maz-ui.com/composables/use-dialog"
---

# useDialog

> Vue composable for handling dialog plugin in your components

- Package: `maz-ui`
- Import: `import { useDialog } from 'maz-ui/composables/useDialog'`
- Nuxt: auto-imported by `@maz-ui/nuxt` when `mazUi.plugins.dialog` is enabled
- Web: https://maz-ui.com/composables/use-dialog

**Warning:**

You must install [dialog plugin](../plugins/dialog.md#install) before use it

**Tip:**

More info about [dialog plugin](../plugins/dialog.md) in its documentation

## Usage

```vue
<script lang="ts" setup>
import { useDialog } from 'maz-ui/composables/useDialog'
import { useToast } from 'maz-ui/composables/useToast'

const dialog = useDialog()

const toast = useToast()

function openDialog() {
  dialog.open({
    title: 'Dialog title',
    message: 'Dialog message',
    onAccept: (response) => {
      toast.success(`Dialog accepted`, {
        position: 'bottom',
      })
    },
    onReject: (response) => {
      toast.error(`Dialog rejected`, {
        position: 'bottom',
      })
    },
  })
}
</script>

<template>
  <MazBtn @click="openDialog">
    Open Dialog
  </MazBtn>
</template>
```