Effective user communication is vital for creating seamless digital interactions. The Fluent 2 Design System provides a comprehensive set of tools and guidelines to enhance notification delivery through toasts, ensuring users stay informed without disruption. This document explores the core aspects of toasts—temporary notification surfaces—highlighting their types, behaviors, layout considerations, accessibility, and content strategies to maximize their effectiveness in modern applications.
Resources
Types of Toasts
Toasts are versatile components categorized into three primary types: confirmation, progress, and communication. Each serves a distinct purpose and has configurable slots to adapt to specific user goals, as illustrated in the accompanying diagrams.
Confirmation Toasts
Confirmation toasts acknowledge completed user actions, providing instant feedback on success, errors, warnings, informational messages, or ongoing progress. They are typically triggered directly by user interactions, such as saving a file or completing a form.
Progress Toasts
Progress toasts communicate the status of ongoing operations, keeping users informed about tasks like uploads, downloads, or data processing. They can be tailored to show precise completion percentages or indefinite loading indicators.
Communication Toasts
Communication toasts serve to notify users of system messages or external actions, including mentions, reminders, replies, or updates. They often contain actionable links guiding users toward resolution or further information. These toasts can be transient or persistent and are dismissible only when an alternative surface, such as a notification center, exists.
Behavior
Dismissal Strategies
Toasts can be dismissed based on different mechanisms: timed, conditional, or explicit user-initiated actions.
Timed Dismissal
Typically, toasts without user actions automatically disappear after approximately seven seconds. Hovering over a toast with a mouse pauses this timer, allowing users to read longer messages. However, keyboard navigation does not focus on non-interactive toasts, limiting pause capabilities for keyboard users.
Conditional Dismissal
Persistent toasts remain visible until a specific condition is met, such as the completion of an upload or data processing task. These should not be used for critical actions requiring user intervention; instead, more forceful surfaces like message bars or modal dialogs are preferable for such scenarios.
Express Dismissal
Including a Close button allows users to manually dismiss toasts when they might need to revisit the information later, for example, in a notification center. This approach ensures user control over transient messages.
Progress Indicators: Determinate vs. Indeterminate
Progress toasts can display either determinate or indeterminate indicators, depending on the application’s capability and the nature of the task.
- Determinate: Show a progress bar and percentage completion when the estimated time is predictable, providing reassurance that progress is being made.
- Indeterminate: Use a spinner icon when the completion time is unknown or unreliable. Avoid combining both indicators in a single toast.
Layout
Consistent Placement
To ensure predictability and minimize user disruption, toasts should appear in consistent locations—commonly the top-right or bottom-right corners of the application interface. This placement aligns with user expectations, especially when toggling notification drawers or other interactive components.
Managing Toast Stacking
To prevent overwhelming users, limit the number of concurrent toasts to four within a single toaster container, maintaining 16 pixels of spacing between each. New toasts appear at the edge of the container, pushing older messages inward, which encourages a clean and manageable notification flow.
Accessibility
Proper use of the intent property ensures semantic correctness, appropriate icons, and aria-live regions for screen readers. Most feedback toasts, excluding informational ones, employ an “assertive” aria-live region to interrupt ongoing announcements and deliver urgent messages. However, overuse can disrupt user flow; therefore, balance is essential to avoid cognitive overload.
Content
Effective Titles
The main message should be conveyed succinctly in the toast title, emphasizing clarity and brevity. Most confirmation and communication toasts use passive voice, starting with a noun and ending with a past tense verb, such as “File saved” or “App was updated.” For in-progress notifications, titles should begin with an -ing verb, like “Uploading file” or “Migrating data,” and summarize multiple processes if applicable, e.g., “Uploading 6 files to OneDrive.” Capitalize only the first word, and omit the period for consistency with style guides.
Additional Context
Include brief, skimmable details such as next steps or troubleshooting tips, limited to about 60 characters to ensure quick comprehension. If external content—like alerts or mentions—is integrated, truncate after one line to avoid clutter.
Progress Status Text
Use precise language to describe progress:
- For time estimates, e.g., “10 minutes remaining”
- For percentages, e.g., “65% complete”
- For data size, e.g., “10 of 17 GB”
Avoid ending status text with a period, aligning with style conventions.
Action Buttons
Button labels should directly respond to the toast’s main message, using concise, specific verbs, and limited to two words or 36 characters. For example, if a toast states “An app was shared with you,” the button should read “Open app.” When ambiguity exists, include a noun, such as “View details,” to clarify the action.
