Alert dialog

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

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/alert-dialog

Lineage

Spoke

Anatomy

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

export default () => (
	<AlertDialog>
		<AlertDialogTrigger />
		<AlertDialogContent>
			<AlertDialogHeader>
				<AlertDialogTitle />
				<AlertDialogDescription />
			</AlertDialogHeader>
			<AlertDialogFooter>
				<AlertDialogCancel />
				<AlertDialogAction />
			</AlertDialogFooter>
		</AlertDialogContent>
	</AlertDialog>
)

Spoke utility classes

Class	Fallback chain	Description
`--alert-dialog-overlay`	`oklch(0 0 0 / 0.5)`	Colour for dialog overlay alert variant
`--alert-dialog-content`	`var(--background)`	Colour for dialog content alert variant
`--alert-dialog-border`	`var(--border)`	Border colour for dialog alert variant
`--alert-dialog-radius`	`var(--radius-lg)`	Border radius for dialog
`--shadow-alert-dialog`	`var(--shadow-lg)`	Box shadow for alert dialog