Callout

Use :::callout for emphasized notes, warnings, tips, and status messages.

1:::callout[Read this first]{2  variant="warning"3  theme="soft"4}5Content stays Markdown.6:::

Attributes

variant: note, info, tip, warning, danger, or success
theme: callout theme name
[Label]: optional title displayed above the body, preferred for new Markdown
title: optional title retained for existing Markdown
icon: local icon reference such as @fa-duotone/triangle-exclamation

Defaults:

variant="note"
theme="soft"

Unknown variants fall back to note and produce a non-fatal diagnostic where diagnostics are available.

Existing title="" content remains valid. If [Label] and title are both present, [Label] is used. Differing values produce a non-fatal diagnostic.

Markdown Content

Callouts support nested Markdown:

1:::callout[Use the server renderer]{variant="tip"}2Render fields with:3 4```tsx5<MarkdownRenderer markdown={post.content} />6```7:::

Variants

Use variants semantically:

note: neutral supporting context
info: explanatory context
tip: recommended usage or helpful shortcut
warning: important caveat
danger: destructive or breaking behavior
success: confirmation or completed state

Themes

Built-in callout themes:

soft
solid
glass

1payloadMarkdown({2  themes: {3    callout: {4      items: [5        {6          name: 'blueprint',7          classes: 'rounded-xl border border-cyan-400/40 bg-cyan-950/30 px-4 py-3',8        },9      ],10    },11  },12})

Then select it in Markdown:

1:::callout[Blueprint]{2  variant="info"3  theme="blueprint"4}5This callout uses a source-defined theme.6:::