Authoring Guide · Features

Callout Components

Complete guide to using callout components with all types and examples

Updated Jan 1, 2024 · 3 min read

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