> For AI agents: the complete documentation index is available at https://rspress.rs/zh/llms.txt, the full documentation bundle is available at https://rspress.rs/zh/llms-full.txt.

# Callout

Callout 组件用于显示高亮的信息块，如提示、警告和注意事项。

:::tip
推荐使用[容器语法](https://rspress.rs/zh/guide/use-mdx/container.md)，它在 Markdown 和 MDX 文件中均可使用。
:::

## 容器语法

大多数情况下，使用容器语法来创建 Callout：


**渲染结果**

:::note
这是一个 `note` 类型的 callout
:::
:::tip
这是一个 `tip` 类型的 callout
:::
:::important
这是一个 `important` 类型的 callout
:::
:::info
这是一个 `info` 类型的 callout
:::
:::warning
这是一个 `warning` 类型的 callout
:::
:::danger
这是一个 `danger` 类型的 callout
:::
:::details
这是一个 `details` 类型的 callout
:::
:::tip 自定义标题
这是一个带有自定义标题的 callout
:::
:::tip\{title="自定义标题"}
这是一个带有自定义标题的 callout
:::


**语法**

```markdown
:::note
这是一个 `note` 类型的 callout
:::

:::tip
这是一个 `tip` 类型的 callout
:::

:::important
这是一个 `important` 类型的 callout
:::

:::info
这是一个 `info` 类型的 callout
:::

:::warning
这是一个 `warning` 类型的 callout
:::

:::danger
这是一个 `danger` 类型的 callout
:::

:::details
这是一个 `details` 类型的 callout
:::

:::tip 自定义标题
这是一个带有自定义标题的 callout
:::

:::tip{title="自定义标题"}
这是一个带有自定义标题的 callout
:::
```


更多容器语法的详情，请参阅[容器](https://rspress.rs/zh/guide/use-mdx/container.md)。

## 组件用法

你也可以在 MDX 文件中直接使用 Callout 组件：

```mdx title="index.mdx"
import { Callout } from '@rspress/core/theme';

<Callout type="tip">这是一个 tip callout</Callout>

<Callout type="warning" title="警告">
  这是一个带有自定义标题的警告
</Callout>
```


Tip

这是一个 tip callout


警告

这是一个带有自定义标题的警告

## 自定义

你可以 eject Callout 组件来自定义其样式和行为：

```bash
npx rspress eject Callout
```

这会将组件复制到 `theme/components/Callout`。自定义后，在 `theme/index.tsx` 中重新导出：

```tsx title="theme/index.tsx"
export { Callout } from './components/Callout';
export * from '@rspress/core/theme-original';
```

## Props

```ts
interface CalloutProps {
  /**
   * callout 的类型，决定其颜色和图标。
   */
  type:
    | 'tip'
    | 'note'
    | 'important'
    | 'warning'
    | 'caution'
    | 'danger'
    | 'info'
    | 'details';
  /**
   * callout 的自定义标题。如果未提供，将使用首字母大写的类型名。
   */
  title?: string;
  /**
   * callout 内显示的内容。
   */
  children: React.ReactNode;
}
```