Alert Dialog
A headless alert dialog primitive that requires explicit user acknowledgement. Cannot be dismissed by clicking the overlay or pressing Escape.
Basic
A basic alert dialog with trigger, overlay, content, title, description, and action/cancel buttons. Unlike a regular dialog, it cannot be dismissed by clicking the overlay or pressing Escape.
Controlled
Control the alert dialog state externally using
@bind-Open. The parent component manages the Open parameter and receives updates via OpenChanged.
Open: False
Destructive Confirmation
A destructive confirmation pattern with a red action button. Common for irreversible actions like deleting resources.
Data Attributes
Use these data attributes for CSS styling:
[data-state="open"]- When the alert dialog is open[data-state="closed"]- When the alert dialog is closed