Alert Dialog
A React component in Beamline's Overlays category, in the free sample.
A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until the work finishes.
Use it for
- Irreversible or costly actions: revoke a key, delete a workspace, publish to production.
Not for
- Routine confirmations (confirm-morph).
- Anything informational (toast or alert).
Anatomy
- AlertDialog
- AlertDialogTrigger
- AlertDialogContent (scrim, title, description)
- AlertDialogFooter
- AlertDialogCancel
- AlertDialogAction
Variants
- action: danger (default), primary
States
- closed
- open
- working (action loading, cancel disabled)
- failed (reason in the description)
Keyboard
- Focus starts on Cancel
- Escape cancels
- Tab is trapped
- focus returns to the trigger
Motion
Same as dialog. Opens out of whatever opened it (_shared/use-open-from.ts): it starts as the opener's box, offset onto it, grows to its place over the considered duration while its content fades in, and closes back into the opener in 180 ms. Without an opener (a shortcut) the ordinary entrance runs. Reduced motion: it appears.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | |
description | ReactNode | — | |
AlertDialogAction variant | ButtonVariant | "danger" | |
AlertDialogAction loading | boolean | — | |
open / defaultOpen / onOpenChange | boolean | — | |
classNames | AlertDialogClassNames | — | |
style / ref | CSSProperties / native Ref | — | Root styles; ref targets native content div; each exported DOM part retains its native ref. |
Dependencies
@radix-ui/react-alert-dialog
Import
import { AlertDialogContent, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, AlertDialog, AlertDialogTrigger } from "@/components/alert-dialog/alert-dialog";Get it
Alert Dialog is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Alert Dialog is in the free sample, which costs nothing. Get Beamline · Connect your agent
More in Overlays
- Bottom sheet: A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.
- Command menu: Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
- Context menu: Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
- Dialog: A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
- Dropdown menu: A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
- Hover card: A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
- Popover: A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
- Sheet: A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
- Toast: Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe…
- Tooltip: Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.