Callout

Overview

Callouts are boxed sections used to highlight tips, warnings, success messages, and other important notes.

You can add callouts in two ways:

• Editor UI: Insert ready-made callout blocks (no code needed).

• MDX: Use the <Callout> component with a kind prop.

Available callout types:

• Info: Neutral information (gray)

• Tip: Helpful suggestions (blue)

• Alert: Warnings and cautions (yellow)

• Danger: Critical errors and destructive actions (red)

• Success: Positive confirmations and results (green)

Using the Callouts in the editor UI

1. Place your cursor where you want the callout.

2. Type / to open the block menu.

3. Search for Calloutsand choose the callout style you want:

   • Info, Tip, Alert, Danger, or Success.

4. Start typing inside the callout block to add your content.

Using the Callout component in MDX

Basic syntax

Use the <Callout> component to highlight important information, tips, warnings, and alerts.

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

Callout types

Info callouts

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

Tip callouts

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

Success callouts

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

Alert callouts

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

Danger callouts

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

Attributes