Alert 提示
在当前页面内持续呈现需要用户注意的状态、结果或说明。
使用概览
适合使用
- 信息与当前任务直接相关,并应保持可见供用户复查时。
不建议使用
- 消息短暂且不影响后续操作,或需要阻断用户决策时。
真实示例
配额警告提示
持续说明剩余配额而不打断当前任务。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/alert.json基础用法
导入
import { Alert, AlertTitle, AlertDescription } from "@richardqiu/quartz/alert";JSX
<Alert tone="warning"><AlertTitle>配额即将用尽</AlertTitle><AlertDescription>本月还可调用 120 次。</AlertDescription></Alert>状态与控制摘要
默认
错误
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
tone | "default" | "info" | "success" | "warning" | "destructive" | "default" | 设置提示信息的语义级别与视觉色调。 |
组合结构
- 01
Alert - 02
AlertTitle - 03
AlertDescription
键盘约定
- Alert 本身不可交互,内部操作保留原生键盘行为。
可访问性契约
- 色调不能替代明确的标题与说明。
- 默认不添加实时区域;只有必须打断辅助技术时才使用 role=alert。