Callout

Highlight important information, warnings, or errors using the Callout component.

The Callout component is used to highlight important information, warnings, or errors in your documentation.

Usage

Callouts are available out of the box — no import needed.

Example usage
<Callout type="info">
  This is an informational message.
</Callout>
 
<Callout type="warning">
  Be careful with this setting.
</Callout>
 
<Callout type="error">
  Something went wrong!
</Callout>

Output

This is an informational message.

Be careful with this setting.

Something went wrong!

Types

Docstra supports three types of callouts:

Type	Color	Icon	Description
`info`	Blue	ℹ️	General information (default)
`warning`	Yellow	⚠️	Caution or important notice
`error`	Red	❌	Error or destructive action

Props

Prop	Type	Default	Description
`type`	`"info" \| "warning" \| "error"`	`"info"`	The style variant of the callout
`children`	`ReactNode`	—	The content to display inside the callout

How is this guide?

Last updated on March 30, 2026

Manual Installation

Code Block