---
title: Callout
description: Display a short message near the content that it describes.
---

A callout block gives information about nearby content. It can have a title, a semantic tone,
and an icon. It cannot contain other blocks.

Use a tone to give meaning to the message. The renderer controls the color and other
visual details for each tone.

## API

```ts
callout(text: string): CalloutBuilder
```

| Method     | Input                                                       | Result                                         |
| ---------- | ----------------------------------------------------------- | ---------------------------------------------- |
| `setTitle` | `string`                                                    | Adds a title above the message.                |
| `setTone`  | `"neutral" \| "info" \| "success" \| "warning" \| "danger"` | Sets the semantic tone.                        |
| `setIcon`  | `string`                                                    | Sets an icon name for the renderer to resolve. |

The `text` value is required. All other properties are optional. If you do not set an
optional property, the SDK does not include it in the protocol output.

## Basic callout

Use a basic callout for information that does not need a title or a special tone.

<BacklitExample path="callout/basic" view="detail" />

## Title

Add a title when a reader must identify the subject before they read the message.

<BacklitExample path="callout/title" view="detail" />

## Tones

### Neutral

Use `neutral` for general information that does not need emphasis. You can also omit the
tone to use the renderer's neutral default.

<BacklitExample path="callout/neutral" view="detail" />

### Info

Use `info` for useful context that does not report success, risk, or failure.

<BacklitExample path="callout/info" view="detail" />

### Success

Use `success` when an operation or state has the intended result.

<BacklitExample path="callout/success" view="detail" />

### Warning

Use `warning` for a risk or a state that needs attention.

<BacklitExample path="callout/warning" view="detail" />

### Danger

Use `danger` for a failure, a destructive state, or an action with severe effects.

<BacklitExample path="callout/danger" view="detail" />

## Icon

Set an icon name that the renderer can resolve. The protocol contains the name, not an
image or a glyph.

<BacklitExample path="callout/icon" view="detail" />

## All options

You can set the title, tone, and icon on the same callout.

<BacklitExample path="callout/all_options" view="detail" />