When the user or system takes action, various messaging patterns are used to show the result or impact.
Icons may be used in messaging components. Follow these guidelines when deciding which icon to use in your messages.
Use a toast as a feedback mechanism to communicate important, high-level information after a user creates, updates, or deletes data in the application.
Toasts appear on top of a page. For example, a user edits an opportunity via a modal and successfully saves it; the modal closes and the success toast appears on top of the opportunity detail page.
Toasts may appear in three different manners:
- Sticky — remains visible until the user dismisses it with the “X”. Duration doesn’t apply to this type of toast.
- Dismissible — remains visible until the user dismisses it with the “X” or duration has elapsed, whichever comes first.
- Pester — remains visible until duration has elapsed. No “X” is presented and user cannot dismiss it early. This mode forces the user to “see” the toast for the full duration period.
The width of a toast is determined primarily by the length of its content and its inside padding. The minimum width is 480px. Center the toast within the canvas of the page (excluding the left navigation bar).The toast text wraps to as many lines as necessary without truncation.
Fix toasts to the top of the page so that they’re always visible to the user, even as they scroll the page.
If you have more than one toast appearing at the same time, stack them, with the most recent toast on top. The other toasts stack underneath in chronological order.
To minimize the number of toasts that appear, batch toasts of the same type.
Note: Don’t use a toast to confirm success when a create action brings the user to the newly created item. For example, successfully creating a new record from a listview doesn’t call a toast, because the user is taken directly to the new record. No more information is needed.
A prompt is a notification that requires action from the user to proceed.
Note: Prompts are part of system messaging and are handled internally by Salesforce. Partners building apps that appear within Salesforce shouldn’t use prompts.
Prompts provide the user with one or more options to proceed. Prompts have no close icon; to dismiss them, the user must pick one of the options presented. Prompts behave like a modal in that it sits on top of a mask that obscures the rest of the UI.
Prompts are used to communicate system-related messaging to the user. For instance, to inform users about an upcoming maintenance or to warn users that they are about to be logged out due to inactivity.
Size the prompt at 50% of the width of the viewport, with a minimum width of 480px. The content inside the prompt determines the height.
Note: Banners are part of system messaging and are handled internally by Salesforce. Partners building apps that appear within Salesforce shouldn’t use banners.
Banners communicate something that affects the entire system, not just a feature or page. They appear without the user taking an action. Examples of when to use banners include:
- The user is using an unsupported browser.
- An admin is logged in as one of the users.
- The user is using a trial version of Salesforce.
- The user is offline.
Banners appear as a strip above the global header and are generally not dismissible. Banners can be dismissed if they communicate future impact to the system, but has no bearing on the system at the moment, e.g. notifying users of scheduled maintenance.
Popovers are used in two cases:
- As a feedback mechanism to communicate error messages after a user submits data.
- As a way to engage the user and nudge them to do something (e.g. update a record that hasn’t been touched in 30 days, adding a task to a new record, etc).
In the first case, the popover appears in conjunction with forms, and the icon is always placed to the left of action buttons (typically Save/Cancel).
In the second case, the popover icon typically appears to the right of the relevant item. However, depending on the item affected, the icon may appear in other positions.
The popover can be shown/hidden by clicking on the icon or by clicking on the X button.