Alert Dialog

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

<AlertDialog priority="info">
	<AlertDialogTrigger asChild>
		<Button type="button" appearance="outlined">
			Show Info Alert Dialog
		</Button>
	</AlertDialogTrigger>

	<AlertDialogContent>
		<AlertDialogIcon />
		<AlertDialogBody>
			<AlertDialogHeader>
				<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
				<AlertDialogDescription>
					 Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
				</AlertDialogDescription>
			</AlertDialogHeader>
			<AlertDialogFooter>
				<AlertDialogCancel type="button">Cancel</AlertDialogCancel>
				<AlertDialogAction type="button">Continue</AlertDialogAction>
			</AlertDialogFooter>
		</AlertDialogBody>
	</AlertDialogContent>
</AlertDialog>

<AlertDialog priority="danger">
	<AlertDialogTrigger asChild>
		<Button type="button" appearance="outlined">
			With a form
		</Button>
	</AlertDialogTrigger>
	<AlertDialogContent>
		<AlertDialogIcon />
		<AlertDialogBody>
			<AlertDialogHeader>
				<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
				<AlertDialogDescription>
					 Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
				</AlertDialogDescription>
			</AlertDialogHeader>
			<AlertDialogFooter>
				<AlertDialogCancel type="button">Cancel</AlertDialogCancel>
				<form
					onSubmit={(event) => {
						event.preventDefault();
						window.alert("Form submitted!");
					}}
				>
					<AlertDialogAction type="submit">Continue</AlertDialogAction>
				</form>
			</AlertDialogFooter>
		</AlertDialogBody>
	</AlertDialogContent>
</AlertDialog>