Callouts
Learn how to use Note, Tip, Warning, Danger, Check, and custom Callout components to highlight key information in your docs.
Use Callouts to highlight important context like warnings, tips, or requirements without interrupting the flow.
Available Callouts
Note: Helpful context or additional information.
Info: Neutral information or facts. Use for supplementary details.
Tip: Recommended approaches or optimizations.
Warning: Important caveats or requirements. Use when ignoring something could cause problems.
Danger: Critical warnings. Use for actions that could cause data loss or security issues.
Check: Success confirmations. Use to confirm correct behavior or successful completion.
Usage
<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>With Titles
Add a custom title to any callout:
<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.
With Code Blocks
Callouts can contain code:
The getData() function signature changed:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })Best Practices
Too many callouts dilute their impact. Aim for 1-2 per page maximum.
Reserve callouts for information the reader must not miss.
| Scenario | Callout |
|---|---|
| Helpful tip | <Tip> |
| Extra context | <Note> or <Info> |
| Potential gotcha | <Warning> |
| Irreversible action | <Danger> |
| Confirmation | <Check> |
| Custom branding | <Callout> |
Keep callouts scannable. Use an Accordion for multiple paragraphs.
Good: One or two sentences Avoid: Multiple paragraphs of text
Place callouts:
- Before code that has requirements
- After instructions with important caveats
- Near the content they reference
Props
Every callout accepts these props:
Custom title (replaces default).
Accessibility
Callouts use semantic HTML and ARIA roles:
- Screen readers announce the callout type
- Color is not the only indicator (icons are included)
- Sufficient color contrast in dark mode
Custom Callout
Set a custom icon and color with the Callout component:
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.
Custom Callout Usage
<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>Custom Callout Props
Icon name (see Icons).
Hex color code (e.g., #FFC107). Defaults to the accent color.
Icon style prefixes: Add a prefix to change the icon weight:
solid/- Filled icons (default)regular/- Outlined iconslight/- Thin outlined iconsduotone/- Two-tone icons