AlertDialog

A modal that interrupts to confirm something consequential: delete, revoke, overwrite.

Not a Dialog variant and not a styling choice. Radix enforces different behaviour, and that behaviour is the reason to use it.

Live Examples

Live Example

☀️

Copy

View Code

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, Button } from '@jarllyng/nostromo' export default function AlertDialogExample() { return ( <AlertDialog> <AlertDialogTrigger asChild> <Button variant="destructive">Delete project</Button> </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader>...

A confirmation that is not destructive

Live Example

☀️

Copy

View Code

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, Button } from '@jarllyng/nostromo' export default function AlertDialogPublish() { return ( <AlertDialog> <AlertDialogTrigger asChild> <Button>Publish</Button> </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader>...

What it does differently

Behaviour	Dialog	AlertDialog
Role	`dialog`	`alertdialog`
Click outside	closes	does nothing
Escape	closes	closes
Initial focus	first focusable	the Cancel button

Clicking outside does nothing, so a confirmation cannot be lost by missing the button. Focus starts on Cancel, so a reflexive Enter cancels rather than deletes.

Escape does close it, and that is correct rather than a gap: a modal a keyboard user cannot leave is a trap, and cancelling is the safe outcome here so nothing is lost by it.

Import


import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogAction,
  AlertDialogCancel,
} from "@jarllyng/nostromo";

Props

AlertDialogAction

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"destructive"`	Button styling

The default is destructive because most confirmations are. Pass variant="default" when the action is not.

AlertDialogTitle and AlertDialogDescription supply the accessible name and description. Both are worth writing: the title says what will happen, the description says what it costs.

Dialog when the user opened it on purpose and can walk away. AlertDialog when the app is asking a question it needs answered.