# Callout

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

A highlighted box that sets a note, tip, warning or danger apart from the text around it.

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.

```mdx
<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.

```mdx
<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.

```mdx
<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](https://preview.writedocs.io/docs/quickstart/)
>
> ```bash
> node --version
> ```

## Props

**`type`** `"note" | "info" | "tip" | "warning" | "danger" | "check"` default: `note`

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](https://preview.writedocs.io/docs/content/components/icon/#icons).

**`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](https://preview.writedocs.io/docs/content/components/hint/).