跳转到主要内容
将标注框设置为 Note、Warning、Info、Tip、Check、Danger，或创建你自己的标注框：
这会在内容中添加一条说明
<Note>这会在内容中添加一条说明</Note>
这会触发一个 Warning，提醒注意
<Warning>这会触发一个 Warning，提醒注意</Warning>
用于提示关键信息
<Info>用于提示关键信息</Info>
这是一条有用的提示
<Tip>这是一条有用的提示</Tip>
这将使其处于“已选中”状态
<Check>这将使其处于"已选中"状态</Check>
这是一个危险提示框
<Danger>这是一个危险提示框</Danger>
这是一个自定义标注
<Callout icon="key" color="#FFC107" iconType="regular">这是一个自定义标注</Callout>

​
自定义标注框属性

通用 Callout 组件支持自定义图标和颜色。带类型的标注框（Note、Warning、Info、Tip、Check、Danger）使用预设的图标和颜色，仅接受 children。
​
icon
string
要显示的图标。可选值：
  • Font Awesome 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 fontawesome)
  • Lucide 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 lucide)
  • Tabler 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 tabler)
  • 指向外部托管图标的 URL
  • 项目中图标文件的路径
  • 用花括号包裹的 SVG 代码
对于自定义 SVG 图标：
  1. 使用 SVGR 转换器 转换你的 SVG。
  2. 将 SVG 代码粘贴到 SVG 输入框。
  3. 从 JSX 输出框中复制完整的 <svg>...</svg> 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码：icon={<svg ...> ... </svg>}。
  5. 根据需要调整 height 和 width。
​
iconType
string
Font Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。可选值：regular、solid、light、thin、sharp-solid、duotone、brands。
​
color
string
自定义颜色，使用十六进制色值（例如 #FFC107）。设置标注框的边框、背景色调和文本颜色。