Components

Alert Dialog

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

Overview

AlertDialog is a headless @vyui/core primitive for a modal that interrupts the user and expects a response. Unlike Dialog, it is always modal and cannot be dismissed by clicking the overlay — the user must choose an explicit action or cancel. Use it for destructive or irreversible confirmations.

This is a layer of @vyui/core — behavior only, 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

Always modal: the overlay blocks interaction with everything behind it and is not click-to-dismiss.
open / v-model:open controls visibility; defaultOpen seeds uncontrolled state.
Focus is moved to AlertDialogCancel by default and trapped within the content while open.
AlertDialogAction confirms and closes; AlertDialogCancel dismisses without acting.

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`

Prop	Default	Type
`as`	—	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.
`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.
`forceMount`	—	`boolean \| undefined` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Event	Payload
`openAutoFocus`	`[event: any]`
`closeAutoFocus`	`[event: any]`

`AlertDialogAction`

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` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.

Event	Payload
`click`	`[]`

`AlertDialogCancel`

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` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.

Accessibility

Announced with native alert-dialog semantics; include both AlertDialogTitle and AlertDialogDescription.
Default focus lands on the cancel control so an accidental confirmation is harder.
The dialog cannot be dismissed implicitly — only AlertDialogAction or AlertDialogCancel close it.

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

Alert

Highlight important status, guidance, or feedback.

Aspect Ratio

Constrain content to a fixed width-to-height ratio.