# Attention components
Use Mintlify-style callouts, banners, badges, updates, frames, snippets, and tooltips without turning docs into card-heavy pages.
Source: /docs/components/attention
Last modified: 2026-06-20
Attention components make a page easier to scan without changing the implementation path. Use them for constraints, announcements, inline status, dated changes, framed media, and quick copyable values.


> **Keep attention narrow**
>

  If a block is the next action, use a [card or tile](/docs/components/cards-tiles). If it is a constraint, status, release note, or definition, use one of these attention components instead.


## Callouts

Use callouts for detail that affects the reader's next decision. Plandalf supports the generic `Callout` component and Mintlify-style aliases such as `Note`, `Tip`, `Info`, `Warning`, `Check`, and `Danger`.


> **Use a test offer first**
>

    Create checkout flows against a test offer before connecting a production button.


> **Do not expose private API keys**
>

    Browser SDK examples should use publishable or signed context. Secret keys belong on the server.


```mdx callouts.mdx

> **Use a test offer first**
>

  Create checkout flows against a test offer before connecting production buttons.


> **Do not expose private API keys**
>

  Secret keys belong on the server.


```

## Banners and badges

Use banners for page-level announcements and badges for compact status. Badges work well inside API field descriptions, changelog entries, and product availability notes.


> **Preview docs surface**
>

  This page is a component authoring guide for Plandalf docs contributors.


The browser SDK is stable, while some API examples are draft until their backend source is verified.

```mdx status.mdx

> **Preview docs surface**
>

  This page is a component authoring guide.


The browser SDK is stable.
```

## Updates

Use `Update` for dated release notes and docs change history. Keep the label stable so the generated anchor remains predictable.


  Plandalf now documents the Mintlify-style attention family as a first-class authoring surface.


```mdx update.mdx

  Plandalf now documents the Mintlify-style attention family as a first-class authoring surface.

```

## Frames, snippets, and tooltips

Use `Frame` when a screenshot or preview needs a boundary. Use `Snippet` for short copyable values and `Tooltip` for terms that should be defined inline.


  ![The Numi API docs preview.](/images/stacks/api-first/numi-api-docs.png)


Set the public key with `PLANDALF_PUBLIC_KEY` and treat an offer as the root object for checkout.

```mdx inline-attention.mdx

  ![The Numi API docs preview.](/images/stacks/api-first/numi-api-docs.png)


Set the public key with `PLANDALF_PUBLIC_KEY`.

An offer drives checkout.
```

## Callout properties

Use `Callout` directly, or use Mintlify-style aliases such as `Note`, `Tip`, `Info`, `Warning`, `Check`, and `Danger`.


- `title` (string):
  Optional heading shown above the callout body.


- `type` (info | note | tip | warning | check | danger; default: info):
  Controls the callout tone and default icon.


- `icon` (string):
  Lucide icon name, Mintlify-compatible alias, image URL, or inline SVG string.


- `iconType` (string):
  Icon style metadata preserved from imported Mintlify MDX.


- `color` (string):
  Compatibility prop for imported Mintlify callouts with custom color values.


## Banner and badge properties


- `title` (string):
  Banner heading shown before the banner body.


- `type` (info | note | tip | warning | check | danger; default: info):
  Banner or badge tone. Use warning and danger only for constraints that affect the reader's next action.


- `dismissible` (boolean; default: false):
  Allows a banner to be dismissed. Use this only for temporary notices.


- `id` (string):
  Stable storage key for dismissible banners.


- `icon` (string):
  Icon shown inside a banner or badge.


- `color` (string | object):
  Optional custom color metadata for imported Mintlify badges and banners.


## Update, frame, snippet, and tooltip properties


- `Update.label` (string; required):
  Visible update label and anchor source.


- `Update.description` (string):
  Short supporting text beside the update label.


- `Update.tags` (string[]):
  Filter labels for changelog-style pages and update rails.


- `Update.rss` ({ title?: string; description?: string }):
  Feed-specific summary when the update body contains rich MDX.


- `Frame.caption` (string):
  Caption shown beneath framed media.


- `Frame.hint` (string):
  Short context line above framed media.


- `Snippet.text | Snippet.label` (string):
  Compact inline value shown and copied by the snippet.


- `Tooltip.tip` (string; required):
  Short definition shown on hover or focus.


- `Tooltip.href` (string):
  Optional link for opening the full concept page.


## Related components


  - [Cards and tiles](/docs/components/cards-tiles): Use linked surfaces when the reader needs a next step.
  - [Show and hide content](/docs/components/disclosure-views): Reveal optional detail progressively.
  - [Visual context](/docs/components/visual-context): Use diagrams, trees, icons, and colors.