Alert Dialog

An alert dialog interrupts users before an action with consequences and blocks the page until they decide. Users close it with the cancel button or the Escape key, and a press outside the dialog doesn't close it. The action button doesn't close it on its own, so its click handler closes the alert dialog once the action has run.

UsageCopy Anchor Link

import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@biem/ui/components/ui/alert-dialog";
import { Button } from "@biem/ui/components/ui/button";

export function AlertDialogDefault() {
	return (
		<AlertDialog>
			<AlertDialogTrigger render={<Button variant="outline"/>}>Send transfer</AlertDialogTrigger>
			<AlertDialogContent>
				<AlertDialogHeader>
					<AlertDialogTitle>Send this transfer?</AlertDialogTitle>
					<AlertDialogDescription>
						The warehouse reserves 12 cases for the store and ships them on Monday.
					</AlertDialogDescription>
				</AlertDialogHeader>
				<AlertDialogFooter>
					<AlertDialogCancel>Cancel</AlertDialogCancel>
					<AlertDialogAction>Send transfer</AlertDialogAction>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
}

ExamplesCopy Anchor Link

DestructiveCopy Anchor Link

Deleting a supplier or a promotion removes its data for good. The action button signals this consequence through variant set to "destructive", so users recognize the risk while the cancel button still offers a way back.

SmallCopy Anchor Link

A short question needs little room, such as whether to print new shelf labels now. With size set to "sm", the alert dialog stays compact on larger screens as well, so users take in the question and both answers at a single glance.

Default SizeCopy Anchor Link

Most confirmations explain their consequence in a sentence or two. Unless another size is set, the alert dialog takes the size "default" and gives that explanation more room on larger screens, so users read it before they decide.

With MediaCopy Anchor Link

Users who confirm the same kinds of decisions every day recognize them faster by a symbol than by their wording. Through AlertDialogMedia, an icon or an image accompanies the question, and the title still names the decision where the symbol is unfamiliar.

ControlledCopy Anchor Link

Many decisions take a moment to carry out, such as booking a stock correction, and the alert dialog should stay open until that work is done. With open and onOpenChange, the application holds the open state, closes the alert dialog once the action has run and can open it from other parts of the interface as well.

Disabled TriggerCopy Anchor Link

An alert dialog belongs to an action that is not always available, such as closing a stock count while figures are still arriving. Marked as disabled, the trigger no longer opens the alert dialog, so users never face a decision they cannot make yet.

Disabled CancelCopy Anchor Link

While an action is already under way, such as a stock booking that has been sent, stepping back is no longer possible. Here, disabled keeps the cancel button from closing the alert dialog and shows users that the decision stands. The Escape key still closes it.

Disabled ActionCopy Anchor Link

Some decisions wait for a condition, for example a price change that a second person still has to approve. As long as the action button carries disabled, it accepts no interaction and exposes its state to assistive technology, while users can still leave through the cancel button.

API ReferenceCopy Anchor Link

AlertDialogCopy Anchor Link

AlertDialogTriggerCopy Anchor Link

AlertDialogPortalCopy Anchor Link

AlertDialogOverlayCopy Anchor Link

AlertDialogContentCopy Anchor Link

AlertDialogHeaderCopy Anchor Link

AlertDialogHeader groups the media, the title and the description. It renders a div and has no props of its own.

AlertDialogMediaCopy Anchor Link

AlertDialogMedia frames an icon or an image in the header. It renders a div and has no props of its own.

AlertDialogTitleCopy Anchor Link

AlertDialogDescriptionCopy Anchor Link

AlertDialogFooterCopy Anchor Link

AlertDialogFooter holds the cancel button and the action button. It renders a div and has no props of its own.

AlertDialogCancelCopy Anchor Link

AlertDialogActionCopy Anchor Link