Callout

在文档中突出 notes、tips、warnings 和 destructive guidance。

当一段内容需要比普通正文更醒目，但仍然属于阅读流的一部分时，使用 Callout。

如果要使用 :::tip 这类 Markdown directive syntax，见提示块。

Import

import { Callout } from '@prosefly/astro-components';

Basic Usage

省略 title 时，callout 会渲染为带图标和正文的紧凑内联提示。

<Callout type="warning">
  When using a hosted coding plan, follow the tutorial before configuring a
  dedicated endpoint.
</Callout>

When using a hosted coding plan, follow the tutorial before configuring a dedicated endpoint.

With Title

当提示需要短标题时，添加 title。图标和标题位于第一行，正文显示在下方。

<Callout type="note" title="Document the default behavior">
  The note variant is a safe default for implementation details, caveats, and
  editorial guidance.
</Callout>

Document the default behavior

The note variant is a safe default for implementation details, caveats, and editorial guidance.

Variants

使用 type 匹配提示意图。

Note

Note 适合中性上下文、实现细节和不需要立即行动的 caveats。

Tip

Tip 适合推荐工作流、快捷方式，或帮助读者更顺利完成任务的模式。

Warning

Warning 适合可能导致困惑行为、损坏输出或额外设置工作的选择。

Danger

Danger 适合破坏性操作、安全敏感步骤或不可逆变更。

Rich Content

Callouts 接受正常 MDX 内容。

Keep examples actionable

Include the smallest working command first:

pnpm add @prosefly/astro-components

Then explain optional configuration after the command.

Props

Prop	Type	Default	Notes
`title`	`string`	none	显示在正文上方的可选标题。
`type`	`'note' \| 'tip' \| 'warning' \| 'danger'`	`'note'`	改变图标、颜色、边框和背景处理。

Behavior

Callouts 是静态内容容器。它们不会折叠、dismiss，也不会添加客户端行为。

编辑此页

最后更新于 2026年7月19日