Callouts
Callouts are coloured alert boxes used to highlight important information. Nextra supports two approaches: GitHub-style blockquote syntax and the Nextra Callout component.
GitHub-style callouts
GitHub-style callouts use blockquote syntax and work in any Markdown that supports GFM (GitHub Flavored Markdown).
Syntax
> [!TYPE]
>
> Your content here.The [!TYPE] tag must be on its own line, followed by an empty > line, then the content.
Types
Note (blue)
Useful background information the reader should be aware of.
> [!NOTE]
>
> Useful background information the reader should be aware of.Tip (green)
Helpful advice for doing things better or more easily.
> [!TIP]
>
> Helpful advice for doing things better or more easily.Important (purple)
Key information the reader needs to know.
> [!IMPORTANT]
>
> Key information the reader needs to know.Warning (orange)
Something that requires caution. Proceed carefully.
> [!WARNING]
>
> Something that requires caution. Proceed carefully.Caution (red)
Dangerous action that could cause problems.
> [!CAUTION]
>
> Dangerous action that could cause problems.Nextra Callout component
Nextra provides a built-in Callout component for more control over styling and icons. Import it from nextra/components:
import { Callout } from 'nextra/components'Props
| Prop | Type | Default |
|---|---|---|
type | 'default' | 'info' | 'warning' | 'error' | 'important' | null | 'default' |
emoji | ReactNode | Determined by type |
The type prop defines the callout’s style and default icon. Set to null to remove all styling.
Type options
| Type | Default icon |
|---|---|
default | 💡 |
info | ℹ️ |
warning | ⚠️ |
error | 🚫 |
important | ❗ |
Examples
Default (tip):
<Callout>Helpful advice for doing things better or more easily.</Callout>Info:
<Callout type="info">Useful information users should know.</Callout>Warning:
<Callout type="warning">Something that requires caution. Proceed carefully.</Callout>Error:
<Callout type="error">Dangerous action that could cause problems.</Callout>Important:
<Callout type="important">Key information the reader needs to know.</Callout>Custom emoji:
<Callout type="info" emoji="⭐">The Stars are aligned!</Callout>Unstyled (type: null):
<Callout type={null} emoji="📌">A custom-styled callout with no default styling.</Callout>