Callout

Overview

The Callout component draws attention to important information using colored banners with icons. Four semantic variants are available, each with a distinct color and icon to convey meaning at a glance.

It is also available via four shorthand aliases: Note, Warning, Tip, and Danger.

Example

Usage

Default (info)

<Callout>This is an informational callout.</Callout>

Variants

    <Callout type="info">Informational message.</Callout>
 
    <Callout type="warn">Something might go wrong.</Callout>
 
    <Callout type="error">Something went wrong.</Callout>
 
    <Callout type="success">Everything looks good.</Callout>
 

Shorthand aliases

For convenience, four aliases map directly to callout variants:

    <Note>This uses the info variant.</Note>
 
    <Warning>This uses the warn variant.</Warning>
 
    <Danger>This uses the error variant.</Danger>
 
    <Tip>This uses the success variant.</Tip>

Callout with rich content

Callouts support any inline MDX content:

<Note>
  Make sure to set your `API_KEY` environment variable before running the
  server. See the [configuration guide](/configuration) for details.
</Note>

Props

Callout

Shorthand aliases

Accessibility Notes

• Callouts are rendered as <div> elements with no ARIA role by default. For critical alerts, consider adding role="alert" to the component.
• Do not rely solely on color to convey meaning — the icon and content together provide sufficient context.
• Avoid overusing callouts on a single page as they lose impact when too frequent.