Smart.Toast
Smart.Toast is used for system messaging.
Smart.Toast represents an element which displays an unobtrusive notification to the user. Multiple instances of the same toast can be shown at the same time. In case with multiple instances, they are stacked vertically into special containers positioned:
- top-left
- top-right
- bottom-left
- bottom-right
- center(in modal mode)
- custom container, defined by the user
Toast components
Header area
Content area
Icon
Behavior
Open
Close
Usage
As a snackbar
Snackbars appear above most elements on screen, and they are equal in elevation to the floating action button. However, they are lower in elevation than dialogs, bottom sheets, and navigation drawers.
Snackbars should contain a single line of text directly related to the operation performed. They may contain a text action. They cannot contain icons.
Very short text strings
Snackbars should contain a single line of text directly related to the operation performed. They may contain a text action. They cannot contain icons.
0-1 actions, not dismiss or cancel
If an action is present, comply with dialog spacing and affordance rules. For two or more actions, use a dialog, not a snackbar, even when one of the actions is a dismiss action. If the action described in the snackbar is important enough to block the use of the screen, it should be a dialog.
Mobile
Don’t block the floating action button
Move your floating action button vertically to accommodate the snackbar height.
A mobile snackbar
A mobile snackbar with updated content
Desktop snackbar
On open toasts are stacked vertically in order by their appearance. The open method adds a new element at the end of the existing toast column
As a notification
Notifications are intended to inform users about events in your app. These two types of notifications are the most effective:
- Communication from other users
- Well-timed and informative task reminders
Overview
Notifications have been designed to make it easy to scan and use a notification’s most important elements:
Primary content
Content is the most prominent element of a notification. Secondary information, such as a timestamp, is smaller and consolidated above the primary content.
People
If the notification involves a person, an avatar appears on the right where it stands out from the rest of the content.
Actions
Expandable notifications are revealed by tapping an indicator icon. Actions are displayed with text labels on a separate background color and location.
