提示框
了解如何使用 Note、Tip、Warning、Danger、Check 以及自定义 Callout 组件来突出文档中的关键信息。
使用提示框可以突出显示警告、提示或要求等重要上下文，同时不打断阅读流程。
可用的提示框
Note: 有用的上下文或补充信息。
Info: 中性的信息或事实。用于补充细节。
Tip: 推荐的方法或优化建议。
Warning: 重要的注意事项或要求。忽略它可能导致问题时使用。
Danger: 严重警告。用于可能导致数据丢失或安全问题的操作。
Check: 成功确认。用于确认行为正确或操作已成功完成。
用法
<Note>
This is helpful context for the reader.
</Note>
<Warning>
This could cause issues if you skip this step.
</Warning>
<Danger>
This action cannot be undone. Proceed with caution.
</Danger>添加标题
为任意提示框添加自定义标题：
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>You can use Markdown inside callouts, including code and links.
添加代码块
提示框中可以包含代码：
The getData() function signature changed:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })最佳实践
提示框过多会削弱其影响力。每页最多建议 1-2 个。
仅将提示框用于读者不能错过的信息。
| 场景 | 提示框 |
|---|---|
| 有用的小技巧 | <Tip> |
| 额外上下文 | <Note> 或 <Info> |
| 潜在陷阱 | <Warning> |
| 不可逆操作 | <Danger> |
| 确认信息 | <Check> |
| 自定义品牌样式 | <Callout> |
保持提示框易于快速浏览。多段内容请使用 Accordion。
推荐： 一到两句话 避免： 多段文字
将提示框放在：
- 有前提条件的代码之前
- 含重要注意事项的说明之后
- 所引用内容的附近
属性
每个提示框都接受以下属性：
自定义标题（替换默认标题）。
无障碍访问
提示框使用语义化 HTML 和 ARIA 角色：
- 屏幕阅读器会播报提示框类型
- 颜色不是唯一的指示方式（同时包含图标）
- 深色模式下有足够的颜色对比度
自定义提示框
使用 Callout 组件设置自定义图标和颜色：
Custom: Use any icon and color to match your content.
Deploy your changes with confidence using our CI/CD pipeline.
Use icon style prefixes like regular/, light/, or duotone/ for different weights.
自定义提示框用法
<Callout icon="key" color="#FFC107">
This callout uses a key icon with amber color.
</Callout>
<Callout icon="rocket" color="#9333EA">
This callout uses a rocket icon with purple color.
</Callout>
<Callout icon="regular/star" color="#EC4899">
Use style prefixes for different icon weights.
</Callout>自定义提示框属性
图标名称（参见图标）。
十六进制颜色代码（例如 #FFC107）。默认为强调色。
图标样式前缀： 添加前缀以更改图标粗细：
solid/- 实心图标（默认）regular/- 线框图标light/- 细线框图标duotone/- 双色图标