callout
Renders a GitHub-style callout box with a colored border, tinted background, and an icon — for notes, tips, warnings, and more.
:::callout renders a highlighted callout box styled after GitHub's alert
syntax. Five semantic variants are available, each with a distinct color and
icon.
Maps to the <Callout /> React component via the kebab-case → PascalCase
directive convention.
Reference
:::callout{type=note}
Content here.
:::| Attribute | Type | Required | Description |
|---|---|---|---|
type | note | tip | important | warning | caution | No | Visual variant. Defaults to note. |
| children | MDX | No | Body content rendered inside the box. |
End each line inside a :::callout block — including the opening directive line
— with two trailing spaces. This prevents Prettier from merging lines when
formatting the file.
Examples
Note
:::callout{type=note}
Highlights information that users should take into account, even when
skimming.
:::Highlights information that users should take into account, even when skimming.
Tip
:::callout{type=tip}
Optional information to help a user be more successful.
:::Optional information to help a user be more successful.
Important
:::callout{type=important}
Crucial information necessary for users to succeed.
:::Crucial information necessary for users to succeed.
Warning
:::callout{type=warning}
Critical content demanding immediate user attention due to potential risks.
:::Critical content demanding immediate user attention due to potential risks.
Caution
:::callout{type=caution}
Negative potential consequences of an action.
:::Negative potential consequences of an action.