Callout
Callout provides a clean way to highlight important information in documentation.
All Variants
<Callout variant="info">Informational note</Callout>
<Callout variant="success" title="Tip">Helpful suggestion</Callout>
<Callout variant="warning" title="Important">Pay attention</Callout>
<Callout variant="danger" title="Warning">Critical information</Callout>
<Callout variant="neutral">General note</Callout>
ℹ️
Informational note
✅
Tip
Helpful suggestion
⚠️
Important
Pay attention
⛔
Warning
Critical information
ℹ️
General note
With Custom Icon
<Callout variant="info" title="Pro Tip" icon="💡">
Use compound components for flexibility.
</Callout>
💡
Pro Tip
Use compound components for flexibility.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | info | Semantic style + icon |
title | string | — | Bold title |
icon | ReactNode | — | Custom icon override |
Related Components
- Alert — More urgent messaging
- InfoBlock — Structured reference content