Callout

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 and are often used with Expandables 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:

If you need to keep long disclaimers or edge cases out of the main flow, consider wrapping the callout content inside an Expandable instead.

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>

Tip

Use for recommendations, shortcuts, or best practices.

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

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>

Danger

Use for destructive or high-risk actions.

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

Success

Use for confirmations and positive outcomes.

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

Attributes

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 or use headings and body copy from Headings and Text inside the callout for clearer hierarchy.