Components - Snackbars & toasts¶
Snackbars provide brief feedback about an operation through a message at the bottom of the screen.
- Snackbars contain a single line of text directly related to the operation performed.
- They may contain a text action, but no icons.
Toasts (Android only) are primarily used for system messaging.They also display at the bottom of the screen, but may not be swiped off-screen.
Usage :¶
Show only one snackbar on screen at a time.
Placement :¶
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.
Behaviour :¶
Snackbars animate upwards from the bottom edge of the screen,When they appear, they do not block input. They exit by being swiped off-screen or automatically disappear after a timeout or user interaction elsewhere.
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.
Transient¶
- Snackbars automatically time out from the screen.
- For usability reasons, snackbars should not contain the only way to access a core use case.
- They should not be persistent or be stacked, as they are above other elements on screen.
0-1 actions, not dismiss or cancel¶
Don’t block the floating action button¶
Move your floating action button vertically to accommodate the snackbar height.
Consecutive snackbars¶
There is only ever one snackbar displayed. When second snack bar is triggered displayed first snack bar should start contracting downwards before second one animates upwards.
Specs¶
For Specs Click Here