Components

Alert Dialog

Headless confirmation dialog primitive that interrupts the user with a required action or cancel.

Overview

AlertDialog is Dialog with role="alertdialog" preset. The role announces alert-dialog semantics and makes the dialog undismissable by an outside tap, so the user must choose an explicit action or cancel. Use it for destructive or irreversible confirmations.

Every part except AlertDialogRoot is a name alias over the Dialog primitive of the same shape, so <Dialog role="alertdialog"> is equivalent.

This is a layer of @vyui/core, behavior only and no styles. Compose it when you need a custom-styled confirmation flow.

Anatomy

<AlertDialogRoot>
  <AlertDialogTrigger />
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogContent>
      <AlertDialogTitle />
      <AlertDialogDescription />
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialogRoot>

Usage

<script setup lang="ts">
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@vyui/core'
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger>
      <text>Delete project</text>
    </AlertDialogTrigger>

    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogContent>
        <AlertDialogTitle>
          <text>Delete this project?</text>
        </AlertDialogTitle>
        <AlertDialogDescription>
          <text>This action cannot be undone.</text>
        </AlertDialogDescription>
        <AlertDialogCancel>
          <text>Cancel</text>
        </AlertDialogCancel>
        <AlertDialogAction>
          <text>Delete</text>
        </AlertDialogAction>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

Features and behavior

Modal by default: the overlay blocks interaction with everything behind it and is not tap-to-dismiss.
open / v-model:open controls visibility; defaultOpen seeds uncontrolled state.
AlertDialogAction emits click then closes; AlertDialogCancel closes without acting. Both alias DialogClose.

API

`AlertDialogRoot`

Prop	Default	Type
`defaultOpen`	`false`	`boolean \| undefined` The open state of the alert dialog when it is initially rendered. Use when you do not need to control its open state.
`open`	`undefined`	`boolean \| undefined` The controlled open state of the alert dialog. Can be bound with `v-model`.

Event	Payload
`update:open`	`[value: boolean]`

`AlertDialogContent`

Aliases DialogContent.

Prop	Default	Type
`as`	—	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Render through the passed child element instead of the default one, merging their props and behavior while keeping the primitive's.
`backdropClass`	—	`string \| undefined` Class merged onto the full-screen backdrop wrapper (the `OverlayBackdrop` that centers the panel). Core ships no dim or animation of its own; the element carries the Presence lifecycle classes and `bindanimation*` hooks, so the styled layer's keyframes drive the lifecycle just like the panel's.
`backdropStyle`	—	`Record<string, any> \| undefined` Style applied to the full-screen backdrop wrapper. No defaults — pass `backgroundColor`, alignment, etc. here for the modal dim/centering.
`debugLog`	—	`boolean \| undefined` Verbose lifecycle tracing — forwarded to both backdrop + panel Presence.
`transition`	—	`boolean \| undefined` Opt the backdrop / panel into the animating-state classes (`ui-entering` / `ui-leaving` / `ui-animating` alongside `ui-open` / `ui-closed`). Off for callers that don't style transitions.

Event	Payload
`interactOutside`	`[event: DismissableLayerEvent]`
`pointerDownOutside`	`[event: DismissableLayerEvent]`

`AlertDialogAction` / `AlertDialogCancel`

Both alias DialogClose.

Prop	Default	Type
`as`	`"view"`	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Render through the passed child element instead of the default one, merging their props and behavior while keeping the primitive's.

No emitted events.

Accessibility

Announced with native alert-dialog semantics; include both AlertDialogTitle and AlertDialogDescription.
The content confines assistive tech via accessibility-exclusive-focus while open.
The dialog cannot be dismissed implicitly; only AlertDialogAction or AlertDialogCancel close it.

Dialog is the general, dismissible dialog primitive.
Modal is the styled @vyui/kit dialog.

Alert

Highlight important status, guidance, or feedback.

App

The recommended app-root wrapper, which owns dark mode, mounts the overlay host, and reports viewport size.