Usage
Callouts draw attention to important information. Use the generic <Callout> with a type prop, or one of the named variants directly.
Generic syntax
<Callout type="info">
This is an informational callout.
</Callout>Named variants
<Info>This is an info callout.</Info>
<Warning>This action requires caution.</Warning>
<Tip>Use Cmd+K to open search.</Tip>
<Danger>This cannot be undone.</Danger>
<Note>General information here.</Note>Types
Each variant comes with its own color and default icon. The color maps to a theme token, so dark/light modes and tenant custom themes adapt automatically.
| Type | Component | Default icon | Use case |
info | <Info> | info | General information |
note | <Note> | info | Side notes, clarifications |
tip | <Tip> | lightbulb | Helpful suggestions, best practices |
warning | <Warning> | alert-triangle | Caution or important gotchas |
danger | <Danger> | alert-circle | Critical warnings, destructive actions |
Live examples
You can use either the generic Callout or the named variants — they render identically.
Use keyboard shortcut ⌘K to open search from any page.
This action cannot be undone. Make sure you have a backup.
Deleting your project will remove all pages and deployments permanently.
Custom icon
Override the default variant icon with any Lucide icon name or emoji:
<Tip icon="sparkles">
This is a tip with a custom sparkles icon.
</Tip>
<Callout type="info" icon="rocket">
Launch mode activated.
</Callout>
<Note icon="💡">
Emojis work too — anything that is not a Lucide name is rendered as text.
</Note>This is a tip with a custom sparkles icon instead of the default lightbulb.
Launch mode activated — custom rocket icon overrides the default info icon.
Emojis work too — anything that is not a registered Lucide name is rendered as text.
Title
Add a bold title above the content for extra emphasis:
<Warning title="Breaking change">
API v1 will be deprecated on 2026-06-01. Migrate to v2.
</Warning>Breaking change
API v1 will be deprecated on 2026-06-01. Migrate to v2.
Props
| Prop | Type | Required | Description |
type | "note" | "info" | "tip" | "warning" | "danger" | No (default note) | Callout variant — only on generic <Callout> |
title | string | No | Bold title rendered above the content |
icon | string | No | Override the default variant icon (Lucide name or emoji) |