Alert Dialog
A modal dialog that interrupts the user and requires an explicit response before it can be dismissed. Use for destructive confirmations, irreversible actions, and critical decision points where accidental dismissal must be prevented.
Default
A basic
AlertDialog with a trigger, title, description, and two action buttons. Unlike a regular Dialog, the alert dialog cannot be dismissed by clicking outside or pressing Escape, ensuring the user must choose an action. Wrap buttons in AlertDialogCancel and AlertDialogAction to wire up automatic close behavior.Destructive Action
Use
ButtonVariant.Destructive on the action button to clearly communicate that the operation is dangerous or irreversible. The red visual styling draws attention to the severity of the action, while the cancel button provides a safe exit path.Controlled
Use
@bind-Open to programmatically control the alert dialog state. This pattern is useful when the dialog needs to be triggered by an event other than a button click, such as after detecting an error or when navigating away from unsaved changes.Custom Variant
Use the
Class parameter on AlertDialogContent to apply custom Tailwind CSS for project-specific styling. This example uses a gradient border and custom background to create a branded warning dialog that stands out from standard confirmations.Delete Confirmation Pattern
A real-world pattern for a data table row delete action. The alert dialog is triggered from a dropdown menu item, uses controlled state to manage the flow, and handles the deletion with a callback. This composition shows how
AlertDialog integrates with other components in a typical CRUD interface.