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 draws attention to important information
This raises a warning to watch out for
This indicates a successful operation or positive outcome
This indicates a potential error
This highlights additional context or supplementary 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 <Info>This draws attention to important information</Info>
2 <Warning>This raises a warning to watch out for</Warning>
3 <Success>This indicates a successful operation or positive outcome</Success>
4 <Error>This indicates a potential error</Error>
5 <Note>This highlights additional context or supplementary information</Note>
6 <Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
7 <Tip>This suggests a helpful tip</Tip>
8 <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">
2 This 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

className

string

Additional CSS classes to apply to the callout

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

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