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.
Wrap your content in a <Callout> with a type prop:
<Callout type="info">This is an informational callout.</Callout>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.
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>.
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.
children | ReactNode | The callout content. | Yes | — |