Skip to main content
Style callouts as Note, Warning, Info, Tip, Check, Danger, or create your own callout:
This adds a note in the content
<Note>This adds a note in the content</Note>
This raises a warning to watch out for
<Warning>This raises a warning to watch out for</Warning>
This draws attention to important information
<Info>This draws attention to important information</Info>
This suggests a helpful tip
<Tip>This suggests a helpful tip</Tip>
This brings us a checked status
<Check>This brings us a checked status</Check>
This is a danger callout
<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>

​
Custom callout properties

The generic Callout component supports custom icons and colors. The typed callouts (Note, Warning, Info, Tip, Check, Danger) use preset icons and colors and only accept children.
​
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
  • 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.