Alert Dialog

import {
  AlertDialog,
  AlertDialogClose,

When to use it#

Use an alert dialog to confirm an action that is destructive or hard to undo: deleting a record, removing a workspace, discarding unsaved work. It asks one question, and the answer is one of the buttons.

It is stricter than a Dialog. There is no close button in the corner, and a click on the backdrop does not dismiss it, so the person has to make a choice. Escape still closes it, and counts as cancelling. Do not use it for forms or for information that is only good to know. Use a Dialog for those.

Write the title as the question, and name the thing it is about, such as "Delete invoice INV-2041?". Label the buttons with what they do, such as "Keep it" and "Delete", instead of "Yes" and "No".

Import#

Copyimport {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogClose,
} from "@hel/ui/alert-dialog"

Anatomy#

The parts match the Dialog: AlertDialog holds the open state, AlertDialogTrigger opens it, and AlertDialogContent is the window. Inside it, AlertDialogHeader holds the title and the description, and AlertDialogFooter holds the buttons.

AlertDialogClose closes the dialog when its element is pressed. Pass the button with render, so the two are one element. Do the work of the confirm button in its own onClick, and wrap it in AlertDialogClose as well when the dialog should close straight away.

Copy<AlertDialog>
  <AlertDialogTrigger render={<Button intent="destructive">Delete</Button>} />
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogTitle>Delete invoice INV-2041?</AlertDialogTitle>
      <AlertDialogDescription>You cannot undo this.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose render={<Button variant="outline">Keep it</Button>} />
      <AlertDialogClose render={<Button intent="destructive">Delete</Button>} />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Use intent="destructive" on the button that confirms a destructive action, so it reads as one.

Examples#

Keeping it open while working#

When the confirmation starts something that takes a moment, control the dialog with open and onOpenChange, disable the buttons while it runs, and close it when it is done.

import * as React from "react"

import {

Size and looks#

The content takes the same options as the dialog: size (auto, sm, md or lg), placement, padding, gap, blur and disableAnimation. A small size, as in the examples, suits a short question.

Props#

AlertDialogContent#

AlertDialog#

Takes every prop of the Base UI alert dialog, such as open, defaultOpen and onOpenChange.