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

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 AlertDialog.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 AlertDialog.Trigger props.

AlertDialogContent

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

Radix AlertDialog.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 AlertDialog.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 AlertDialog.Description props.

AlertDialogAction

A button that closes the alert dialog and confirms the action. Will default to appearance="filled", as well as the priority color from the AlertDialog

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.