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.

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)

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.

 

 

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.

Examples

Toast Placement Example - Index or standard pages

 

Toast Placement Example - Focus mode (Editor/Campaigns)

 

Toast Placement Example - Studio (main UI)

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

 

 

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

 

Accessibility

 

Health