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
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
Warning
Error
Info
There is a known issue that on some pages the Dismiss button appears to stretch the height of the container due to Bootstrap overrides.
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
Toasts should sit 16px from the bottom-right of the screen.
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
Examples
Toast Placement Example - Index or standard pages
Campaign
Toast examples - Index
Toast Placement Example - Focus mode (Editor/Campaigns)
Toast example - BEE Editor
Toast Placement Example - Studio (main UI)
Toast examples -
Guidelines
Use cases
Feedback on Action: Use to provide immediate feedback after a marketer performs an action.
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
Do
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.
Don't
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
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