Alert
嵌在页面中的提示信息：直角方框，起始侧（通常为左侧）的边线显示消息的色调，并以该色调的徽标作为标记。
安装
# 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示例
四种色调
Route updated
The north gate opens an hour later tonight.
Job taken
Reach the north gate before 22:00.
Low on fuel
Refuel before you take the next job.
Crate damaged
The reward drops by half.
import { Alert, AlertDescription, AlertTitle } from "@/components/zero/alert";export default function AlertTones() { return ( <div className="grid w-full max-w-lg gap-3"> <Alert> <AlertTitle>Route updated</AlertTitle> <AlertDescription> The north gate opens an hour later tonight. </AlertDescription> </Alert> <Alert variant="success"> <AlertTitle>Job taken</AlertTitle> <AlertDescription>Reach the north gate before 22:00.</AlertDescription> </Alert> <Alert variant="warning"> <AlertTitle>Low on fuel</AlertTitle> <AlertDescription> Refuel before you take the next job. </AlertDescription> </Alert> <Alert variant="danger"> <AlertTitle>Crate damaged</AlertTitle> <AlertDescription>The reward drops by half.</AlertDescription> </Alert> </div> );}行为
四种色调沿用 zzzUI 已有的颜色：信息用暗灰色，成功用强调色，警告用焦点框的黄色，危险用红色。每种色调都配有徽标（信息、完成、警示），不单靠颜色区分。
Alert 是静态的，出现时不会通知读屏软件。出现后会自行消失的消息，应使用 Toast。
属性
Alert
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "danger" | "info" | 色调，决定边线、徽标及其颜色。 |
| icon | ReactNode | — | 替换色调自带的徽标；设为 null 时不显示标记。 |