Callouts

Callouts draw attention to key information. Use the lightest type that conveys the urgency.

Types

Helpful context or supplementary information that enhances understanding.

Neutral information or supplementary facts worth highlighting.

Best practices, optimization suggestions, or "pro tips."

Important caveats, requirements, or things that could cause issues if overlooked.

Critical warnings about actions that could cause data loss, security issues, or irreversible damage.

Success confirmations or completed steps.

Usage

Wrap your content in the callout component. No imports needed:

<Note>

Helpful context or supplementary information.

</Note>

<Warning>

Important caveats or requirements.

</Warning>

<Danger>

Critical warnings about destructive actions.

</Danger>

Custom titles

Add a title prop to override the default heading:

You can use Markdown inside callouts, including inline code, links, and lists.

First item
Second item

<Note title="Did you know?">

You can use **Markdown** inside callouts, including `inline code` and [links](/mcp/overview).

</Note>

Choosing the right type

Type	When to use
`Note`	Additional context that helps but is not required.
`Info`	Neutral facts or supplementary details.
`Tip`	Best practices, shortcuts, or recommendations.
`Warning`	Requirements, caveats, or common pitfalls.
`Danger`	Destructive or irreversible actions.
`Check`	Success states, completed steps, or confirmations.

Reach for Warning and Danger sparingly so they keep their weight. If everything is urgent, nothing is.