---
title: 提示框
description: >-
了解如何使用 Note、Tip、Warning、Danger、Check 和自定义 Callout 组件，在文档中突出显示文档中的关键信息。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
使用提示框突出显示警告、提示或要求等重要上下文，同时不中断阅读流程。
## 可用的提示框
**注释** - 有助于理解的上下文或补充信息。用于增强理解的提示。
**信息** - 中立的信息或事实。用于补充细节。
**提示** - 最佳实践或优化建议。用于改善使用体验的“专业提示”。
**警告** - 重要的注意事项或要求。用于提示忽略某项内容可能导致的问题。
**危险** - 关键警告。用于提示可能导致数据丢失或安全问题的操作。
**确认** - 成功确认。用于确认行为正确或操作成功完成。
## 用法
```mdx
This is helpful context for the reader.
This could cause issues if you skip this step.
This action cannot be undone. Proceed with caution.
```
## 添加标题
为任意提示框添加自定义标题：
```mdx
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
```
你可以在提示框中使用 **Markdown**，包括 `code` 和[链接](/cn/components/card)。
## 添加代码块
提示框可以包含代码：
`getData()` 函数签名已更改：
```javascript
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })
```
## 最佳实践
过多的提示框会削弱其影响力。每页最多使用 1-2 个。
仅将提示框用于读者绝不能错过的信息。
| 场景 | 提示框 |
|----------|---------|
| 有帮助的提示 | `` |
| 补充上下文 | `` 或 `` |
| 可能引发问题的情况 | `` |
| 不可逆操作 | `` |
| 确认 | `` |
| 自定义品牌样式 | `` |
提示框应便于快速浏览。如果需要多个段落，请考虑改用 Accordion。
**推荐：** 一到两句话
**避免：** 多个文本段落
将提示框放在：
- 有要求的代码**之前**
- 包含重要注意事项的说明**之后**
- 所引用内容的**附近**
## 属性
所有提示框都接受相同的属性：
自定义标题（替换默认标题）。
## 无障碍访问
提示框使用语义化 HTML 和 ARIA 角色实现：
- 屏幕阅读器会读出提示框类型
- 颜色不是唯一的指示方式（其中包含图标）
- 两种主题下都具有足够的颜色对比度
## 自定义提示框
使用 `Callout` 组件和自定义图标、颜色创建提示框：
**自定义** - 使用任意图标和颜色来匹配你的内容。
使用我们的 CI/CD 流水线，放心部署你的更改。
使用 `regular/`、`light/` 或 `duotone/` 等图标样式前缀来设置不同的字重。
### 自定义提示框用法
```mdx
This callout uses a key icon with amber color.
This callout uses a rocket icon with purple color.
Use style prefixes for different icon weights.
```
### 自定义提示框属性
图标名称（参见[图标](/cn/content/icons)）。
十六进制颜色代码（例如 `#FFC107`）。默认为强调色。
**图标样式前缀：** 添加前缀以更改图标字重：
- `solid/` - 填充图标（默认）
- `regular/` - 描边图标
- `light/` - 细描边图标
- `duotone/` - 双双色调图标
## 下一步
浏览所有可用组件
了解如何在 MDX 中使用组件