Available messaging components
Pilot

Callout

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

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.

ModalAlert

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.

Toast

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.

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

Upsell
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)..