Components / Overlays

AlertDialog

A confirmation modal that initially focuses its cancel action.

Preview

Install

Run in your project

npx @getweini/cli@latest add alert-dialog

Use cases

Confirm deletion

Ask for an explicit decision before removing data that cannot be recovered.

Confirm broad changes

Explain the scope of a high-impact update before applying it.

Usage example

Vue

<AlertDialog>
  <AlertDialogTrigger>Delete project</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <template #icon><WarningIcon aria-hidden="true" /></template>
      <AlertDialogTitle>Delete “Aurora launch”?</AlertDialogTitle>
      <AlertDialogDescription>
        This permanently removes its tasks and files. This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogBody><!-- project summary --></AlertDialogBody>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete project</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

More examples

Delete a project

Cancel receives initial focus.

Delete a project

<script setup lang="ts">
import AlertDialog from './components/ui/alert-dialog/AlertDialog.vue'
import AlertDialogTrigger from './components/ui/alert-dialog/AlertDialogTrigger.vue'
import AlertDialogContent from './components/ui/alert-dialog/AlertDialogContent.vue'
import AlertDialogHeader from './components/ui/alert-dialog/AlertDialogHeader.vue'
import AlertDialogTitle from './components/ui/alert-dialog/AlertDialogTitle.vue'
import AlertDialogDescription from './components/ui/alert-dialog/AlertDialogDescription.vue'
import AlertDialogFooter from './components/ui/alert-dialog/AlertDialogFooter.vue'
import AlertDialogCancel from './components/ui/alert-dialog/AlertDialogCancel.vue'
import AlertDialogAction from './components/ui/alert-dialog/AlertDialogAction.vue'
</script>
<template>
  <AlertDialog>
    <AlertDialogTrigger>Delete project</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader><AlertDialogTitle>Delete this project?</AlertDialogTitle><AlertDialogDescription>The project and its files will be removed.</AlertDialogDescription></AlertDialogHeader>
      <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction @click="$emit('delete')">Delete project</AlertDialogAction></AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

Confirm bulk update

Use controlled state when the parent coordinates the operation.

Confirm bulk update

<script setup lang="ts">
import { ref } from 'vue'
import AlertDialog from './components/ui/alert-dialog/AlertDialog.vue'
import AlertDialogTrigger from './components/ui/alert-dialog/AlertDialogTrigger.vue'
import AlertDialogContent from './components/ui/alert-dialog/AlertDialogContent.vue'
import AlertDialogHeader from './components/ui/alert-dialog/AlertDialogHeader.vue'
import AlertDialogTitle from './components/ui/alert-dialog/AlertDialogTitle.vue'
import AlertDialogDescription from './components/ui/alert-dialog/AlertDialogDescription.vue'
import AlertDialogFooter from './components/ui/alert-dialog/AlertDialogFooter.vue'
import AlertDialogCancel from './components/ui/alert-dialog/AlertDialogCancel.vue'
import AlertDialogAction from './components/ui/alert-dialog/AlertDialogAction.vue'
const open = ref(false)
</script>
<template>
  <AlertDialog v-model:open="open">
    <AlertDialogTrigger>Publish all</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader><AlertDialogTitle>Publish all drafts?</AlertDialogTitle><AlertDialogDescription>Every draft will become visible to your team.</AlertDialogDescription></AlertDialogHeader>
      <AlertDialogFooter><AlertDialogCancel>Keep drafts</AlertDialogCancel><AlertDialogAction @click="$emit('publish')">Publish all</AlertDialogAction></AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for AlertDialog
Name	Type	Default or requirement
`v-model:open / defaultOpen`	boolean	false
`AlertDialogContent fullscreen`	boolean	false
`AlertDialogContent size`	sm \| md \| lg \| xl	md

Clicking the backdrop does not dismiss an alert dialog. Use AlertDialogHeader’s #icon slot to place an icon beside the title. The body scrolls when content is long, and focus starts on Cancel.

Implementation notes

AlertDialogAction and AlertDialogCancel close the surface; application code performs the actual operation.
Backdrop dismissal is disabled by default so an accidental click does not confirm or discard the decision.

Accessibility and localization

Explain the consequence in the title and description, including any icon meaning.
The cancel control receives initial focus and Escape returns focus to the trigger.