---
title: Callouts
description: Note, Warning, Tip, and Info components for highlighting important content.
icon: message-square
---

# Callouts

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

## Note

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

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

<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:

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

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

## Tip

Use `<Tip>` for helpful suggestions and best practices:

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

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

## Info

Use `<Info>` for supplementary information:

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

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

## Danger

Use `<Danger>` for destructive or irreversible operations:

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

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

## Caution

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

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

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

## With Titles

Add a custom title with the `title` prop:

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

<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:

```mdx
<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>
```

<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>

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | string | (none) | Optional heading |
| `children` | ReactNode | — | Content (required) |

## When to Use

| Callout | Use For |
|---------|---------|
| **Note** | Important context, prerequisites, key information |
| **Warning** | Breaking changes, destructive actions, common pitfalls |
| **Tip** | Best practices, optimization suggestions, shortcuts |
| **Info** | Supplementary details, feature availability, links |

## Best Practices

<Tip>
Limit callouts to 1-2 per section. Too many callouts create visual noise and reduce their impact.
</Tip>

- 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