Callout

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> - 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"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.