Callout
A callout draws attention to something a reader shouldn't miss: a warning before a destructive step, a tip that saves time, a note on an edge case. It's a tinted box with an icon, an optional title, and any Markdown inside.
Example
Readers keep seeing the last published version until you publish.
<Callout type="warning" title="Saving is not publishing">
Readers keep seeing the last published version until you publish.
</Callout>Props
typestringThe kind of callout, which sets its colour and icon.
| Value | Use it for |
|---|---|
note | Extra detail a reader may want |
info | Context a reader benefits from but can skip |
tip | A shortcut, or a better way to do what they're already doing |
success | Confirmation that something worked |
warning | Something that will cost them time or data if they get it wrong |
danger | Something destructive and hard to undo |
error | Something that has gone wrong |
variant is accepted as another name for it.
titlestringA bold heading above the content. Leave it out for a callout that's only a sentence or two.
childrenMarkdownThe content, between the tags. It can hold paragraphs, lists, links and code. Leave a blank line after the opening tag and before the closing one, or the Markdown inside isn't parsed.
Every type
Extra detail a reader may want.
Context a reader benefits from but can skip.
A shortcut, or a better way to do what they're already doing.
Confirmation that something worked.
Something that will cost them time or data if they get it wrong.
Destructive and hard to undo.
Something that has gone wrong.
<Callout type="note" title="note">
Extra detail a reader may want.
</Callout>
<Callout type="info" title="info">
Context a reader benefits from but can skip.
</Callout>
<Callout type="tip" title="tip">
A shortcut, or a better way to do what they're already doing.
</Callout>
<Callout type="success" title="success">
Confirmation that something worked.
</Callout>
<Callout type="warning" title="warning">
Something that will cost them time or data if they get it wrong.
</Callout>
<Callout type="danger" title="danger">
Destructive and hard to undo.
</Callout>
<Callout type="error" title="error">
Something that has gone wrong.
</Callout>Shorthand tags
<Note>, <Info>, <Tip> and <Warning> are a callout of that type, so pages written for Mintlify or Fern work without a rewrite. They take title too.
Test keys never charge a card.
<Tip title="Use the sandbox">
Test keys never charge a card.
</Tip>Writing good callouts
- Use them sparingly. When everything is highlighted, nothing is. One or two on a page keeps them meaningful.
- Pick the type by consequence.
warninganddangershould mean the reader loses something if they skip it. - Put the point in the title. A reader skimming should get the message from the title alone.
Related
- Badge: a short coloured label inside a sentence.
- Accordion: detail most readers can skip.
- Every component: the full list, and the rules for writing tags.