Alert Dialog

A modal confirmation that interrupts a flow for an important decision and keeps focus on the required response.

Installation

bunx @swift-rust/ui add alert-dialog

Usage

tsx

1import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
2 
3<AlertDialog>
4  <AlertDialogTrigger>Delete account</AlertDialogTrigger>
5  <AlertDialogContent>
6    <AlertDialogHeader>
7      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
8      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
9    </AlertDialogHeader>
10    <AlertDialogFooter>
11      <AlertDialogCancel>Cancel</AlertDialogCancel>
12      <AlertDialogAction>Continue</AlertDialogAction>
13    </AlertDialogFooter>
14  </AlertDialogContent>
15</AlertDialog>

Composition

Alert Dialog is composed of these parts:

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Examples

← Alert Aspect Ratio →