AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Callout
Highlight important information with colored alert boxes.
Use the Callout component to draw attention to important information. Each callout type has a distinct color to signal its intent.
Basic usage
Wrap your content in a <Callout> with a type prop:
<Callout type="info">This is an informational callout.</Callout>Types
There are seven built-in callout types:
Use tip for helpful suggestions and best practices.
Use warning when something could cause issues.
Use danger for critical information about destructive actions.
Use success to highlight a positive result.
Shorthand aliases
Each callout type has a shorthand component that you can use without the type prop:
<Note>A concise note for your readers.</Note>
<Warning>This action cannot be undone.</Warning>
<Tip>You can combine callouts with other components.</Tip>The available aliases are <Note>, <Warning>, <Info>, <Tip>, <Check>, and <Danger>.
With a title
Add a title prop to display a heading above the callout content:
<Callout type="warning" title="Breaking change">
The `v2` API removes the `legacy` parameter. Update your integration before
upgrading.
</Callout>The v2 API removes the legacy parameter. Update your integration before
upgrading.