mintlify__docs/components/callouts.mdx

---
title: "Callouts"
description: "Use callout components to highlight important information, warnings, and tips in your documentation."
keywords: ["callouts", "notes", "warnings", "info boxes", "tips", "emphasis", "highlight"]
---

import IconsOptional from "/snippets/icons-optional.mdx";

Style callouts as Note, Warning, Info, Tip, Check, Danger, or create your own callout:

<Note>This adds a note in the content</Note>

```mdx
<Note>This adds a note in the content</Note>
```

<Warning>This raises a warning to watch out for</Warning>

```mdx
<Warning>This raises a warning to watch out for</Warning>
```

<Info>This draws attention to important information</Info>

```mdx
<Info>This draws attention to important information</Info>
```

<Tip>This suggests a helpful tip</Tip>

```mdx
<Tip>This suggests a helpful tip</Tip>
```

<Check>This brings us a checked status</Check>

```mdx
<Check>This brings us a checked status</Check>
```

<Danger>This is a danger callout</Danger>

```mdx
<Danger>This is a danger callout</Danger>
```

<Callout icon="key" color="#FFC107" iconType="regular"> This is a custom callout</Callout>

```mdx wrap
<Callout icon="key" color="#FFC107" iconType="regular">This is a custom callout</Callout>
```

## Custom callout properties

The generic `Callout` component supports custom icons and colors. The typed callouts (`Note`, `Warning`, `Info`, `Tip`, `Check`, `Danger`) use preset icons and colors and accept `children` and `className`.

<IconsOptional />

<ResponseField name="color" type="string">
  Custom color as a hex code (for example, `#FFC107`). Sets the border, background tint, and text color of the callout.
</ResponseField>

<ResponseField name="className" type="string">
  Additional CSS classes to apply to the callout.
</ResponseField>