Import
{ ( AlertDialog , AlertDialogTrigger , AlertDialogContent , AlertDialogHeader , AlertDialogFooter , AlertDialogTitle , AlertDialogDescription , AlertDialogAction , AlertDialogCancel ) }{ " " } from '@strongtie/design-system/alert-dialog' ; ``` </Step> <Step title="Usage"> ``` jsx < AlertDialog > < AlertDialogTrigger asChild > < Button variant = "destructive" > Delete Account </ Button > </ AlertDialogTrigger > < AlertDialogContent > < AlertDialogHeader > < AlertDialogTitle > Are you absolutely sure? </ AlertDialogTitle > < AlertDialogDescription > This action cannot be undone. This will permanently delete your account and remove your data from our servers. </ AlertDialogDescription > </ AlertDialogHeader > < AlertDialogFooter > < AlertDialogCancel > Cancel </ AlertDialogCancel > < AlertDialogAction > Delete Account </ AlertDialogAction > </ AlertDialogFooter > </ AlertDialogContent > </ AlertDialog > <AlertDialog> PropsThe controlled open state of the dialog.
The open state of the dialog when initially rendered.
Event handler called when the open state changes.
<AlertDialogContent> PropsEvent handler called when focus moves into the component after opening.
Event handler called when focus moves to the trigger after closing.
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down.
<AlertDialogTrigger>, <AlertDialogAction>, <AlertDialogCancel> PropsChange the default rendered element for the one passed as a child, merging
their props and behavior.
Usage Examples Basic
Destructive Action
Controlled
Custom Actions
With Custom Styling
< AlertDialog > < AlertDialogTrigger asChild > < Button variant = "outline" > Show Dialog </ Button > </ AlertDialogTrigger > < AlertDialogContent > < AlertDialogHeader > < AlertDialogTitle > Are you absolutely sure? </ AlertDialogTitle > < AlertDialogDescription > This action cannot be undone. </ AlertDialogDescription > </ AlertDialogHeader > < AlertDialogFooter > < AlertDialogCancel > Cancel </ AlertDialogCancel > < AlertDialogAction > Continue </ AlertDialogAction > </ AlertDialogFooter > </ AlertDialogContent > </ AlertDialog >
Styling Classes The following CSS classes are applied by the Alert Dialog components:
alert-dialog-overlay – The backdrop overlay that covers the screen.alert-dialog-content – The main dialog container.alert-dialog-header – Header section wrapper.alert-dialog-footer – Footer section wrapper with action buttons.alert-dialog-title – The dialog title styling.alert-dialog-description – The dialog description text styling. Accessibility The Alert Dialog component follows WAI-ARIA guidelines:
Focus Management: Focus is automatically trapped within the dialog and restored to the trigger when closed.Keyboard Navigation: Supports Escape key to close and Tab navigation between focusable elements.Screen Readers: Proper ARIA attributes are applied for title, description, and role announcements.No Auto-Dismiss: Unlike regular dialogs, alert dialogs cannot be dismissed by clicking outside or pressing escape without explicit user action. For more examples, visit the Storybook . 