Callouts

Add info, notes, tips, checks, warnings, danger, and custom callout components to highlight important information in your documentation.

Use Note, Warning, Info, Tip, Check, or Danger callouts, or create a custom callout:

<Note>This adds a note in the content</Note>

<Warning>This raises a warning to watch out for</Warning>

<Info>This draws attention to important information</Info>

<Tip>This suggests a helpful tip</Tip>

<Check>This brings us a checked status</Check>

<Danger>This is a danger callout</Danger>

This is a custom callout

<Callout icon="key" color="#FFC107" iconType="regular">This is a custom callout</Callout>

The generic Callout component supports custom icons and colors. The typed callouts (Note, Warning, Info, Tip, Check, Danger) use preset icons and colors and accept only children and className.

• icon (string) — The icon to display.

Options:

• Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
• Lucide icon name, if you have the icons.library property set to lucide in your docs.json
• Tabler icon name, if you have the icons.library property set to tabler in your docs.json
• A single emoji (for example, 💡 or 🚀)
• URL to an externally hosted icon
• Path to an icon file in your project
• SVG code wrapped in curly braces

For custom SVG icons:

1. Convert your SVG using the SVGR converter.
2. Paste your SVG code into the SVG input field.
3. Copy the complete <svg>...</svg> element from the JSX output field.
4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
5. Adjust height and width as needed.

• iconType (string) — The Font Awesome icon style. Only used with Font Awesome icons.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

• color (string) — Custom color as a hex code (for example, #FFC107). Sets the border, background tint, and text color of the callout.

• className (string) — Additional CSS classes to apply to the callout. Accepted by the generic Callout and by the typed callouts.

• Components overview
• Cards
• Migrate from Document360