SERP UI logo
SERPUI
Docs
Alert Dialog

Alert Dialog

A modal dialog specifically designed to interrupt the user's workflow to convey critical information or require confirmation for an action, typically destructive ones like deletion. It requires an explicit user response.

DocsAPI Reference

This preview demonstrates a typical Alert Dialog. Click the trigger button to see how it interrupts the flow and demands user interaction.

Loading...

Installation

To use the Alert Dialog component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.

The CLI command is the easiest way to add the Alert Dialog component. It automatically handles downloading the necessary code and dependencies for you. Running this command in your project's terminal will add the alert-dialog component files.

npx shadcn@latest add alert-dialog

Usage

Once installed, you can use the Alert Dialog component. First, import the necessary parts from the file you created/installed.

  AlertDialog, // The main container for the entire dialog interaction
  AlertDialogAction, // The button to confirm the action (e.g., "Continue", "Delete")
  AlertDialogCancel, // The button to cancel the action and close the dialog
  AlertDialogContent, // The modal window that appears
  AlertDialogDescription, // The main descriptive text within the dialog
  AlertDialogFooter, // The container for the action buttons (Cancel, Continue)
  AlertDialogHeader, // The container for the title and description
  AlertDialogTitle, // The main title of the dialog
  AlertDialogTrigger, // The element (usually a button) that opens the dialog
} from "@/components/ui/alert-dialog"; // Adjust this path based on your project structure

Here's a basic example of how to structure the Alert Dialog in your TSX code.

  • AlertDialog wraps the trigger and the content.

  • AlertDialogTrigger is the element the user clicks to open the dialog (e.g., a Button).

  • AlertDialogContent contains the visible modal parts.

  • AlertDialogHeader holds the AlertDialogTitle and AlertDialogDescription.

  • AlertDialogFooter holds the AlertDialogCancel and AlertDialogAction buttons.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
AlertAspect Ratio