Modal dialog for critical confirmations with focus management and accessible semantics.

Alert Dialog

Alert Dialog is a focused, modal confirmation dialog used for high‑stakes actions (delete, sign‑out, irreversible changes). It traps focus, prevents background interaction, and guides users to a clear primary action or a safe cancel.

Use Alert Dialog only when a decision is required before continuing. For inline feedback that doesn’t block interaction, use Alert.

Features

Modal and focus‑managed by default (no background interaction)
Accessible semantics (role="alertdialog") with required description
Clear action structure with primary Action and secondary Cancel
Keyboard support: Esc to close, focus trapped within dialog
Composable pieces: Trigger, Content, Header, Footer, Title, Description, Action, Cancel
Theming with className or by composing with Button styles

Usage

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

export default function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Delete account</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 className={buttonVariants({ variant: 'destructive' })}>
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Tips:

Always include a concise Title and meaningful Description (required for accessibility).
Make the primary Action explicit (e.g. “Delete”, “Sign out”) and the Cancel safe.
Prefer buttonVariants to style actions consistently with Buttons.

Props

AlertDialog

Prop

Type

AlertDialogTrigger

Prop

Type

AlertDialogContent

Prop

Type

Structure helpers

Prop

Type

Title and Description

Prop

Type

Cancel and Action

Prop

Type

Examples

Default

<AlertDialog>
  <AlertDialogTrigger>Open Alert Dialog</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>…</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction className={buttonVariants({ variant: 'destructive' })}>
        Continue
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Destructive confirm

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="destructive">Delete project…</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    {/* header, title, description */}
    {/* footer with cancel and destructive action */}
  </AlertDialogContent>
</AlertDialog>

Custom styling

<AlertDialog>
  <AlertDialogTrigger>Open custom dialog</AlertDialogTrigger>
  <AlertDialogContent className="border-2 border-blue-500">…</AlertDialogContent>
</AlertDialog>

With form elements

<AlertDialog>
  <AlertDialogTrigger>Open form dialog</AlertDialogTrigger>
  <AlertDialogContent>
    {/* Title + Description */}
    <form className="space-y-3">{/* fields */}</form>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Submit</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Trigger asChild

Use asChild on the trigger to style and render your own element without extra DOM.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Open</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>…</AlertDialogContent>
</AlertDialog>

Accessibility

Uses role="alertdialog" to indicate a high‑priority, attention‑demanding modal.
Focus is trapped inside the dialog while open; Esc closes it.
The initial focus moves to Cancel for a safe default.
A Description is required so screen readers have sufficient context (a dev warning is shown in development if missing).
Background interaction is blocked and the overlay provides visual separation.

Best practices

Keep the title short and the description specific about consequences.
Make destructive actions visually distinct and secondary actions safe.
Don’t overload the dialog—focus on one clear decision.
Prefer inline alternatives (e.g. Alert) when a modal is not required.
Ensure keyboard access: triggers must be focusable, actions reachable, and Esc must close.

Alert Dialog

On this page