When to use
Use toasts for confirmations, simple updates, or low-priority alerts. For critical information or issues, use a more prominent and permanent component, such as a Modal, Callout, or Banner.
Options
Message
Toasts must include text that communicates a message. Keep the wording concise and ensure it clearly explains what has happened or is happening. Refer to our content standards for detailed writing guidelines.
Info
Use an info toast to inform users that a background process has started, especially if they need to wait before continuing. It’s also useful for neutral messages or cases that don’t fit other variants.
Positive
Use a positive toast to inform users about a successful action or the completion of a task. Keep it brief and celebratory, focusing on confirmation rather than extra detail.
Warning
Use sparingly. Warning toasts should only be shown when an action succeeds but could cause problems later. If users can fix it immediately, offer a clear next step.
Negative
Use an error toast to inform users that their action has failed. Provide a way to resolve the issue either in the underlying page content or in the Toast.
Title
If the toast description is long or complex, include a title to help users quickly grasp the essence of a toast message. Don’t use the title to communicate the toast’s variant (e.g. “Error” or “Warning”)
Action
Include an action to help users immediately respond to the toast (e.g. “Retry” or “Add receipt”). If there’s no meaningful next step, don’t add an action just to fill space.
Link
Include a link to help users to learn more about the message communicated in the toast. If the message is for basic confirmation (e.g. “Changes saved”), don’t add a link just to fill space.
Action and link
Include both an action and a link if the user might want to take immediate action while also having the option to learn more or view additional details about the situation.
Behaviour
Placement
Toasts appear in the bottom-left corner of the screen, aligned with the main sidebar navigation. This minimises overlap with content avoids competing with the help (“?”) button in the bottom right corner. When no navigation is present, toasts are positioned at the screen’s far bottom-left.
Width
Toasts have a fixed width of 400px (100% on small screens). This width is not configurable, as we want to keep toasts appearance and placement consistent. This is particularly relevant when multiple toasts are stacked on top of each other.
Duration
Toast duration is determined by variant and cannot be customized. The display time should balance noticeability—giving users enough time to read and understand—with non-intrusiveness, so toasts don't linger longer than necessary.
| Variant | Duration | Rationale |
|---|---|---|
| Info | 5 seconds | Informational toasts communicate low-severity system updates (e.g., “Changes saved” or “Export started”). 5 seconds provides enough time to read and comprehend without interrupting the user’s flow. |
| Positive | 5 seconds | Success toasts confirm completed actions (e.g., “Reimbursements enabled”). These are reassuring but require minimal user attention. A short, consistent 5-second display reinforces responsiveness while keeping the experience smooth. |
| Warning | 8 seconds | Warning toasts indicate a potential issue or an action that may have consequences (e.g., “Card balance below limit”). They require slightly longer visibility to ensure users can read and decide whether to act, without feeling rushed. |
| Negative | ∞ (Persistent) | Error toasts communicate problems that typically require user intervention. Automatically dismissing them risks the user missing critical information. Errors persist until explicitly dismissed, ensuring visibility and accountability. |
Animation
Toasts animate in from the bottom with a slight bounce at the end—like a real toast popping out of a toaster. This movement draws attention naturally without being jarring, so users notice the feedback without losing focus.
Best practices
Don’t overuse toasts
Toasts are primarily for brief, transient feedback triggered by user actions. Use them when users should notice something, but don’t need to stop what they’re doing.
For trivial updates, skip the toast. For critical issues, use a more prominent and permanent component, such as a Modal, Callout, or Banner.
Make it actionable
If users can fix or undo something, give them a clear way to do it right from the toast. This could be a button (e.g. “Retry”, “Undo”) or a link to the relevant page (“View details”, “Add receipt”). Don’t just describe the problem—help users resolve it quickly.
Content standards
Avoid technical terms and language
Write toast messages in plain, user-friendly language. Don’t assume technical knowledge and describe issues in terms users understand.
Don’t use full stops at the end and avoid complicated sentence structures that require commas.
Don’t overload with detail
Keep toasts short and direct. Toasts are for quick feedback, not long explanations.
Use a longer, more descriptive sentence only when it removes ambiguity or provides critical clarity.
Since our toasts have a fixed width, keep content to basic text and an action (when relevant). Don’t nest additional components (buttons, inputs, checkboxes, etc.) within the toast.
Try to avoid using more than 6 words per toast.
Keep messages blame-free
Always frame the message around the system state or the required action, not the user’s mistake. This keeps focus on what the user can do next.
When something goes wrong, users already feel frustrated. Blaming them directly (“You entered the wrong password”) adds friction and damages trust.
Related components
- Banner: A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
- Callout: Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
- Modal: A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.