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.
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"
What component should I use?
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)..