Callout components highlight important information in your documentation. There are 5 variants available.

Note Callout

Use <Note> for general information and helpful context.

This is a Note callout. Use it for general information that helps users understand the content better.

<Note>

This is a **Note** callout. Use it for general information that helps users understand the content better.

</Note>

Warning Callout

Use <Warning> for important warnings and cautions.

This is a Warning callout. Use it to alert users about potential issues, breaking changes, or important considerations.

<Warning>

This is a **Warning** callout. Use it to alert users about potential issues, breaking changes, or important considerations.

</Warning>

Info Callout

Use <Info> for informational messages.

This is an Info callout. Use it for supplementary information, fun facts, or additional context that's good to know.

<Info>

This is an **Info** callout. Use it for supplementary information, fun facts, or additional context that's good to know.

</Info>

Tip Callout

Use <Tip> for helpful tips and best practices.

This is a Tip callout. Use it to share best practices, pro tips, or helpful suggestions that improve the user experience.

<Tip>

This is a **Tip** callout. Use it to share best practices, pro tips, or helpful suggestions that improve the user experience.

</Tip>

Check Callout

Use <Check> for success messages and confirmations.

This is a Check callout. Use it to confirm successful actions, highlight completed steps, or show positive outcomes.

<Check>

This is a **Check** callout. Use it to confirm successful actions, highlight completed steps, or show positive outcomes.

</Check>

Complex Content

Callouts support any markdown content inside them, including:

  • Lists

  • Bold and italic text

  • inline code

  • Links

  • Multiple paragraphs

Nested Heading

You can include complex content in callouts:

  • Bullet lists

  • Multiple paragraphs

  • Even code snippets

Here's a second paragraph with a link.

console.log("Code works too!");

<Note>

### Nested Heading



You can include **complex content** in callouts:



- Bullet lists

- Multiple paragraphs

- Even `code snippets`



Here's a second paragraph with a [link](https://relevate.app).



```javascript

console.log("Code works too!");

```

</Note>

When to Use Each Type

Note

General information, context, and helpful explanations

Warning

Breaking changes, potential issues, and important cautions

Info

Supplementary information and additional context

Tip

Best practices, pro tips, and optimization suggestions

Check

Success confirmations and positive outcomes

Best Practices

Keep callouts concise

While callouts support complex content, they're most effective when kept short and focused. Use them to highlight key information, not to replace full paragraphs of documentation.

Don't nest callouts

Avoid placing callouts inside other callouts. This creates visual clutter and reduces readability. If you need multiple related callouts, place them side by side.

Choose the right variant

Each callout type has semantic meaning. Using the correct variant helps users quickly understand the importance and nature of the information.

Full Image