> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI4YmVkNDBhOS1mMTZiLTQ5M2EtOThiYS1jOWY3ZGE0OTYyMDEiLCJleHAiOjE3NzgyNjQyMzksImlhdCI6MTc3ODI2MzkzOX0._hZpHr-pGaWUNZ5Q07HPswnVGsr6rgaVcsAXXn8H0Hk
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 提示框

> 了解如何使用提示框组件在文档中添加警告、提示、注释和警报，支持自定义图标和意图类型。

`<Callout>` 组件用于在文档中突出显示重要信息、警告或提示。使用提示框来强调读者不应错过的关键细节，如破坏性更改、先决条件或有用的最佳实践。

要显示非常简短的信息（如状态指示器和版本号），请使用[标记](/docs/writing-content/components/badges)。

## 使用方法

<div>
  <div>
    <Note>
      这会在您的文档中添加一个注释。
    </Note>
  </div>
</div>

```jsx Markdown
<Note>这会在您的文档中添加一个注释。</Note>
```

## 变体

### 意图类型

<div>
  <div>
    <Info>
      这会引起对重要信息的注意
    </Info>

    <Warning>
      这会发出需要注意的警告
    </Warning>

    <Success>
      这表示成功的操作或积极的结果
    </Success>

    <Error>
      这表示潜在错误
    </Error>

    <Note>
      这突出显示额外的上下文或补充信息
    </Note>

    <Launch>
      这庆祝公告，使用文档站点的主要强调色样式
    </Launch>

    <Tip>
      这建议一个有用的提示
    </Tip>

    <Check>
      这显示选中状态
    </Check>
  </div>
</div>

```jsx Markdown
<Info>这会引起对重要信息的注意</Info>
<Warning>这会发出需要注意的警告</Warning>
<Success>这表示成功的操作或积极的结果</Success>
<Error>这表示潜在错误</Error>
<Note>这突出显示额外的上下文或补充信息</Note>
<Launch>这庆祝公告，使用文档站点的主要强调色样式</Launch>
<Tip>这建议一个有用的提示</Tip>
<Check>这显示选中状态</Check>
```

### 自定义图标

<div>
  <div>
    <Warning title="示例提示框" icon="skull-crossbones">
      这个提示框使用了标题和自定义的 Font Awesome 图标。
    </Warning>
  </div>
</div>

```jsx Markdown
<Warning title="示例提示框" icon="skull-crossbones">
这个提示框使用了标题和自定义的 Font Awesome 图标。
</Warning>
```

## 属性

<ParamField path="intent" type="string" required={true}>
  提示框的类型。可用选项：`info`、`warning`、`success`、`error`、`note`、`launch`、`tip`、`check`
</ParamField>

<ParamField path="title" type="string" required={false}>
  提示框的标题
</ParamField>

<ParamField path="icon" type="string | ReactElement" required={false}>
  提示框的图标。可以是：

  * [Font Awesome](https://fontawesome.com/icons) 图标名称
  * React 元素
  * 如果未指定，将根据意图类型使用默认图标：
    * info：InfoCircle
    * warning：Bell
    * success：CheckCircle
    * error：WarningTriangle
    * note：Pin
    * launch：Rocket
    * tip：Star
    * check：Check
</ParamField>

<ParamField path="className" type="string" required={false}>
  应用到提示框的额外 CSS 类
</ParamField>