AlertDialog

AlertDialog is a focus-trapped modal that demands user attention and requires explicit action (confirm or cancel). It is stricter than a regular Dialog: clicking outside or pressing Escape will not dismiss it. The cancel button receives focus by default.

Usage

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from '@loke/ui/alert-dialog';

export default function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <button>Delete Account</button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Delete Account?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone. Your account and all data will be permanently deleted.
        </AlertDialogDescription>
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Delete</AlertDialogAction>
        </div>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Sub-components

• AlertDialogTrigger — Button or element that opens the alert dialog
• AlertDialogPortal — Renders the dialog in a portal (required for proper stacking)
• AlertDialogOverlay — Backdrop overlay (semi-transparent)
• AlertDialogContent — Dialog container; prevents outside click and Escape from closing
• AlertDialogTitle — Accessible title of the alert
• AlertDialogDescription — Description text
• AlertDialogCancel — Cancel button (receives focus by default)
• AlertDialogAction — Confirm/action button

Props

Examples

Basic alert dialog

Controlled alert dialog

Accessibility

• Focus is automatically trapped within the dialog; Tab cycles through focusable elements.
• The cancel button receives focus when the dialog opens.
• Escape key does NOT close the dialog (user must click Cancel or Action).
• Outside clicks are prevented; user must interact with a button.
• Dialog has role="alertdialog" and aria-labelledby pointing to the title.
• Description is associated via aria-describedby.

Best practices

• Use for destructive actions: "Delete", "Discard", "Clear all".
• Keep the message concise and actionable.
• Label buttons clearly: "Delete", "Confirm", "Cancel" rather than "OK" / "No".
• Always include a cancel option so users can reconsider.