Overview
The Callout component draws attention to important information using colored banners with icons. Four semantic variants are available, each with a distinct color and icon to convey meaning at a glance.
It is also available via four shorthand aliases: Note, Warning, Tip, and Danger.
Example
This is an informational callout.
This is a warning callout.
This is an error callout.
This is a success callout.
Usage
Default (info)
mdx
<Callout>This is an informational callout.</Callout>Variants
mdx
<Callout type="info">Informational message.</Callout>
<Callout type="warn">Something might go wrong.</Callout>
<Callout type="error">Something went wrong.</Callout>
<Callout type="success">Everything looks good.</Callout>
Shorthand aliases
For convenience, four aliases map directly to callout variants:
mdx
<Note>This uses the info variant.</Note>
<Warning>This uses the warn variant.</Warning>
<Danger>This uses the error variant.</Danger>
<Tip>This uses the success variant.</Tip>Callout with rich content
Callouts support any inline MDX content:
mdx
<Note>
Make sure to set your `API_KEY` environment variable before running the
server. See the [configuration guide](/configuration) for details.
</Note>Props
Callout
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
type | "info" "warn" "error" "success" | No | "info" | Controls the color scheme and icon of the callout. |
children | React.ReactNode | Yes | — | The content displayed inside the callout. |
Shorthand aliases
| Component | Equivalent |
|---|---|
<Note> | <Callout type="info"> |
<Warning> | <Callout type="warn"> |
<Tip> | <Callout type="success"> |
<Danger> | <Callout type="error"> |
Accessibility Notes
- Callouts are rendered as
<div>elements with no ARIA role by default. For critical alerts, consider addingrole="alert"to the component. - Do not rely solely on color to convey meaning — the icon and content together provide sufficient context.
- Avoid overusing callouts on a single page as they lose impact when too frequent.