Callout

A callout sets something apart from the text around it: a note, a tip, a warning. Its type sets its color and icon.

A note - something worth knowing.

Info - background or context.

A tip - a better way to do something.

A warning - something that can go wrong.

Danger - something that can’t be undone, or loses data.

A check - something done, or a requirement met.

<Callout type="warning">
  Deleting a project also deletes its API keys.
</Callout>

With a title

Use test mode first#

Test keys start with sk_test_ and never move real money. Switch to live keys when you’re ready.

<Callout type="tip" title="Use test mode first">
  Test keys start with `sk_test_` and never move real money. Switch to live keys when you're ready.
</Callout>

A callout with a title gets an anchor, so you can link to it: #use-test-mode-first.

The title can hold code or bold text, written as markup: title={<>Use <code>sk_test_</code> keys</>}.

Your own icon and color

icon and color make a callout of your own. Its border, background and title are tinted from color:

API keys#

Keep keys on your server - never in an app or a web page.

<Callout icon="key" color="#d97706" title="API keys">
  Keep keys on your server - never in an app or a web page.
</Callout>

Content

A callout holds any Markdown - lists, code, links - and other components:

Requirements#

Node.js 22 or newer
An API key - see Quickstart

node --version

Props

The callout’s color and icon.

title string

A bold title above the content. Without it, the icon sits next to the first line.

icon string

An icon in place of the type’s - any icon.

color string

Any CSS color, in place of the type’s. The border, background, icon and title are tinted from it.

Use callouts sparingly: when every other paragraph is a callout, readers skip them all. For a short aside in a sentence, use a Hint.