Contextual messaging refers to several components and techniques designed to deliver information at key moments throughout a user's journey.

In seeking simplicity, product designers rely on techniques like progressive disclosure to provide users with the power, functionality, and information they need while keeping the experience simple and easy to understand.

With a wide range of components available for providing information to users, this guide aims to make choosing one for your messaging simple.

Alerts

Alerts are components that signal information, warnings, or danger to provide confirmation or avoid potential problems.

Toast

Choose when your messaging requires event-driven feedback.

Banner

Use when the messaging requires persistent, non-dismissible content near the described object.

Overlays

Overlays are components that overlap page-level content with supplemental information. The way overlays launch and obscure page content differ from component to component. We'll help clear up which to use when.

Tooltip

Choose a for small and medium amounts of content. Users need to hover an element to reveal the messaging.

Basic hover

A simple 1-2 sentence definition, instruction, explanation, value, or additional context.

Advanced hover

An in-depth definition, instruction, explanation, additional context, or links.

Inline tooltip error

An error message and instructions to remedy, if applicable.

Modal

We recommend a for large quantities of information in cases where covering page content is not a concern. Users click an action to launch the modal.

Information

A Modal is also an ideal candidate for interrupting a user's workflow by providing messaging, as a moment of friction, before a potentially destructive decision.

Confirmation

Drawer

A can be used as an alternative to a when access to page-level content is important. Users click an action to toggle the drawer.

Loading

Loading can be one of the most important moments to keep users informed throughout their journey. When a user understands the system's status they feel in control of the outcome. A predictable interaction promotes open, authentic communication and builds trust between the user and application.

Button with feedback

A reflects the status of an action during a loading event with real-time feedback and messaging.