Alert dialog

在执行无法撤销的操作前弹出的 Dialog：先请求确认，得到答复后才关闭。

安装

terminal

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

示例

放弃委托前的确认

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>  );}

行为

角落没有关闭按钮，点击变暗的页面也不会关闭：只能点击底栏的按钮或按 Esc 关闭。打开时焦点位于对话框内，关闭后回到触发器。

标题栏、标题、正文与底栏直接沿用 Dialog 的对应部分。AlertDialogCancel 是浮起色按钮；AlertDialogAction 使用强调色，设置 variant="danger" 时为红色。两者点击后都会关闭对话框。

属性

AlertDialogContent

另可传入 Base UI AlertDialog.Popup 的全部属性。

AlertDialogAction, AlertDialogCancel

属性	类型	默认值	说明
variant	Button's	"primary" / "secondary"	按钮的外观；两者都会关闭对话框。

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

另可传入 Base UI AlertDialog.Root 的全部属性。