---
title: Callouts
description: Highlight important information with styled callout blocks.
url: http://localhost:3040/components/callouts
---

# Callouts

Highlight important information with styled callout blocks.

Use ``, `<Tip>`, `<Warning>`, and `<Info>` to draw attention to important content. Each maps to a visual style that signals intent.

## Types

  This is a **Note** — general information the reader should be aware of.

> **Tip:**
  This is a **Tip** — a helpful suggestion or best practice.

> **Warning:**
  This is a **Warning** — something that could cause problems if ignored.

> **Info:**
  This is an **Info** callout — neutral informational content.

```mdx

  Standard note callout.

<Tip>
  A helpful tip.
</Tip>

<Warning>
  Be careful about this.
</Warning>

<Info>
  Additional context.
</Info>
```

## Generic ``

Migrated content from other platforms may use the generic `` form — this is supported as an alias:

```mdx

  This maps to a Warning callout.

```

## Props

All callout components accept arbitrary MDX children including inline code, links, and lists. No additional props are required.