Toast

Brief, unobtrusive messages for system feedback

Known issues
Show details
Known issues
Published: February 21, 2024
Updated: February 21, 2024

Overview

Toasts are a non-disruptive, lightweight notification designed to inform marketers of the status of an operation or to provide quick feedback. It appears temporarily at the bottom-right edge of the screen, providing immediate, contextual information. Toasts are best used for transient messages that confirm actions or relay short, informative alerts.

Error toasts and toasts that require dismissal by the user should be avoided and used only in special circumstances.

Design

Structure

  • Icon: Toasts include a leading icon to help illustrate the sentiment behind the message
  • Content: A brief phrase that indicates the action or event that occurred.
  • Dismiss button: A button to quickly remove the toast from the interface.
  • Action Items (optional): Actions that can be taken directly from the toast—for example, creating a New folder that has a navigation link to the new folder; providing an undo after an action is completed.
Toast property table 10 - All options

Toast property table 10 - All options

Variants

  • Success: used to indicate an action was completed successful
  • Warning: to indicated that the marketer should proceed with caution with the recently completed action. Should generally be accompanied with actions (i.e. proceed or cancel
  • Error (use sparingly): used to indicate that a particular action was not successful. Aurora practices lean towards providing localized, contextual feedback for errors, so use this option as a last resort when the UI cannot accommodate an Error Banner or error text below an input
  • Info (not used commonly, may deprecate)
Success

Success

Warning

Warning

Error

Error

Info

Info

Behavior

  • Many toasts appearing at once should almost never happen, and warrants an escalation. No more than four toasts should be visible at one time
  • Toasts can contain a custom timeout for dismissal, and success toasts should auto dismiss at 5 seconds by default
  • Toasts should sit above modal overlays, selects, drop downs, and menus, and panels

Position

  • Toasts sit in the bottom-right corner of the interface. Toasts are placed above the content, but behind a modal and scrim. Consider the bottom-right a safe area when designing and prevent placing critical actions in this area that may be covered by toasts.
  • In special circumstances, the position of toasts may be adjusted to make room for the bottom toolbar—as seen in Journey Studio or the Template editing experience.
  • Toasts should display 16px from the bottom and right, with spacing of 16px between stacked messages. New toasts should appear at the bottom, pushing older toasts toward the top.

 

Toast placement

Toast placement

 

Persistent toasts

Default timeout for success, warning, and informational toasts is 5 seconds. The default for error toasts is to persist until the user closes or successive toasts are stacked and it reaches the 5th position.

Persistent toasts

Persistent toasts

Examples

Toast Placement Example - Index or standard pages

Campaign

Campaign

Toast examples - Index

Toast examples - Index

 

Toast Placement Example - Focus mode (Editor/Campaigns)

Toast example - BEE Editor

Toast example - BEE Editor

 

Toast Placement Example - Studio (main UI)

Toast examples -

Toast examples -

Guidelines

Use cases

  • Feedback on Action: Use to provide immediate feedback after a marketer performs an action.
  • Transient Information: Display temporary, non-critical information.
  • Confirmation: Confirm a successful action when no further action is required from the marketer.

Examples

  • Providing a success toast when updating a campaign's schedule
  • A warning toast when the marketer loses internet connection (so they don't continue to make edits that can't be saved)
  • An error toast when the marketer saves a Journey but the save is unsuccessful

 

  • Use success toasts on creation tasks as a way provide feedback to the marketer that the task was successful
  • Keep messages short and to the point.
  • Use for non-critical, brief feedback that does not require action to dismiss.
  • Time the toast to disappear after enough time has passed for the marketer to read the message.
  • Overuse toasts for critical, action-required messages.
  • Block important UI elements with the toast.
  • Use lengthy or complex sentences/jargon that might confuse marketers.
  • Modify the styles of the toast, including using different icons than those built into the component for each respective variant
  • Use toasts to indicate that a form submission was unsuccessful—use an Error Banner and error text below the input

 

Content

General

  • Toasts contain a message, a dismiss button, and optionally up to two actions
  • They're for at-a-glance feedback, and should be short and concise. They're meant to be scannable, and should very rarely exceed 2-3 lines
  • While the message should be concise, links can provide access to documentation for added background, instruction, and context

 

Success

  • Success toasts can be used to confirm that an action has been completed when it it not otherwise obvious.
  • Messages should be brief, with a verb followed by a noun
  • ✅ "Catalog updated"
  • 🚫 "Successfully updated your catalog items"

 

Errors

  • Error messages should not place blame on the user and make them feel like they did something wrong
  • Error messages should be helpful, describing how the problem can be fixed
  • When we receive an unexpected error, use the text "Something went wrong, please refresh and try again. If the problem persists, contact your CSM." If possible, include an action in the toast allowing the user to 'Retry' the previous action
  • Error messages can be used to indicate that something went wrong with a form submission. Input-level error messages, and/or a banner on the form should provide more detail
Error toasts

Error toasts

 

Accessibility

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Known issues