Documentation Index
Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt
Use this file to discover all available pages before exploring further.
The Callout component renders a visually distinct box used to surface important information — notices, warnings, tips, and error advisories — directly within MDX prose. Each callout type ships with a matching GitHub-style icon and color scheme, and every detail can be overridden when needed.
Import
import { Callout } from 'nextra/components'
Props
| Prop | Type | Default | Description |
|---|
type | 'default' | 'info' | 'warning' | 'error' | 'important' | 'default' | Controls the color scheme and default icon of the callout. Pass null to strip all styles. |
emoji | ReactNode | Determined by type | Override the icon with a string emoji or any React element. |
children | ReactNode | — | The content displayed inside the callout. Supports full MDX. |
Variants
Default
Renders a green-tinted tip box with the GitHubTipIcon.
import { Callout } from 'nextra/components'
<Callout>
Helpful advice for doing things better or more easily.
</Callout>
Info
Renders a blue-tinted note box with the GitHubNoteIcon.
import { Callout } from 'nextra/components'
<Callout type="info">
Useful information that users should know, even when skimming content.
</Callout>
Warning
Renders a yellow-tinted warning box with the GitHubWarningIcon.
import { Callout } from 'nextra/components'
<Callout type="warning">
Urgent info that needs immediate user attention to avoid problems.
</Callout>
Error
Renders a red-tinted caution box with the GitHubCautionIcon.
import { Callout } from 'nextra/components'
<Callout type="error">
Advises about risks or negative outcomes of certain actions.
</Callout>
Important
Renders a purple-tinted important box with the GitHubImportantIcon.
import { Callout } from 'nextra/components'
<Callout type="important">
Key information users need to know to achieve their goal.
</Callout>
Custom Emoji
Override the default icon with any string emoji or React element using the emoji prop.
import { Callout } from 'nextra/components'
<Callout type="info" emoji="⭐">
Nextra has over 13k stars on GitHub!
</Callout>
<Callout emoji="🚀">
Custom emoji callout with the default green color scheme.
</Callout>
No Styles
Pass type={null} to render a callout with no border, background, or text color. The icon is omitted because no type is set, but you can still supply one via emoji.
<Callout type={null} emoji="💡">
Plain callout with no background or border.
</Callout>
Full Example
import { Callout } from 'nextra/components'
<Callout>This is a default callout.</Callout>
<Callout type="info">This is an info callout.</Callout>
<Callout type="warning">This is a warning callout.</Callout>
<Callout type="error">This is an error callout.</Callout>
<Callout type="important">This is an important callout.</Callout>
<Callout emoji="🚀">Custom emoji callout!</Callout>
GitHub Alert Syntax
As an alternative to the JSX component, Nextra also supports the GitHub Markdown alert syntax directly in MDX. No import is required.
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
Callout type:
| Alert syntax | Callout type equivalent |
|---|
[!NOTE] | info |
[!TIP] | default |
[!WARNING] | warning |
[!CAUTION] | error |
[!IMPORTANT] | important |
The GitHub alert syntax is a great choice when you want callouts in files that may also be rendered natively on GitHub, such as a README.md or a changelog.
