反馈组件版本 0.1.0

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 · boolean

API 参考

属性类型默认值说明
tone"default" | "info" | "success" | "warning" | "destructive""default"设置提示信息的语义级别与视觉色调。

组合结构

  1. 01Alert
  2. 02AlertTitle
  3. 03AlertDescription

键盘约定

  • Alert 本身不可交互,内部操作保留原生键盘行为。

可访问性契约

  • 色调不能替代明确的标题与说明。
  • 默认不添加实时区域;只有必须打断辅助技术时才使用 role=alert。