Documentation
Overlays

Alert Dialog

A modal layer that only an explicit action dismisses: no backdrop click, no close button. It declares only what differs from dialog.

npx shadcn@latest add @fragiola/alert-dialog
Alert dialog
Gallery

One file

Installing alert-dialog after dialog writes exactly one file — this one. The layer family and the createLayerParts factory are already on disk. AlertDialog reuses Dialog's Backdrop, Popup, Title, Description, Close and Portal at runtime; the factory injects the namespace so each component inherits its own divergence if Base UI ever splits them.

What differs

Only three things: the primitive namespace, the absence of a close button (showClose={false}), and the action/cancel pair (which is just Clickable.Button composed in the footer, not a new part). A destructive confirmation is className="palette-danger" on the action button — no variant="destructive", no tone prop.

Parts

PartSource
Root / Trigger / PortalBase UI AlertDialog
Backdrop / Content / Header / Body / Footer / Title / Description / Closelayer via createLayerParts