Callouts
Add info, notes, tips, checks, warnings, danger, and custom callout components to highlight important information in your documentation.
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.
iconstringThe icon to display.
Options:
- Font Awesome icon name, if you have the
icons.libraryproperty set tofontawesomein yourdocs.json - Lucide icon name, if you have the
icons.libraryproperty set tolucidein yourdocs.json - Tabler icon name, if you have the
icons.libraryproperty set totablerin yourdocs.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:
- Convert your SVG using the SVGR converter.
- Paste your SVG code into the SVG input field.
- Copy the complete
<svg>...</svg>element from the JSX output field. - Wrap the JSX-compatible SVG code in curly braces:
icon={<svg ...> ... </svg>}. - Adjust
heightandwidthas needed.
iconTypestringThe Font Awesome icon style. Only used with Font Awesome icons.
Options: regular, solid, light, thin, sharp-solid, duotone, brands.
colorstringCustom color as a hex code (for example, #FFC107). Sets the border, background tint, and text color of the callout.
Was this page helpful?Suggest editsRaise issue