Props

Name	Type	Default	Description
isOpen	boolean	-	Whether the dialog is open. Required. The dialog never closes itself: a dismissal request arrives through openChange.
isInline	boolean	false	Renders the surface in normal flow without the <dialog> element, the backdrop, or focus behavior. For documentation previews only. Because it is not modal, the root element uses role="group" instead.
title	string	-	The question being asked. It renders as a level-2 heading and names the dialog through aria-labelledby. Required.
description	string	-	What happens if the user confirms. Linked to the dialog through aria-describedby. Required.
cancelLabel	string	'Cancel'	Label for the cancel button, rendered as a ghost button. Clicking it emits openChange(false).
actionLabel	string	-	Label for the confirming action. Say what will happen, such as "Delete project". Required.
actionVariant	AlertDialogActionVariant	'destructive'	Visual style of the confirming action, using the Button variants: destructive, primary, secondary, or ghost.
isActionLoading	boolean	false	Shows a spinner on the confirming action and marks it aria-busy. Cancel stays available and the dialog stays open until the work settles.
width	number | string	400	Preferred width. Numbers are pixels, strings are used as-is. Dialog clamps it to the container and the dynamic viewport.

Events and template refs

Name	Signature	Description
openChange	(isOpen: boolean) => void	Fires with false when the user cancels, through the cancel button or Escape. The parent decides whether to close; a backdrop click and the confirm action never fire it.
action	(event: MouseEvent) => void	Fires when the confirming action is activated. The dialog does not close itself, so close it once the work is done.
element	HTMLElement | null	The root element — a <dialog> in the modal case, a <div> in the inline preview — exposed through a template ref.
focus, blur	() => void	Move focus into or out of the root element.

Slots

Name	Description
title	Title content, replacing the title prop. The element that carries it keeps the id the dialog is named after.
description	Description content, replacing the description prop. It keeps the id that aria-describedby points at.
actions	Extra content in the footer, before the cancel and confirm buttons, such as a link to the guide.

useImperativeAlertDialog

• show(options): opens the dialog with the given options — every prop except isOpen, plus an onAction callback.
• hide(): closes the dialog.
• isOpen: the open state, as a writable ref.
• Host: component to render once in the template.

Native attributes

The root element is a <dialog> in the modal case and a <div> in the inline preview.

The following go to the root element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

The component maintains role, aria-modal, aria-labelledby, and aria-describedby itself, so those keep the values it derives.