# Callout

An admonition block for asides the reader should not skim past.
`> **Note:** ` is available in every MDX page without an import — it is
> part of the [MDX component map](/reference/exports.md).
> 
> >   
>
> 
> ## Usage in MDX
> 
> ```mdx
> 
>   Body text. Markdown works here — links, `code`, **bold**.

> **Warning:** **Careful.** Without a `title` prop, a leading bold sentence is
>   styled as the title automatically.
```

Which renders as:

> **Warning:** **Careful.** Without a `title` prop, a leading bold sentence is
>   styled as the title automatically.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'info' \| 'warn'` | `'info'` | Icon + accent color: blue circle-i, or orange warning triangle. |
| `title` | `ReactNode` | — | Explicit title row above the body. A leading `<strong>` in the body is styled as a title too. |
| `children` | `ReactNode` | — | Body content. |

## When to use

- **info** — context the reader should notice but can act on later:
  version caveats, links to background, "this also works" notes.
- **warn** — footguns: irreversible actions, silent misconfiguration,
  things that look right but aren't.
- Keep the body to a few lines. If a callout grows past a short
  paragraph, it probably wants to be a normal `##` section instead —
  callouts interrupt reading flow, and stacking more than two in a row
  makes readers skim all of them.
- Callouts are plain `<div>`s — they can appear inside lists, table
  cells, or [``](/reference/components/preview.md) bodies without special
  handling.