Alert
alert提示条 · tone×variant 皮肤 + a11y role
用法
五语气
tone 提供 neutral / info / success / warning / danger，配 icon 槽。
信息提示
这是一条普通信息提示。
操作成功
个人资料已保存。
计划内维护
服务将于周日维护。
无法连接服务器
请稍后重试。
tsx
<>
<Alert tone="info" icon={<InfoIcon />} title="信息提示">这是一条普通信息提示。</Alert>
<Alert tone="success" icon={<SuccessIcon />} title="操作成功">个人资料已保存。</Alert>
<Alert tone="warning" icon={<WarningIcon />} title="计划内维护">服务将于周日维护。</Alert>
<Alert tone="danger" icon={<DangerIcon />} title="无法连接服务器">请稍后重试。</Alert>
</>带动作按钮
action 槽放右侧操作按钮，与正文并排。
有可用更新
应用有新版本，请刷新以获取最新功能。
tsx
<Alert tone="info" icon={<InfoIcon />} title="有可用更新" action={<Button size="sm">刷新</Button>}>
应用有新版本，请刷新以获取最新功能。
</Alert>可关闭
传 onClose 渲染右上角关闭按钮，消隐由调用方控制。
个人资料更新成功
tsx
<Alert tone="success" icon={<SuccessIcon />} title="个人资料更新成功" onClose={() => setShow(false)} />加载态
icon 槽放 Spinner，表达进行中的异步操作。
正在处理你的请求
正在同步数据，请稍候……
tsx
<Alert tone="info" icon={<Spinner size="sm" />} title="正在处理你的请求">
正在同步数据，请稍候……
</Alert>描边变体
variant="outline" 用透明底靠边框划界。
描边警告
透明底靠边框划界。
tsx
<Alert variant="outline" tone="warning" icon={<WarningIcon />} title="描边警告">
透明底靠边框划界。
</Alert>何时用
页面/区块内的静态提示卡片（表单校验汇总、状态说明、内联警告），常驻直到调用方移除。横贯容器顶部全宽公告 bar 用 Banner；命令式自动消失的轻提示用 Toast；四角弹出的富通知用 Notification。
导入
ts
import { Alert, alertVariants } from "@hulianui/ui"Props
继承 HTMLAttributes<HTMLDivElement>（除 title）+ alertVariants 的变体：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| tone | "neutral"｜"info"｜"success"｜"warning"｜"danger" | "info" | 语气色 |
| variant | "soft"｜"outline" | "soft" | soft=浅底 / outline=描边 |
| closeLabel | string | "关闭" | 关闭按钮的无障碍标签 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClose | () => void | 传入则渲染右上角关闭按钮，点击触发回调（关闭/消隐由调用方控制） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon | ReactNode | 可选图标 slot（调用方自带 SVG/emoji；设计系统不绑图标库） |
| title | ReactNode | 标题（可选）；children 为正文 description |
| action | ReactNode | 右侧动作 slot（如 <Button>Retry</Button>），与关闭按钮并排 |
禁忌 / 坑
onClose只触发回调、不自行消隐，是否移除/隐藏由调用方控制（受控）；不传onClose则不渲染关闭按钮。- 不绑图标库，
icon须调用方自带 SVG/emoji。 - 接口已
Omit<…, "title">避开 HTML 原生 title 属性与 ReactNode title 冲突，直接传title即为标题。
相关
Banner · Toast · Notification · ServiceMessage · Result · GiftFeed
Playground
提示标题
这是一条提示信息。
<Alert tone="info" variant="soft" icon={<Icon />} title="提示标题">这是一条提示信息。</Alert>