Callouts

Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers.

Properties

Customize your Callouts using the following properties:

intent
stringRequired

The type of callout. Available options: info, warning, success, error, note, launch, tip, check

title
string

The title of your Callout

icon
string | ReactElement

The icon of your Callout. Can be:

  • A Font Awesome icon name
  • A React element
  • If not specified, uses a default icon based on the intent:
    • info: InfoCircle
    • warning: Bell
    • success: CheckCircle
    • error: WarningTriangle
    • note: Pin
    • launch: Rocket
    • tip: Star
    • check: Check

Example Callout

This Callout uses a title and a custom icon.

Callout varieties

Note callouts

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

Warning callouts

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

Success callouts

This indicates a successful operation or positive outcome
1<Success>This indicates a successful operation or positive outcome</Success>

Error callouts

This indicates a potential error
1<Error>This indicates a potential error</Error>

Info callouts

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

Tip callouts

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

Check callouts

This brings us a checked status
1<Check>This brings us a checked status</Check>
Built with