Overview
The Callout component draws attention to important information with a colored left border and icon. Use it sparingly — at most 2 per article.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "note" | "tip" | "warning" | "danger" | "note" | Visual style and icon variant |
children | ReactNode | — | Content displayed in the callout |
Usage
Note
This is a note callout for neutral supplementary information.
Tip
This is a tip callout for best practices and helpful suggestions.
Warning
This is a warning callout for things that could cause problems.
Danger
This is a danger callout for destructive actions or critical errors.
MDX source
<Callout type="tip">
Short practical advice or best practice.
</Callout>