Callout
callout文档提示框 · 长文内联 admonition(坑/正解/Tip) · 左 accent 竖边 + 极浅 tone 底·仅标题/图标着色·正文保持 foreground 可读 · 区别 Alert(整块染色通知横幅) · tip/info/warning/success/danger 五语气·纯皮肤RSC
用法
基础用法
长文内联提示：左 accent 竖边 + 极浅底色，标题着 tone 色、正文保持 foreground 可读。
Tip
区别于 Alert（整块染色的通知横幅），Callout 专为文章 / 文档里的「坑 / 正解 / 提示」设计。
tsx
<Callout title="Tip" tone="tip">
区别于 Alert（整块染色的通知横幅），Callout 专为文章 / 文档里的「坑 / 正解 / 提示」设计。
</Callout>语义色调
tip / info / warning / success / danger 五种 tone，只染 accent 边与标题。
坑
直接改 node_modules 里的样式，下次安装会丢。
正解
用 pnpm patch 固化补丁，随 lockfile 走。
危险
该操作会清空数据库，务必先备份。
tsx
<>
<Callout tone="warning" title="坑">直接改 node_modules 里的样式，下次安装会丢。</Callout>
<Callout tone="success" title="正解">用 pnpm patch 固化补丁，随 lockfile 走。</Callout>
<Callout tone="danger" title="危险">该操作会清空数据库，务必先备份。</Callout>
</>自定义图标
icon 槽随任意 ReactNode，与标题同色。
小技巧
showcase 文件形状可以直接照抄 score-ring.showcase.tsx。
tsx
<Callout tone="tip" title="小技巧" icon={<LightbulbIcon />}>
showcase 文件形状可以直接照抄 score-ring.showcase.tsx。
</Callout>何时用
长文 / 文档内联强调「Tip / 坑 / 正解 / 警告」，只让标题+图标着 tone 色、正文保持 foreground 可读（左 accent 竖边 + 极浅 tone 底）。要整块染 tone 色的通知横幅用 Alert；Callout 专为正文阅读流里的克制提示。
导入
ts
import { Callout } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| tone | "tip"｜"info"｜"warning"｜"success"｜"danger" | "tip" | 语气：tip/info 主色、warning 警告、success 正解、danger 坑/危险 |
| className | string | — | 透传到根容器 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon | ReactNode | 图标 slot（emoji 或 SVG；设计系统不绑图标库） |
| title | ReactNode | 标题（tone 色强调） |
| children | ReactNode | 正文（foreground 可读） |
禁忌 / 坑
- 纯皮肤组件，只消费语义 token（含 success/warning/danger）；改色请改主题 token，别在此打内联 style。
title/icon都不传时只渲染正文区（无标题行），适合纯一段提示。
相关
—
Playground
Tip
正文内容保持 foreground 可读，只有标题与 accent 边着 tone 色。
<Callout tone="tip" title="Tip">正文内容</Callout>