presentation form · Feedback and notices

Callout

A persistent message box placed inside the content flow to explain, warn, or emphasize information next to the content it qualifies.

reviewpublishedV1 field note

Decisive boundary

A Callout is authored into the content flow; use Alert for dynamically announced urgency and Banner for a page- or site-wide condition.

Definition and intent

What is a Callout UI pattern?

Use the behavior, not the silhouette

A persistent message box placed inside the content flow to explain, warn, or emphasize information next to the content it qualifies. The term is used here as a presentation form that describes placement or motion without deciding every semantic behavior. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.

Keep an important note, warning, or clarification visible beside the content it explains. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.

Know when the label is wrong

The fastest way to identify a pattern is often to reject the nearest alternative. For Callout, the boundary is: A Callout is authored into the content flow; use Alert for dynamically announced urgency and Banner for a page- or site-wide condition.

Do not implement it as Toast for temporary event feedback, Alert for a dynamic live-region message, and Banner for a page-wide announcement. If those requirements describe the real task better, use the related pattern page or the full Feedback and notices comparison before writing code.

Decision process

Decide before choosing a component

Record these requirements in plain language. A library component name is not a substitute for the contract.

Confirm the user job

Keep an important note, warning, or clarification visible beside the content it explains.

Define opening and closing

Present with the page content; it is not normally inserted as event feedback. Usually not dismissible because it remains part of the document.

Specify access behavior

Does not move or receive focus unless it contains an ordinary link or control. Follows normal document reading and focus order; embedded controls remain keyboard operable.

Reject the near miss

Toast for temporary event feedback, Alert for a dynamic live-region message, and Banner for a page-wide announcement.

Behavior contract

What must survive the build

trigger: Present with the page content; it is not normally inserted as event feedback.
dismissal: Usually not dismissible because it remains part of the document.
modality: Non-modal.
focus: Does not move or receive focus unless it contains an ordinary link or control.
keyboard: Follows normal document reading and focus order; embedded controls remain keyboard operable.
interactive: Primarily explanatory content with an optional relevant link, not a required workflow.
persistence: Remains visible while the surrounding content is available.
placement: Inside the content flow, directly beside the paragraph, form, or section it qualifies.
mobile: Wrap text and actions without relying on a narrow side rail or color alone.

Failure modes

Common wrong builds

Adding role="alert" to a static callout on page load.
Using color as the only severity cue.
Making a permanent callout dismissible without preserving the information.

Observable checks

Verify the result

The callout sits next to the content it qualifies.
Static content does not announce as a live alert on every page load.
Severity is conveyed by text or an icon as well as color.
Links and controls follow normal keyboard order.
The message wraps without horizontal overflow on mobile.

Coding-agent handoff

Implementation brief template

Pattern: Callout
Purpose: Keep an important note, warning, or clarification visible beside the content it explains.
Trigger: Present with the page content; it is not normally inserted as event feedback.
Dismissal behavior: Usually not dismissible because it remains part of the document.
Modality: Non-modal.
Focus behavior: Does not move or receive focus unless it contains an ordinary link or control.
Keyboard behavior: Follows normal document reading and focus order; embedded controls remain keyboard operable.
Interactive content: Primarily explanatory content with an optional relevant link, not a required workflow.
Placement: Inside the content flow, directly beside the paragraph, form, or section it qualifies.
Mobile behavior: Wrap text and actions without relying on a narrow side rail or color alone.
Do not implement as: Toast for temporary event feedback, Alert for a dynamic live-region message, and Banner for a page-wide announcement.
Acceptance checks:
- The callout sits next to the content it qualifies.
- Static content does not announce as a live alert on every page load.
- Severity is conveyed by text or an icon as well as color.
- Links and controls follow normal keyboard order.
- The message wraps without horizontal overflow on mobile.

Claim-level references

Sources, not a confidence score

01Site AlertU.S. Web Design System · Official government design-system documentation

Prominent informational and emergency notices placed before page content

02Alert PatternW3C WAI-ARIA Authoring Practices · Official accessibility guidance

Important dynamic messages that do not move focus

03BannersMaterial Design 2 · Official design-system documentation

Prominent page-level messages with optional actions

Frequently asked questions

Callout UI pattern questions

Direct answers based on the reviewed behavior contract above.

What is a Callout in web UI?

A persistent message box placed inside the content flow to explain, warn, or emphasize information next to the content it qualifies. In this reference set it is a presentation form that describes placement or motion without deciding every semantic behavior.

When should I use a Callout?

Keep an important note, warning, or clarification visible beside the content it explains. The decisive boundary to confirm is this: A Callout is authored into the content flow; use Alert for dynamically announced urgency and Banner for a page- or site-wide condition.

What keyboard and focus behavior does a Callout need?

Follows normal document reading and focus order; embedded controls remain keyboard operable. Does not move or receive focus unless it contains an ordinary link or control. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.

How should a Callout behave on mobile?

Wrap text and actions without relying on a narrow side rail or color alone. Its modality is a separate requirement: Non-modal.

How do I verify a Callout implementation?

Start with observable checks: The callout sits next to the content it qualifies. Static content does not announce as a live alert on every page load. Severity is conveyed by text or an icon as well as color. Then verify the remaining checks and compare the result with the linked source guidance.