Command Menu

Search documentation, components, and switch theme.

Atoms

Alert Dialog

A modal dialog that interrupts the user for a critical action.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/alert-dialog

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
<AlertDialog>
  <AlertDialogTrigger>Open</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>

Behavior#

Unlike a generic Dialog, an Alert Dialog cannot be dismissed by clicking outside. The user must confirm or cancel before proceeding. This makes it the right choice for destructive or irreversible actions such as deleting a ledger or revoking an API key.

Examples#

Destructive#