# Callouts
Use Mintlify-style callouts and semantic aliases for notes, tips, checks, warnings, danger states, and custom emphasis.
Source: /docs/components/callouts
Last modified: 2026-06-20
Callouts draw attention to information that changes how a reader should proceed. Keep them short, specific, and tied to the surrounding step.


> **Callouts are not navigation**
>

  If the block sends the reader somewhere else, use a card or tile. If the block changes how they should interpret the current section, use a callout.


## Variants

Typed aliases can be used with only children, which matches Mintlify's default callout authoring style.

This adds a note in the content


This raises a warning to watch out for


This draws attention to important information


This suggests a helpful tip


This brings us a checked status


This is a danger callout


````mdx title="typed-callouts.mdx"
This adds a note in the content


This raises a warning to watch out for


This draws attention to important information


This suggests a helpful tip


This brings us a checked status


This is a danger callout

````

Use `title` when the callout needs a named heading.


> **Note**
>

  Use `Note` for neutral supporting context.


> **Tip**
>

  Use `Tip` for a better implementation path or shortcut.


> **Info**
>

  Use `Info` for neutral context that affects the current implementation.


> **Warning**
>

  Use `Warning` when a reader can break the install, leak a secret, or publish an incomplete setup.


> **Check**
>

  Use `Check` for a completed prerequisite or positive confirmation.


> **Danger**
>

  Use `Danger` only for destructive, irreversible, or security-sensitive paths.


```mdx title="callouts.mdx"

> **Keep API keys server-side**
>

  Do not put private Plandalf API keys in browser JavaScript.


> **Start with one offer**
>

  Connect one test offer before adding upsells, bumps, or automation.


```

## Custom callouts

Use `Callout` directly when imported MDX already uses a generic component or when a page needs explicit control over tone and icon.

This is a custom callout


```mdx title="mintlify-custom-callout.mdx"
This is a custom callout

```


> **Safe to continue**
>

  Your first checkout button should open a test offer before production payment settings are connected.


> **Stop before launch**
>

  Do not publish a page that embeds a private token, internal test URL, or unsupported route.


````mdx title="custom-callouts.mdx"

> **Safe to continue**
>

  Your first checkout button should open a test offer.


> **Stop before launch**
>

  Do not publish a page that embeds a private token.


````

## 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 can be authored with only children.


- `icon` (string):
  The icon to display. Use a shared docs icon name, a supported icon-library name, a URL, or an imported SVG value.


- `iconType` (string):
  Icon style for icon libraries that support style variants.

  Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.


- `color` (string):
  Custom color as a hex code, such as `#FFC107`. Sets the border, background tint, icon color, and text color of a generic callout.


## Plandalf extensions


- `type` (info | note | tip | warning | check | danger):
  Use on `Callout` when you do not use a semantic alias.


- `title` (string):
  Short heading for the callout. Typed aliases hide generated labels by default unless you pass `title`.


- `label` (boolean; default: true):
  Controls whether a generic `Callout type="..."` without a title shows its generated type label.


## Authoring rules

- Use no more than one callout in a short section.
- Keep warning and danger callouts visible; do not hide them in accordions.
- Avoid using callouts as decorative spacing.
- Prefer direct verbs in titles: `Store the token on your server`, not `Important note`.

## Related components


  - [Banner](/docs/components/attention#banner): Use for page-level announcements.
  - [Badge](/docs/components/attention#badges-snippets-and-tooltips): Use for inline status.
  - [Attention guide](/docs/components/attention): See the full attention family.