Available messaging components

Components

BannerCallout

BannerCallouts 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.

Go to the BannerCallout component

BannerSlim

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

Go to the BannerSlim component

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.

Go to the ModalAlert component

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.

Toasts 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"

Go to the Toast component

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.

BannerUpsell
BannerUpsells 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)..