Legacy Alert Dialog

Why Use It

Best for destructive actions, permission prompts, and blocking notices.
Ships as composable dialog pieces, so you can build message-only, two-button, or stacked action layouts from the same API.
Keeps the glossy panel and button treatment without forcing a custom dialog state model.
Works well when you want the alert itself to carry the visual weight instead of the trigger button.

Installation

Install the component and the supporting dialog primitive from one registry item.

$ bunx --bun shadcn@latest add https://sabraman.ru/r/legacy-alert-dialog.json

Quick Start

Start with a standard confirm and cancel flow, then branch into alternate layouts if the action needs more context.

"use client";

import {
	LegacyAlertDialog,
	LegacyAlertDialogButton,
	LegacyAlertDialogClose,
	LegacyAlertDialogContent,
	LegacyAlertDialogDescription,
	LegacyAlertDialogFooter,
	LegacyAlertDialogHeader,
	LegacyAlertDialogTitle,
	LegacyAlertDialogTrigger,
} from "@/components/legacy-alert-dialog";

export function LegacyAlertDialogConfirmExample() {
	return (
		<LegacyAlertDialog>
			<LegacyAlertDialogTrigger asChild>
				<LegacyAlertDialogButton>Delete Draft</LegacyAlertDialogButton>
			</LegacyAlertDialogTrigger>

			<LegacyAlertDialogContent>
				<LegacyAlertDialogHeader>
					<LegacyAlertDialogTitle>Delete Draft</LegacyAlertDialogTitle>
					<LegacyAlertDialogDescription>
						This removes the note from the current device and cannot be undone.
					</LegacyAlertDialogDescription>
				</LegacyAlertDialogHeader>

				<LegacyAlertDialogFooter>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton className="min-w-0 flex-1">
							Cancel
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton
							className="min-w-0 flex-1"
							variant="primary"
						>
							Delete
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
				</LegacyAlertDialogFooter>
			</LegacyAlertDialogContent>
		</LegacyAlertDialog>
	);
}

Examples

Confirm and Cancel

A simple confirm or cancel layout for the default destructive flow.

"use client";

import {
	LegacyAlertDialog,
	LegacyAlertDialogButton,
	LegacyAlertDialogClose,
	LegacyAlertDialogContent,
	LegacyAlertDialogDescription,
	LegacyAlertDialogFooter,
	LegacyAlertDialogHeader,
	LegacyAlertDialogTitle,
	LegacyAlertDialogTrigger,
} from "@/components/legacy-alert-dialog";

export function LegacyAlertDialogConfirmExample() {
	return (
		<LegacyAlertDialog>
			<LegacyAlertDialogTrigger asChild>
				<LegacyAlertDialogButton>Delete Draft</LegacyAlertDialogButton>
			</LegacyAlertDialogTrigger>

			<LegacyAlertDialogContent>
				<LegacyAlertDialogHeader>
					<LegacyAlertDialogTitle>Delete Draft</LegacyAlertDialogTitle>
					<LegacyAlertDialogDescription>
						This removes the note from the current device and cannot be undone.
					</LegacyAlertDialogDescription>
				</LegacyAlertDialogHeader>

				<LegacyAlertDialogFooter>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton className="min-w-0 flex-1">
							Cancel
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton
							className="min-w-0 flex-1"
							variant="primary"
						>
							Delete
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
				</LegacyAlertDialogFooter>
			</LegacyAlertDialogContent>
		</LegacyAlertDialog>
	);
}

Message Only

A notice-only alert that relies on the close button instead of footer actions.

"use client";

import {
	LegacyAlertDialog,
	LegacyAlertDialogButton,
	LegacyAlertDialogContent,
	LegacyAlertDialogDescription,
	LegacyAlertDialogHeader,
	LegacyAlertDialogTitle,
	LegacyAlertDialogTrigger,
} from "@/components/legacy-alert-dialog";

export function LegacyAlertDialogMessageExample() {
	return (
		<LegacyAlertDialog>
			<LegacyAlertDialogTrigger asChild>
				<LegacyAlertDialogButton>System Notice</LegacyAlertDialogButton>
			</LegacyAlertDialogTrigger>

			<LegacyAlertDialogContent showCloseButton={true}>
				<LegacyAlertDialogHeader>
					<LegacyAlertDialogTitle>SIM Updated</LegacyAlertDialogTitle>
					<LegacyAlertDialogDescription>
						Carrier settings were refreshed. Signal bars may settle for a few
						seconds.
					</LegacyAlertDialogDescription>
				</LegacyAlertDialogHeader>
			</LegacyAlertDialogContent>
		</LegacyAlertDialog>
	);
}

Destructive Confirmation

A destructive trigger paired with stronger action wording inside the dialog.

"use client";

import {
	LegacyAlertDialog,
	LegacyAlertDialogButton,
	LegacyAlertDialogClose,
	LegacyAlertDialogContent,
	LegacyAlertDialogDescription,
	LegacyAlertDialogFooter,
	LegacyAlertDialogHeader,
	LegacyAlertDialogTitle,
	LegacyAlertDialogTrigger,
} from "@/components/legacy-alert-dialog";
import { LegacyBarButton } from "@/components/legacy-bar-button";

export function LegacyAlertDialogDestructiveExample() {
	return (
		<LegacyAlertDialog>
			<LegacyAlertDialogTrigger asChild>
				<LegacyBarButton label="Erase Phone" variant="destructive" />
			</LegacyAlertDialogTrigger>

			<LegacyAlertDialogContent>
				<LegacyAlertDialogHeader>
					<LegacyAlertDialogTitle>Erase All Content</LegacyAlertDialogTitle>
					<LegacyAlertDialogDescription>
						This clears photos, saved settings, and offline files from the
						device.
					</LegacyAlertDialogDescription>
				</LegacyAlertDialogHeader>

				<LegacyAlertDialogFooter>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton className="min-w-0 flex-1">
							Keep Data
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton
							className="min-w-0 flex-1"
							variant="primary"
						>
							Erase
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
				</LegacyAlertDialogFooter>
			</LegacyAlertDialogContent>
		</LegacyAlertDialog>
	);
}

Stacked Actions

A stacked footer for flows that need multiple next steps instead of one primary decision.

"use client";

import {
	LegacyAlertDialog,
	LegacyAlertDialogButton,
	LegacyAlertDialogClose,
	LegacyAlertDialogContent,
	LegacyAlertDialogDescription,
	LegacyAlertDialogFooter,
	LegacyAlertDialogHeader,
	LegacyAlertDialogTitle,
	LegacyAlertDialogTrigger,
} from "@/components/legacy-alert-dialog";

export function LegacyAlertDialogStackedExample() {
	return (
		<LegacyAlertDialog>
			<LegacyAlertDialogTrigger asChild>
				<LegacyAlertDialogButton>Leave Call</LegacyAlertDialogButton>
			</LegacyAlertDialogTrigger>

			<LegacyAlertDialogContent>
				<LegacyAlertDialogHeader>
					<LegacyAlertDialogTitle>Call in Progress</LegacyAlertDialogTitle>
					<LegacyAlertDialogDescription>
						Pick the next step before disconnecting this line.
					</LegacyAlertDialogDescription>
				</LegacyAlertDialogHeader>

				<LegacyAlertDialogFooter className="flex-col sm:flex-col sm:justify-start">
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton
							className="w-full min-w-0"
							variant="primary"
						>
							Hold and Exit
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton
							className="w-full min-w-0"
							variant="primary"
						>
							Transfer Call
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
					<LegacyAlertDialogClose asChild>
						<LegacyAlertDialogButton className="w-full min-w-0">
							Stay Here
						</LegacyAlertDialogButton>
					</LegacyAlertDialogClose>
				</LegacyAlertDialogFooter>
			</LegacyAlertDialogContent>
		</LegacyAlertDialog>
	);
}

API Reference

LegacyAlertDialogContentProps controls the panel shell and layout. LegacyAlertDialogButtonProps covers the glossy action buttons used in triggers and footers.

Also inherits: React.ComponentProps<typeof DialogContent>

Prop	Type	Required
`showCloseButton`	`boolean`	No

Also inherits: React.ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Required
`variant`	`LegacyAlertDialogButtonVariant`	No

Notes

Use showCloseButton when the alert should dismiss without dedicating space to footer actions.
The trigger, content, header, and footer exports can be composed around either controlled or uncontrolled dialog state.
LegacyAlertDialogButton exposes default and primary variants, so the action hierarchy stays consistent across layouts.

SABRAMAN