# 标注框 (/zh/components/callouts)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 658 · updated: 2026-07-30 -->
Related: [折叠面板](/zh/components/accordions.md), [徽章](/zh/components/badge.md), [横幅](/zh/components/banner.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md), [颜色](/zh/components/color.md)

将标注框设置为 Note、Warning、Info、Tip、Check、Danger，或创建你自己的标注框：

<Note>
  这会在内容中添加一条说明
</Note>

```mdx
<Note>这会在内容中添加一条说明</Note>
```

<Warning>
  这会触发一个 Warning，提醒注意
</Warning>

```mdx
<Warning>这会触发一个 Warning，提醒注意</Warning>
```

<Info>
  用于提示关键信息
</Info>

```mdx
<Info>用于提示关键信息</Info>
```

<Tip>
  这是一条有用的提示
</Tip>

```mdx
<Tip>这是一条有用的提示</Tip>
```

<Check>
  这将使其处于“已选中”状态
</Check>

```mdx
<Check>这将使其处于"已选中"状态</Check>
```

<Danger>
  这是一个危险提示框
</Danger>

```mdx
<Danger>这是一个危险提示框</Danger>
```

<Callout icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M15.5 14.5C18.8137 14.5 21.5 11.8137 21.5 8.5C21.5 5.18629 18.8137 2.5 15.5 2.5C12.1863 2.5 9.5 5.18629 9.5 8.5C9.5 9.38041 9.68962 10.2165 10.0303 10.9697L2.5 18.5V21.5H5.5V19.5H7.5V17.5H9.5L13.0303 13.9697C13.7835 14.3104 14.6196 14.5 15.5 14.5Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M17.5 6.5L16.5 7.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="#FFC107" iconType="regular">
   这是一个自定义标注
</Callout>

```mdx wrap
<Callout icon="key" color="#FFC107" iconType="regular">这是一个自定义标注</Callout>
```

<div id="custom-callout-properties">
  ## 自定义标注框属性 [#自定义标注框属性]
</div>

通用 `Callout` 组件支持自定义图标和颜色。带类型的标注框（`Note`、`Warning`、`Info`、`Tip`、`Check`、`Danger`）使用预设的图标和颜色，仅接受 `children`。

<ResponseField name="icon" type="string">
  要显示的图标。

  可选值：

  * [Font Awesome](https://fontawesome.com/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `fontawesome`)
  * [Lucide](https://lucide.dev/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `lucide`)
  * [Tabler](https://tabler.io/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `tabler`)
  * 指向外部托管图标的 URL
  * 项目中图标文件的路径
  * 用花括号包裹的 SVG 代码

  对于自定义 SVG 图标：

  1. 使用 [SVGR 转换器](https://react-svgr.com/playground/) 转换你的 SVG。
  2. 将 SVG 代码粘贴到 SVG 输入框。
  3. 从 JSX 输出框中复制完整的 `<svg>...</svg>` 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码：`icon={<svg ...> ... </svg>}`。
  5. 根据需要调整 `height` 和 `width`。
</ResponseField>

<ResponseField name="iconType" type="string">
  [Font Awesome](https://fontawesome.com/icons) 的图标样式。仅在使用 Font Awesome 图标时生效。

  可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
</ResponseField>

<ResponseField name="color" type="string">
  自定义颜色，使用十六进制色值（例如 `#FFC107`）。设置标注框的边框、背景色调和文本颜色。
</ResponseField>