Alert dialog

A Dialog that asks before something that cannot be undone, and waits for an answer.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/alert-dialog

Examples

Before abandoning a job

alert-dialog-abandon.tsx

import {  AlertDialog,  AlertDialogAction,  AlertDialogBody,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,} from "@/components/zero/alert-dialog";import { Button } from "@/components/zero/button";export default function AlertDialogAbandon() {  return (    <AlertDialog>      <AlertDialogTrigger render={<Button variant="danger" />}>        Abandon the job      </AlertDialogTrigger>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogTitle>Abandon this job?</AlertDialogTitle>          <AlertDialogDescription>            The crate goes back on the board.          </AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogBody>          <p className="text-zero-text-2">            You lose the reward, and the dispatcher will not offer you a rush            job for a day.          </p>        </AlertDialogBody>        <AlertDialogFooter>          <AlertDialogCancel>Keep it</AlertDialogCancel>          <AlertDialogAction variant="danger">Abandon</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

Behaviour

It has no close button in the corner, and a click on the dimmed page does not dismiss it: only the answers do, or Escape. Focus starts inside it and returns to the trigger.

The header, title, body and footer are the Dialog's. AlertDialogCancel is a raised button; AlertDialogAction is in the accent, or in red with variant="danger". Both close it.

Props

AlertDialogContent

Also takes every prop of Base UI's AlertDialog.Popup.

AlertDialogAction, AlertDialogCancel

Prop	Type	Default	Description
variant	Button's	"primary" / "secondary"	The button's look; both close the dialog.

AlertDialog, AlertDialogTrigger, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogBody, AlertDialogFooter

Also takes every prop of Base UI's AlertDialog.Root.