WritedocsWritedocs

Callout

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code
Two ways to write this#

Either <Callout type="info"> or the shorthand <Info> below renders identically - both accept the same title prop.

This is <Tip> - the shorthand form of <Callout type="tip">, with no title set.

<Callout type="info" title="Two ways to write this">
  Either form renders identically.
</Callout>

<Tip>
  The shorthand form, with no title.
</Tip>

Every type has a same-named shorthand component - <Note>, <Info>, <Tip>, <Warning>, <Danger>, <Check> - so <Info title="...">...</Info> and <Callout type="info" title="...">...</Callout> are two ways to write the exact same thing. Both forms are injected automatically, same as every other built-in.

Callout props

type"note" | "info" | "tip" | "warning" | "danger" | "check"default: "note"

Only on Callout — each shorthand hardcodes its own type.

titlestring

An untitled callout renders its icon inline with a single line of body text instead of a bold heading line above it.

iconstring

Only on Callout — replaces the type’s own icon. Any icon string, see Icons.

colorstring

Only on Callout — any CSS color. Replaces the type’s accent, which the border, background tint, icon, and title are all derived from.

A custom callout: <Callout icon="key" color="#FFC107">.