Callouts
Interrupt the reading flow with something the reader must not miss — by intent, not colour.
Use a callout to interrupt the reading flow with something the reader must not miss. Pick the
variant by intent, not colour — the severity is what serializes to the knowledge face. There
are six aliases over five severities: Info/Note (neutral), Tip, Check (success),
Warning, and Danger.
When to use it
Reach for a callout when a single idea needs to break out of the prose — a caveat the reader will trip over, a shortcut worth knowing, a confirmation, or a destructive action. One per idea: don't stack many in a row or you flatten their signal.
Variants
| Component | Severity | When to use |
|---|---|---|
<Info> / <Note> | info | Neutral context worth keeping in mind |
<Tip> | tip | A shortcut or a better way to do something |
<Check> | success | A confirmation or a passing state |
<Warning> | warning | Something that will bite you if ignored |
<Danger> | danger | A destructive or irreversible action |
Props
Each takes an optional title and its children as the body.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Bold heading shown above the body |
children | ReactNode | — | The callout body |
Live example
Info
Tip
Check
Warning
Danger
Best practice
Don't stack many callouts in a row — it flattens their signal. One per idea.
What the agent sees
A callout is one of the few primitives that serializes. The body is flattened to plain text and the severity is preserved, so an agent can surface "every warning on this page" without parsing colour:
{
"kind": "callout",
"id": "warning",
"title": "Warning",
"severity": "warning",
"body": "Something that will bite you if ignored.",
"summary": "Something that will bite you if ignored."
}