Callouts

Callouts draw attention to important information. Use them sparingly to maintain impact.

Note

Use <Note> for important context that readers shouldn't miss:

<Note>
API keys are scoped to a single project. Create separate keys for each environment.
</Note>

Warning

Use <Warning> for potential issues, breaking changes, or dangerous operations:

<Warning>
This action cannot be undone. All associated data will be permanently deleted.
</Warning>

Tip

Use <Tip> for helpful suggestions and best practices:

<Tip>
Enable caching in production to reduce API calls by up to 90%.
</Tip>

Info

Use <Info> for supplementary information:

<Info>
This feature is available on the Pro plan and above.
</Info>

Danger

Use <Danger> for destructive or irreversible operations:

<Danger>
Deleting a project permanently removes all pages, builds, and analytics data.
</Danger>

Caution

<Caution> is an alias for <Warning> — use whichever reads better:

<Caution>
Regenerating your webhook secret invalidates all in-flight deliveries.
</Caution>

With Titles

Add a custom title with the title prop:

<Note title="Rate Limiting">
The API is limited to 100 requests per minute per API key.
</Note>

With Code

Callouts can contain code blocks and other markdown:

<Warning title="Breaking Change in v3">
The `userId` parameter has been renamed to `user_id`:

\`\`\`diff
- client.users.get({ userId: "123" })
+ client.users.get({ user_id: "123" })
\`\`\`
</Warning>

- client.users.get({ userId: "123" })
+ client.users.get({ user_id: "123" })

Blockquote Shorthand

Plain Markdown blockquotes are auto-styled as callouts — useful for content migrated from other platforms. Two forms are recognized:

Bold label — the label picks the callout type, each with its own icon and palette:

> **Note:** API keys are scoped to a single project.
> **Warning:** This action cannot be undone.
> **Security:** Never expose your secret key in client-side code.
> **Success:** Your webhook endpoint is now verified.
> **Important:** Sandbox and production use separate API keys.

ReadMe-style emoji prefix — 📘/📝/📌 → Note, ⚠️/🚧 → Warning, 💡 → Tip, 🚨/🛑/❌ → Danger, ℹ️ → Info, 🔒/🛡️ → Security, ✅/👍 → Success, ❗ → Important:

> 📘 Note
>
> Every external account must be associated with a customer.

The emoji is replaced with a custom SVG icon matching the callout type, and the first line becomes the callout title — emojis never render in your published docs.

Props

When to Use

Best Practices

• Keep callout content concise (1-3 sentences)
• Use the appropriate type for the message
• Don't nest callouts inside callouts
• Place callouts near the relevant content