Callout

An admonition block for asides the reader should not skim past. <Callout> is available in every MDX page without an import — it is part of the MDX component map.

Heads up

Info callouts carry context the reader should notice but can act on later.

Careful

Warn callouts flag footguns — irreversible actions, version traps, sharp edges.

Usage in MDX

mdx

<Callout variant="info" title="Heads up">
  Body text. Markdown works here — links, `code`, **bold**.
</Callout>

<Callout variant="warn">
  **Careful.** Without a `title` prop, a leading bold sentence is
  styled as the title automatically.
</Callout>

Which renders as:

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 <Preview> bodies without special handling.