Callout

Highlight important information with styled callout boxes.

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

Variants

Information

This is an informational callout for general notes.

<Callout type="info" title="Information">
  This is an informational callout for general notes.
</Callout>

This callout warns about potential issues.

<Callout type="warning" title="Warning">
  This callout warns about potential issues.
</Callout>

This callout highlights critical issues or breaking changes.

<Callout type="danger" title="Danger">
  This callout highlights critical issues or breaking changes.
</Callout>

This callout shares helpful tips and best practices.

<Callout type="tip" title="Tip">
  This callout shares helpful tips and best practices.
</Callout>

Callouts work without a title too.

<Callout type="info">
  Callouts work without a title too.
</Callout>

Prop	Type	Default	Description
`type`	`"info" \| "warning" \| "danger" \| "tip"`	`"info"`	Callout variant
`title`	`string`	—	Optional title text
`children`	`ReactNode`	required	Callout content

On This Page