Alert Dialog

A confirmation modal for an action worth pausing over.

A specialisation of Dialog, and everything there applies. Three things make it genuinely different rather than a rename:

1. role="alertdialog", so assistive tech reads the description out on open instead of waiting to be asked. 2.The backdrop does not dismiss it — a stray click must not answer "delete this?". 3. title and description are required by the type, so a confirmation cannot ship without saying what it is confirming.

Escape still closes it: WAI-ARIA requires a way out, and cancelling is always the safe outcome.

Try clicking the backdrop — it will not dismiss this one.

Usage

alert-dialog-demo.tsx

import { AlertDialog, AlertDialogFooter, Button } from 'trivela-ui';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button color="danger" onClick={() => setOpen(true)}>Delete</Button>

      <AlertDialog
        open={open}
        onClose={() => setOpen(false)}
        title="Delete 3 projects?"
        description="Their deployments and domains are removed immediately."
      >
        <AlertDialogFooter>
          <Button variant="ghost" color="neutral" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button color="danger" onClick={confirmDelete}>Delete</Button>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  );
}

Examples

Destructive confirm

Lead with the consequence and colour the confirm button to match the risk. Try the backdrop — it will not close this one, unlike Dialog.

Try clicking the backdrop — it will not dismiss this one.

When to use which

Reach for AlertDialog only when losing the answer would be worse than being interrupted.

Dialog

A task the reader started. Escape and the backdrop both dismiss it, because dismissing costs nothing.

Alert Dialog

A question the reader must answer. The backdrop is inert; only Cancel, the action, or Escape resolve it.

API Reference

Prop	Type	Default	Description
open	boolean	—	Required. Controlled.
onClose	() => void	—	Required. Fires on Escape or open going false. The backdrop never fires it.
title	ReactNode	—	Required — not optional as on Dialog. Wires aria-labelledby.
description	ReactNode	—	Required. The consequence being accepted. Wires aria-describedby, which role=alertdialog announces on open.
variant	'solid' \| 'ghost' \| 'outline' \| 'subtle'	'solid'	Style variant for the component.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Color scale used by the component.
size	'sm' \| 'md' \| 'lg'	'md'	Max width, and the padding of its sections.
className	string	—	Merged with the generated classes via cn().
AlertDialogHeader / Content / Footer	HTMLAttributes<HTMLDivElement>	—	Aliases of the Dialog sections. The header is rendered for you from title/description, so usually only the footer is needed.