Designpedia
All terms
Overlays & Surfaces · Containers

Callout

also known as highlight box, note box, admonition

A callout is a visually distinct block (often colored, with an icon) that draws attention to important static information within the flow of a page, such as a tip, warning, or note. It loads with the page and typically can't be dismissed because it isn't a dynamic status message. Documentation sites use callouts heavily.

See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A callout is for static, always-relevant content and usually can't be dismissed; a banner shows a dynamic status and can be dismissed once resolved. Unlike a tooltip it's always visible in the layout, not hover-triggered. A well is a neutral sunken container without the emphasis a callout carries.
In the wild
The blue 'Note:' box in React's documentation is a callout.
Tags
Sources