This will permanently delete My Awesome Project and all of its data. This action cannot be undone.
{body}
{placement === "auto" ? "Automatically positions at the bottom on mobile and center on desktop for optimal user experience." : `This dialog is positioned at the ${placement} of the viewport. Critical confirmations are typically centered for maximum attention.`}
{variant === "opaque" ? "An opaque dark backdrop that completely obscures the background, providing maximum focus on the dialog." : variant === "blur" ? "A blurred backdrop that softly obscures the background while maintaining visual context." : "A transparent backdrop that keeps the background fully visible, useful for less critical confirmations."}
{size === "cover" ? (
<>
This alert dialog uses the cover size variant. It spans the
full screen with margins: 16px on mobile and 40px on desktop. Maintains
rounded corners and standard padding. Perfect for critical confirmations
that need maximum width while preserving alert dialog aesthetics.
) : (
<>
This alert dialog uses the {size} size variant. On mobile
devices, all sizes adapt to near full-width for optimal viewing. On desktop,
each size provides a different maximum width to suit various content needs.
)}
We'll send a password reset link to your email address. You'll need to create a new password to regain access to your account.
This action cannot be undone. All your data, settings, and content will be permanently removed from our servers. The dramatic red backdrop emphasizes the severity and irreversibility of this decision.
Controls whether the alert dialog can be dismissed by clicking the overlay backdrop. Alert
dialogs typically require explicit action, so this defaults to false. Set to{" "}
true for less critical confirmations.
Clicking the backdrop won't close this alert dialog
Try clicking outside this alert dialog on the overlay - it won't close. You must use the action buttons to dismiss it.
Controls whether the ESC key can dismiss the alert dialog. Alert dialogs typically require
explicit action, so this defaults to true. When set to false,
the ESC key will be enabled.
ESC key is disabled
Press ESC - nothing happens. You must use the action buttons to dismiss this alert dialog.
The simplest way to close a dialog. Add slot="close" to any Button component
within the dialog. When clicked, it will automatically close the dialog.
Click either button below - both have slot="close" and will close
the dialog automatically.
Access the close method from the Dialog's render props. This gives you full
control over when and how to close the dialog, allowing you to add custom logic before
closing.
The buttons below use the close method from render props. You
can add validation or other logic before calling{" "}
renderProps.close().
Control the alert dialog using React's useState{" "}
hook for simple state management. Perfect for basic use cases.
Status:{" "} {isOpen ? "open" : "closed"}
This alert dialog is controlled by React's useState hook. Pass{" "}
isOpen and onOpenChange props to manage the dialog state
externally.
Use the useOverlayState hook for a cleaner API
with convenient methods like open(), close(), and{" "}
toggle().
Status:{" "} {state.isOpen ? "open" : "closed"}
The useOverlayState hook provides dedicated methods for common
operations. No need to manually create callbacks—just use{" "}
state.open(), state.close(), or{" "}
state.toggle().
Delete Item
Permanently remove this item
Use AlertDialog.Trigger to create custom trigger elements beyond
standard buttons. This example shows a card-style trigger with icons and descriptive
text.
{description}
Render alert dialogs inside a custom container instead of document.body
Apply transform: translateZ(0) to the
container to create a new stacking context.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This alert dialog has custom styling applied via Tailwind classes