Callout

Callouts draw attention to important information. Use them for tips, warnings, and critical notices.

Types

Info

Use info for helpful tips, notes, and background context.

This is an informational callout. Great for tips, notes, and helpful context. Supports bold, italic, and inline code.

<Callout type="info">
  This is an informational callout.
</Callout>

Warning

Use warn for potential issues, breaking changes, or caveats.

This is a warning callout. Use it to alert users about potential issues or important caveats they should be aware of.

<Callout type="warn">
  This is a warning callout.
</Callout>

Error

Use error for critical warnings, destructive actions, or security notices.

This is an error callout. Use it for critical warnings, destructive actions, or security-related notices.

<Callout type="error">
  This is an error callout.
</Callout>

Default (no type)

Omitting the type prop renders a neutral callout.

A default callout without a type. Renders with neutral styling.

<Callout>
  A default callout without a type.
</Callout>

With Rich Content

Callouts support full Markdown inside them — bold, links, code, and even other components.

You can use bold text, links, and inline code inside callouts.

echo "Even code blocks work!"

<Callout type="info">
  You can use **bold text**, [links](/components/callout),
  and `inline code` inside callouts.

  ```bash
  echo "Even code blocks work!"
  ```
</Callout>

Props

Prop

Type

Callout

On this page