Callout

Display attention-grabbing content with predefined or custom styling

Overview

The Callout component is used to highlight important information in your documentation. It supports multiple predefined variants (info, warning, note, tip, check, danger) as well as fully customizable styling with custom icons and colors.

Basic Usage

Info Callout

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

All Variants

Predefined Variants

The Callout component includes 6 predefined variants, each with its own icon and color scheme:

Info

<Callout variant="info">
  <p><strong>Info:</strong> General information or helpful context.</p>
</Callout>

Custom Variant

For full control over appearance, use the custom variant with your own icon and color:

Custom Color

<Callout variant="custom" color="#9333ea">
  <p>This callout uses a custom purple color.</p>
</Callout>

Props

children · ReactNode · required

The content to display inside the callout. Supports any valid React content including text, paragraphs, lists, code blocks, and more.

variant · 'info' | 'warning' | 'note' | 'tip' | 'check' | 'danger' | 'custom' · default: "custom"

The predefined variant style to use. Each variant has its own icon and color scheme:

• info: Gray/neutral informational style with info icon
• warning: Yellow warning style with warning icon
• note: Blue note style with note icon
• tip: Green tip style with lightbulb icon
• check: Green success style with checkmark icon
• danger: Red danger style with danger icon
• custom: Allows full customization with icon and color props

icon · ReactNode | string

Custom icon to display (only used with variant="custom"). Can be:

• A string icon name from FontAwesome or Lucide
• A React component or element

When using a string, combine with iconType and iconLibrary props.

iconType · 'brands' | 'duotone' | 'light' | 'regular' | 'sharp-duotone-solid' | 'sharp-light' | 'sharp-regular' | 'sharp-solid' | 'sharp-thin' | 'solid' | 'thin'

The FontAwesome icon style type (only used with variant="custom" and string icon). Different styles change the weight and appearance of the icon.

iconLibrary · 'fontawesome' | 'lucide' · default: "fontawesome"

The icon library to use for string icons (only used with variant="custom" and string icon).

color · string

Custom hex color for the callout (only used with variant="custom"). Automatically generates appropriate border, background, and text colors based on the provided color.

Example: "#9333ea", "#3b82f6"

className · string

Additional CSS classes to apply to the callout container.

ariaLabel · string

Custom aria-label for the icon for accessibility. Overrides the default aria-label for predefined variants.

Advanced Examples

Rich Content

Callouts can contain complex nested content:

<Callout variant="tip">
  <p><strong>Pro tip:</strong> Follow these steps:</p>
  <ol>
    <li>First, read the documentation</li>
    <li>Then, try the example</li>
    <li>Finally, build your own implementation</li>
  </ol>
</Callout>

With Links

<Callout variant="note">
  <p>
    For more details, see the <a href="#documentation">documentation</a>.
  </p>
</Callout>

Multiple Paragraphs

<Callout variant="info">
  <p><strong>Important information:</strong></p>
  <p>This callout can contain multiple paragraphs and formatted text.</p>
  <ul>
    <li>It supports lists</li>
    <li>And other HTML elements</li>
    <li>With proper styling</li>
  </ul>
</Callout>

Custom Icon from React

<Callout variant="custom" color="#FF00FF" icon={<CustomIconComponent />}>
  <p>Using a custom React component as the icon.</p>
</Callout>

Accessibility

<Callout variant="info" ariaLabel="معلومات">
  <p>This callout has a custom Arabic aria label for the icon.</p>
</Callout>

Backward Compatibility

For backward compatibility, the component also exports named components:

import { Info, Warning, Note, Tip, Check, Danger } from '@mintlify/components';

<Info>
  <p>Using the old Info component API</p>
</Info>

<Warning>
  <p>Using the old Warning component API</p>
</Warning>

The new variant prop approach is recommended for new implementations.

Styling

The Callout component automatically handles:

• Dark mode support with appropriate color adjustments
• Responsive spacing and layout
• Proper contrast ratios for accessibility
• Icon positioning and sizing
• Content typography with prose styling

For custom variants with color prop, the component automatically:

• Generates lighter background colors
• Creates appropriate border colors
• Adjusts text colors for dark/light modes
• Ensures proper contrast for readability