Callout Components

Complete guide to using callout components with all types and examples

Callout Components

Callout components are styled information boxes that help highlight important information, warnings, tips, and notes in your documentation.

Available Types

There are 6 types of callouts available:

  1. info (default) - Blue background - General information
  2. success - Green background - Success messages, confirmations
  3. warning - Yellow background - Warnings, cautions
  4. error - Red background - Error messages, issues
  5. note - Purple background - Additional notes, tips
  6. danger - Red background - Critical warnings, dangerous operations

Basic Usage

Simple Callout

MDX Syntax:

Rendered Result:

Info

This is an informational callout without a custom title.

Note: The title will be auto-generated as "Info"

Callout with Custom Title

MDX Syntax:

Rendered Result:

Did you know?

This is an informational callout with a custom title.

All Callout Types

Info Callout

MDX Syntax:

Rendered Result:

Information

This is an informational callout. Use it for general information, tips, or helpful notes.

You can include:

Success Callout

MDX Syntax:

Rendered Result:

Installation Complete

Your application has been successfully installed and is ready to use.

You can now:

  1. Start the development server
  2. Open your browser
  3. Navigate to http://localhost:3000

Warning Callout

MDX Syntax:

Rendered Result:

Before You Begin

Make sure you have Node.js 20.19.4 or higher installed before proceeding.

Important: This operation requires administrator privileges on Windows.

Error Callout

MDX Syntax:

Rendered Result:

Error

Failed to connect to the database. Please check your connection settings.

Common causes:

  • Incorrect database URL
  • Database server not running
  • Network connectivity issues

Note Callout

MDX Syntax:

Rendered Result:

Note

This feature requires additional configuration. See the Configuration Guide for details.

You can reference files like config.json or directories like src/components and they will be highlighted as inline code.

Danger Callout

MDX Syntax:

Rendered Result:

Danger

This operation will delete all data. This action cannot be undone.

Warning: Make sure you have a backup before proceeding. All data will be permanently deleted.

Complete Examples

Installation Guide with Callouts

Troubleshooting with Callouts

Features

  • ✅ Auto-generated Titles: If you don't provide a title, it's auto-generated from the type
  • ✅ Styled Icons: Each type has a unique icon (Info, CheckCircle, AlertTriangle, etc.)
  • ✅ Color-coded: Different background and border colors for each type
  • ✅ Excluded from TOC: Callouts don't appear in the "ON THIS PAGE" table of contents
  • ✅ Responsive: Works perfectly on all screen sizes
  • ✅ Markdown Support: You can use markdown inside callouts (lists, bold, code, links)

Best Practices

  1. Use appropriate types: Choose the callout type that matches the message importance
  2. Keep titles concise: Short, descriptive titles work best
  3. Use sparingly: Don't overuse callouts - they should highlight important information
  4. Combine with inline code: You can reference files and directories inside callouts using backticks
  5. Use for important information: Callouts should draw attention to critical information

Styling

Each callout type has its own color scheme:

  • Info: Blue background (bg-blue-500/10), blue border and text
  • Success: Green background (bg-green-500/10), green border and text
  • Warning: Yellow background (bg-yellow-500/10), yellow border and text
  • Error: Red background (bg-red-500/10), red border and text
  • Note: Purple background (bg-purple-500/10), purple border and text
  • Danger: Red background (bg-red-500/10), red border and text

Next Steps

Prev
Features Overview
Next
Excalidraw Diagrams