Railbase
GPTClaude

Alert Dialog

A modal dialog that interrupts the user with an important confirmation.

Updated

Confirm action
<AlertDialog>
  <AlertDialogTrigger asChild><Button variant="destructive">Delete account</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

A modal dialog that interrupts the user with an important confirmation.

Installation

railbase ui add alert-dialog

Note

railbase ui add also copies the button component and shared primitives — they ship alongside this component automatically.

Usage

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

<AlertDialog>
  <AlertDialogTrigger>Delete</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Anatomy

Exported parts: AlertDialog · AlertDialogTrigger · AlertDialogPortal · AlertDialogOverlay · AlertDialogContent · AlertDialogHeader · AlertDialogFooter · AlertDialogTitle · AlertDialogDescription · AlertDialogAction · AlertDialogCancel

← PreviousAlertNext →Aspect Ratio