Callouts

A callout pulls one paragraph out of the reading flow and tells the reader how seriously to take it. Six severities share one anatomy: a tinted panel, a semantic left rule, an icon, and an optional title.

The six severities

Usage

<Tip>
Prefer the shorthand components. The severity is visible in the source.
</Tip>

Every callout accepts an optional title:

<Warning title="Backup first">
This one has a title.
</Warning>

The long form <Callout type="warning" title="..."> is equivalent; an unknown type falls back to note.

Choosing a severity