Alert Dialog

A modal that interrupts to confirm something consequential. Unlike Dialog it has no backdrop dismissal and no corner close — a destructive confirmation should take a deliberate answer.

src/components/ui/alert-dialog.tsx

About

From the component's own source, where it was written.

A modal that interrupts to confirm something consequential.

Distinct from Dialog in three ways that matter: role="alertdialog", no backdrop dismissal and no corner close — a destructive confirmation should take a deliberate answer, not an accidental click outside. Escape still works, because trapping someone in a modal is worse.

Install

npx astralyx-ui add alert-dialog

Usage

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader,
  AlertDialogTitle, AlertDialogDescription, AlertDialogFooter,
  AlertDialogCancel, AlertDialogAction,
} from '@/components/ui/alert-dialog'

<AlertDialog>
  <AlertDialogTrigger asChild><Button color="destructive">Delete</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this project?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction color="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Composer

Change the props and the source below follows.

Props

open it

tsx

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button color="destructive">Delete project</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>…</AlertDialogContent>
</AlertDialog>

Examples

Destructive confirmation

tsx

<AlertDialog>…</AlertDialog>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`AlertDialog`

A modal that interrupts to confirm something consequential.

Prop	Type	Default	Description
open	boolean	—	—
defaultOpen	boolean	—	—
onOpenChange	(open: boolean) => void	—	—
dismissable	boolean	true	False refuses Escape too, for the moments after the action was confirmed and while it is in flight. The dialog's own buttons still close it.
children	ReactNode	required	—
role	"alertdialog"	—	Set automatically. Tells assistive tech this needs a response, not just attention.

`AlertDialogTrigger`

Extends ComponentProps<'button'>.

Prop	Type	Default	Description
asChild	boolean	false	—

`AlertDialogContent`

Extends ComponentProps<'dialog'>.

`AlertDialogHeader`

Extends ComponentProps<'div'>.

`AlertDialogTitle`

Extends ComponentProps<'h2'>.

`AlertDialogDescription`

Extends ComponentProps<'p'>.

`AlertDialogFooter`

Extends ComponentProps<'div'>.

`AlertDialogCancel`

Outline button that closes without acting. Rendered first in DOM order so it is the safer default.

Extends ComponentProps<typeof Button>.

Prop	Type	Default	Description
color	'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'	—	—
variant	'link' \| 'default' \| 'colored' \| 'secondary' \| 'outline' \| 'ghost'	—	—
size	'sm' \| 'default' \| 'xs' \| 'lg' \| 'xl' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg' \| 'icon-xl'	—	—
asChild	boolean	—	Render the child element instead of a `<button>`, keeping the styles.
tint	string	—	Any CSS colour, used instead of a named `color` set. Fill, text, tint and border are all derived from it, and every variant keeps working.

`AlertDialogAction`

Confirms and closes. Takes every Button prop, including color="destructive".

Extends ComponentProps<typeof Button>.

Prop	Type	Default	Description
color	'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'	—	—
variant	'link' \| 'default' \| 'colored' \| 'secondary' \| 'outline' \| 'ghost'	—	—
size	'sm' \| 'default' \| 'xs' \| 'lg' \| 'xl' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg' \| 'icon-xl'	—	—
asChild	boolean	—	Render the child element instead of a `<button>`, keeping the styles.
tint	string	—	Any CSS colour, used instead of a named `color` set. Fill, text, tint and border are all derived from it, and every variant keeps working.

Behaviour

Topic	Detail	Description
dismissal	Escape only	No backdrop click and no close button, by design. Escape still works — trapping someone in a modal is worse.