Components

Callout

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

Basic syntax

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

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

This is an informational callout.

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

Configure your API key in the settings before making requests.

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

Use environment variables to store sensitive configuration like API keys.

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

Your documentation has been successfully deployed and is live.

<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.

<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.

Visual style and icon: info (default), tip, success, alert, danger.