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" })

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