Writing contentComponents

Callout

The <Callout> component highlights important information, warnings, or tips in your documentation. Use callouts to emphasize critical details that readers shouldn’t miss, such as breaking changes, prerequisites, or helpful best practices.

To display very short pieces of information like status indicators and version numbers, use badges.

Usage

This adds a note in your documentation.
Markdown
1<Note>This adds a note in your documentation.</Note>

Variants

Intents

This raises a warning to watch out for
This indicates a successful operation or positive outcome
This indicates a potential error
This draws attention to important information
This celebrates an announcement, styled using the primary accent of the docs site
This suggests a helpful tip
This shows a checked status
Markdown
1<Warning>This raises a warning to watch out for</Warning>
2<Success>This indicates a successful operation or positive outcome</Success>
3<Error>This indicates a potential error</Error>
4<Info>This draws attention to important information</Info>
5<Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
6<Tip>This suggests a helpful tip</Tip>
7<Check>This shows a checked status</Check>

Custom icon

Example callout

This callout uses a title and a custom Font Awesome icon.

Markdown
1<Warning title="Example callout" icon="skull-crossbones">
2This callout uses a title and a custom Font Awesome icon. 
3</Warning>

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