Callout
A highlighted information box that draws attention to important notes, warnings, tips, or errors. The callout type is selectable inline and changes both the color scheme and icon. Add with /callout or /note.
Callout types
Changing the type
A <select> dropdown inside the callout shows the current type. Click it to switch between Info, Warning, Success, and Error. The icon and color scheme update instantly — no content is lost.
| Type | Icon | Colors (dark / light) |
|---|---|---|
| Info | Info | Blue bg, blue border, #93c5fd text / #1e40af text |
| Warning | AlertTriangle | Amber bg, amber border, #fcd34d text / #92400e text |
| Success | CheckCircle2 | Green bg, green border, #86efac text / #14532d text |
| Error | AlertCircle | Red bg, red border, #fca5a5 text / #7f1d1d text |
Icons are Lucide icon components, not emoji — they render as crisp vector icons at any zoom level and inherit the callout's theme color.
Content
The text area to the right of the icon is a full Tiptap editor. It supports bold, italic, inline code, links, and all other inline marks. The text color is fixed to the callout type's theme color — it cannot be overridden independently.
metadata.calloutType. One of info, warning, success, error. Defaults to info.Publishing
Renders as a rounded box with a left-padded emoji icon and the Tiptap HTML content. Background, border, and text colors are computed server-side from the callout type and page theme.