Callout
Generic callout#
<Callout variant="note" title="Heads up">
This is a custom callout body.
</Callout>Variants#
- Note — neutral supplemental information
- Tip — best practices and helpful shortcuts
- Warning — risky operations or destructive behavior
- Info — contextual details readers should know
- Check — success or completion states
- Danger — irreversible actions and data loss
<Tip>Best practices and helpful shortcuts.</Tip>
<Warning>Risky operations or destructive behavior.</Warning>Custom icon#
<Callout variant="tip" icon="flame" title="Hot path">
This request is on the critical path.
</Callout>Properties#
Callout#
| Name | Type | Description |
|---|---|---|
variant |
'note' | 'tip' | 'warning' | 'info' | 'check' | 'danger' |
Visual style and default icon. Default: note |
title |
ReactNode |
Optional heading above the body. Without a title, only the body is shown. |
icon |
ReactNode | string |
Lucide name or element. Overrides the variant default icon. |
children |
ReactNode |
Callout body content. |
Shortcut components#
Note, Tip, Warning, Info, Check, and Danger accept only children and map to the matching variant.
Back to Components overview.