# Callout

Reference for displaying highlighted information and alerts using the Callout component.

## Overview

Callouts are boxed sections used to highlight tips, warnings, success messages, and other important notes inside your Documentation.AI pages.

Use callouts when you need to:

- Draw attention to key information without breaking reading flow.
- Warn about breaking changes, security risks, or destructive actions.
- Provide tips and best practices alongside procedural steps.
- Confirm successful outcomes (for example, deployment complete, sync finished).

Callouts work alongside your regular [Headings and Text](/content/docs/components/heading-and-text/index.html) and are often used with [Expandables](/content/docs/components/expandables/index.html) when you want to hide long notes or advanced caveats behind a collapsible section.

Available callout kinds:

- `info`: Neutral information.
- `tip`: Helpful suggestions and best practices.
- `success`: Positive confirmations and results.
- `alert`: Warnings and cautions.
- `danger`: Critical errors and destructive actions.

## Using with Web Editor

In the Web Editor, you can insert callouts without writing any code.

1. Place your cursor where you want the callout.
2. Type `/` to open the block menu.
3. Search for **Callout** and choose the style you want (Info, Tip, Alert, Danger, or Success).
4. Start typing inside the callout block to add or edit content like a normal paragraph.

**All callout styles:**

This is an info callout for neutral notes or clarifications in your docs.

This is a tip callout for shortcuts, recommendations, and best practices.

This is a success callout to confirm that an action or process completed correctly.

This is an alert callout to flag something that needs extra attention.

This is a danger callout for high-risk or destructive actions that users should double-check.

If you need to keep long disclaimers or edge cases out of the main flow, consider wrapping the callout content inside an [Expandable](/content/docs/components/expandables/index.html) instead.

Prefer writing in code?

You can switch to **MDX view inside the Web Editor** to write or edit this component using the same syntax as the Code Editor. This is useful if you want full control while staying in the Web Editor.

## Using with Code Editor

In MDX, use the `Callout` component with a `kind` attribute to control the visual style. The `kind` value must be one of `info`, `tip`, `success`, `alert`, or `danger`.

### Basic syntax

```
<Callout kind="info">
  This is an informational callout.
</Callout>
```

### Info

Use for neutral notes or clarifications.

```
<Callout kind="info">
  Configure your API key in the settings before making requests.
</Callout>
```

Configure your API key in the settings before making requests.

### Tip

Use for recommendations, shortcuts, or best practices.

```
<Callout kind="tip">
  Use environment variables to store sensitive configuration like API keys.
</Callout>
```

Use environment variables to store sensitive configuration like API keys.

### Alert

Use for warnings that require extra attention but are not strictly fatal.

```
<Callout kind="alert">
  This action cannot be undone. Make sure you have a backup before proceeding.
</Callout>
```

This action cannot be undone. Make sure you have a backup before proceeding.

### Danger

Use for destructive or high-risk actions.

```
<Callout kind="danger">
  Deleting this workspace will permanently remove all documentation and cannot be recovered.
</Callout>
```

Deleting this workspace will permanently remove all documentation and cannot be recovered.

### Success

Use for confirmations and positive outcomes.

```
<Callout kind="success">
  Your documentation has been successfully deployed and is live.
</Callout>
```

Your documentation has been successfully deployed and is live.

### Attributes

[path\
\
kindstring](/content/docs/components/callout#path-kind/index.html)

Visual style and icon for the callout. One of: `info` (default), `tip`, `success`, `alert`, `danger`.

## Advanced options

Callouts support a collapsed state to help keep pages scannable when you have long explanations or optional details.

- `collapsed="false"`: The callout content is fully visible.
- `collapsed="true"`: The callout content is hidden until the reader expands it.

Example:

```
<Callout kind="info" collapsed="true">
  This is an optional deep-dive explanation that starts collapsed.
</Callout>
```

When you need more structured or multi-paragraph content that should start hidden, combine callouts with [Expandables](/content/docs/components/expandables/index.html) or use headings and body copy from [Headings and Text](/content/docs/components/heading-and-text/index.html) inside the callout for clearer hierarchy.