Callout Component

A flexible callout/admonition component for highlighting important information in your documentation. Supports multiple variants (Info, Warning, Danger, Success, Tip) with optional collapsible behavior.

Features

• 5 Variants: Info, Warning, Danger, Success, Tip with distinct colors and icons
• Collapsible: Optional expand/collapse functionality
• Custom Titles: Override default titles for each variant
• Dark Mode: Full dark mode support with appropriate color schemes
• Accessible: Keyboard navigation support for collapsible callouts
• Flexible Content: Supports any MDX content (text, lists, code blocks, etc.)

Basic Usage

Import the component and use it in your MDX files:

import Callout from '@site/src/theme/MDXComponents/Callout';

<Callout type="info">
This is an informational message.
</Callout>

Variants

Info (Blue)

Used for general information and helpful notes.

<Callout type="info">
This is an informational callout. Use it to highlight useful information.
</Callout>

Warning (Orange)

Used for warnings and cautions.

<Callout type="warning">
This is a warning callout. Use it to highlight potential issues or important considerations.
</Callout>

Danger (Red)

Used for critical warnings and errors.

<Callout type="danger">
This is a danger callout. Use it to highlight critical issues or actions that could cause problems.
</Callout>

Success (Green)

Used for successful operations and positive outcomes.

<Callout type="success">
This is a success callout. Use it to highlight successful outcomes or best practices.
</Callout>

Tip (Purple)

Used for tips, tricks, and helpful suggestions.

<Callout type="tip">
This is a tip callout. Use it to share helpful tips, tricks, or shortcuts.
</Callout>

Custom Titles

Override the default title for any callout variant:

<Callout type="warning" title="Important Note">
This warning has a custom title.
</Callout>

Collapsible Callouts

Make callouts collapsible to save space and improve readability:

<Callout type="tip" collapsible>
This callout can be collapsed. Click the header to toggle visibility.

You can include any content here:
- Lists
- Code blocks
- Multiple paragraphs
</Callout>

Default Collapsed

Start callouts in a collapsed state:

<Callout type="info" collapsible defaultCollapsed>
This callout starts collapsed. Users must expand it to see the content.
</Callout>

Convenience Components

For cleaner syntax, use the convenience components:

import { InfoCallout, WarningCallout, DangerCallout, SuccessCallout, TipCallout } from '@site/src/theme/MDXComponents/Callout';

<InfoCallout>
Cleaner syntax for info callouts!
</InfoCallout>

<WarningCallout title="Custom Title">
With custom titles!
</WarningCallout>

<TipCallout collapsible>
And collapsible behavior!
</TipCallout>

Complex Content

Callouts support complex MDX content:

<Callout type="success">

### Migration Complete

Your migration was successful! Here's what happened:

- All data was transferred
- Configurations were preserved
- No errors were detected

**Next steps:**
1. Verify your data
2. Test your workflows
3. Update your documentation

</Callout>

API Reference

Props

Prop	Type	Default	Description
type	'info' | 'warning' | 'danger' | 'success' | 'tip'	'info'	The callout variant
title	string	(varies by type)	Custom title for the callout
collapsible	boolean	false	Whether the callout can be collapsed
defaultCollapsed	boolean	false	Whether the callout starts collapsed
children	ReactNode	(required)	The callout content

Variant Configuration

Variant	Default Title	Icon	Color (Light)	Color (Dark)
info	Info	ℹ️	Blue	Dark Blue
warning	Warning	⚠️	Orange	Dark Orange
danger	Danger	🚨	Red	Dark Red
success	Success	✅	Green	Dark Green
tip	Tip	💡	Purple	Dark Purple

Examples

Documentation Warning

<Callout type="warning" title="⚠️ CRITICAL: File Types and Context">
**Before editing ANY file, the agent MUST clearly identify the file type and context:**

1. **Tool Documentation** (`tools/*.md`): Auto-synced to Docusaurus
2. **Custom Pages** (`docusaurus/docs/*.md`): Standalone, manual
3. **Generated Files** (`docusaurus/docs/tools/*.md`): DO NOT EDIT

Always show the file path clearly before making changes.
</Callout>

Setup Instructions

<Callout type="info" collapsible title="Setup Requirements">

Before you begin, ensure you have:

- Node.js 20+ installed
- npm or yarn package manager
- Git for version control

Run `node --version` to check your Node.js version.

</Callout>

Migration Notice

<Callout type="success">

### ✅ Migration Complete

All tool documentation has been successfully migrated to the new format.

**Changes made:**
- Added category-based organization
- Implemented cost tracking
- Created metadata components

**What's next:**
- Review your tools for accuracy
- Update outdated information
- Add missing metadata

</Callout>

Best Practices

When to Use Each Variant

• Info 🔵: General information, explanations, background context
• Warning 🟠: Important considerations, potential issues, breaking changes
• Danger 🔴: Critical warnings, data loss risks, destructive actions
• Success 🟢: Completed tasks, best practices, recommended approaches
• Tip 🟣: Helpful suggestions, shortcuts, optimization tips

Keep Content Focused

• One main point per callout
• Use clear, concise language
• Break long content into multiple callouts
• Consider collapsible callouts for lengthy content

Avoid Overuse

• Too many callouts reduce their impact
• Use sparingly for truly important information
• Consider regular text for less critical notes

Accessibility

• Custom titles should be descriptive
• Collapsible callouts are keyboard accessible
• Content should be readable in both light and dark modes

Related Features

• FAQ Structured Data Component - Structured Q&A format
• ToolMetadata Component - Tool information cards
• CategorySummary Component - Category overviews

Setup in New Repos

To add the Callout component to a new Docusaurus repo:

1. Copy component files:

   cp -r docusaurus/src/theme/MDXComponents/Callout /path/to/new-repo/src/theme/MDXComponents/

2. Import in your MDX files:

   import Callout from '@site/src/theme/MDXComponents/Callout';

3. Start using:

   <Callout type="info">
   Your content here
   </Callout>

That's it! The component is fully self-contained with styles and types included.