Available messaging components


Callouts sit on a page or surface and provide status alerts, information or recommendations to a user. They are used for highest priority messages, usually at the top of a page.


SlimBanner conveys brief information related to a specific section of a page. The message can relay success, warning, error or general information. SlimBanners are used to reference a specific section of a page, or in any dense interface where space is a concern.


A modal dialog can be used to alert a user of an issue, or to request confirmation after a user-generated action. ModalAlert overlays and blocks page content until it is dismissed by the user.


Toasts are the least disruptive of messages in that they are ephemeral and don’t require a user to act or dismiss them. They appear opposite a surface’s main navigation and overlay content without fully blocking it. They can be used to:
  • Acknowledge a user action immediately after it happens
  • Acknowledge a user action while nudging them to improve their experience
  • Alert users of connectivity issues or unknown errors without disrupting their flow

What component should I use?

Here is a quick diagram to help you make a decision on what Messaging component to use. If you don’t see it here, perhaps you need a related component.

A popover can be formatted to provide help and guidance around new features, or features a user may not be aware of.

Upsells are on-page banners that encourage more ad spend and upgrades. They can also be used to promote and market new features.

Error message variants
Variants for other non-messaging components that provide a way to show an error message (simple error status indicators are not included)..