Alert dialog

Shows a alert dialog component.

Examples

Basic alert dialog

Code

<template>
  <AlertDialog
    title="Are you absolutely sure?"
    description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
    @confirm="confirm"
  >
    <template #trigger>
      <Button>Show alert</Button>
    </template>
  </AlertDialog>
</template>

<script setup lang="ts">
import { AlertDialog } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

const confirm = () => {
  alert('Action confirmed!')
}
</script>

Show alert dialog programmatically

Code

<template>
  <Button @click="confirm({ title: 'Are you sure?', description: 'Are you really, really sure?', onConfirm: () => action() })">
    Show alert
  </Button>
  <AlertDialogProvider />
</template>

<script setup lang="ts">
import { useAlertDialog, AlertDialogProvider } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

const { confirm } = useAlertDialog()
const action = () => {
  alert('Action confirmed!')
}
</script>