Alert Dialog

Preview

A modal dialog that interrupts the user with important content and expects a response.

import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogBody,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogIcon,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@ngrok/mantle/alert-dialog";
import { Button } from "@ngrok/mantle/button";


	
		
	

	
		
		
			
				Are you absolutely sure?
				
					This action cannot be undone. This will permanently delete your account and remove your data from
					our servers.
				
			
			
				Cancel
				Continue
			
		
	



	
		
	
	
		
		
			
				Are you absolutely sure?
				
					This action cannot be undone. This will permanently delete your account and remove your data from
					our servers.
				
			
			
				Cancel
				 {
						event.preventDefault();
						window.alert("Form submitted!");
					}}
				>
					Continue

API Reference

The AlertDialog components are built on top of Radix Alert Dialog.

AlertDialog

The root component for the Alert Dialog.

All props from Radix Dialog.Root, plus:

Prop	Type	Default	Description
priority	info danger	—	Indicates the importance or impact level of the AlertDialog, affecting its color and styling to communicate its purpose to the user.

AlertDialogTrigger

A button that opens the Alert Dialog.

Radix Dialog.Trigger props.

AlertDialogContent

The popover Alert Dialog container. Renders on top of the overlay and is centered in the viewport.

Radix Dialog.Content props.

AlertDialogHeader

Contains the header content of the dialog, including the title and description.

Same props as a <div> element.

AlertDialogFooter

Contains the footer content of the dialog, including the action and cancel buttons.

Same props as a <div> element.

AlertDialogTitle

An accessible name to be announced when the dialog is opened.

Alternatively, you can provide aria-label or aria-labelledby to AlertDialogContent and exclude this component.

Radix Dialog.Title props.

AlertDialogDescription

An accessible description to be announced when the dialog is opened.

Alternatively, you can provide aria-describedby to AlertDialogContent and exclude this component.

Radix Dialog.Description props.

AlertDialogAction

A button that confirms the Alert Dialog action. Will default to appearance="filled", as well as the priority color from the AlertDialog. Does not close the alert dialog by default.

These buttons should be distinguished visually from the AlertDialogCancel button.

Composes around the mantle Button component.

Same props as the Button component.

AlertDialogCancel

A button that closes the dialog and cancels the action. Will default to appearance="outlined" and priority="neutral".

This button should be distinguished visually from AlertDialogAction buttons.

Composes around the mantle Button component.

Same props as the Button component.