Skip to main content
Callouts interrupt the reading flow so people stop and pay attention. Each type sets a different expectation: optional advice, useful context, a risk, or confirmation that something worked. Use those signals consistently. When callout styling is just decoration, readers can’t tell which information deserves their attention.

​
The types of callouts

Each callout type has its own icon and color, and readers learn what they mean from how you use them. Choose a consistent meaning for each one. Here are some general guidelines:

​
How to choose

Ask yourself, “What happens if the reader skips this callout?”
  • Nothing bad, they just miss something useful → <Tip> or <Note>
  • They might misunderstand how something behaves → <Info>
  • Something breaks or data gets corrupted → <Warning>
  • Data gets lost, accounts get compromised, or something irreversible happens → <Danger>
The <Check> callout is different. Use it to give users confirmation after they complete a task. Use the other callout types to guide users before they take an action or make a decision. If skipping the content makes the procedure impossible to complete, it doesn’t belong in a callout. The next lesson covers what to do instead.
Example of a <Check> callout

​
The note versus info distinction

These two are easy to conflate, and readers often can’t tell them apart. If you want to use both, draw the line this way:
  • <Note> is a side thought: “By the way, you might want to know this.”
  • <Info> is context that changes how the reader understands something: “This feature behaves differently on the free plan.”
If that distinction is more than your team will apply consistently, pick one and use it for both. Readers won’t miss the difference. They will notice if warnings stop meaning risk.

​
Don’t escalate to sound important

The most common callout mistake is using a warning because the content feels significant, but there’s no actual risk for the user. If you’re using <Warning> to emphasize a default setting or note an API behavior, you’re training readers to ignore your warnings. Reserve warning and danger callouts for potentially destructive actions or situations where data could be lost or compromised. If you can describe the worst-case outcome and it’s “your request fails with a 400 error,” that’s not worthy of a warning or danger callout. If the worst-case is “all data in this environment is permanently deleted,” that’s danger.

​
When none of the types fit

If you need a callout with a meaning the built-in types don’t cover, like a recurring “Enterprise only” note, use the generic <Callout> component with your own icon and color. Use it the same way every time so readers learn what it means.
Example of a custom callout
Next up: When callouts stop working—what happens when you use too many callouts and how to fix it.