Toasts display status messages or feedback that is directly related to an action.
Only one toast message can be displayed at a time. They automatically time out and disappear from the screen. It is crucial to show short to the point messages that can be perceived easily. Therefore, toasts only support messages up to 120 characters.
Toasts can not contain any actions or icons. They are not clickable.
font-family: Bernina Sans Regular font-size: 14px color: #fff vertical-align: center
min-height: 52px color: $gray-700 border: 1px solid $gray-640 //inside border-radius: 3px
Position of toast
x: 24px horizontal-align: center
Toasts appear on the bottom of the screen, above all other elements. Toast are not blocking any user input.
The timeframe a message is displayed depends on the number of characters. Fade-in and fade-out animations last 150 ms.
A full animation circle consists of
- fade-in animation (f = 150ms)
- time to perceive the information (p = 500ms)
- time to read and understand the text (r * Number of characters) (r = 50ms)
- and fade-out (f = 150ms)
Animation time = (f + p + (r * Number of characters) + f);
As the maximum number of characters is 120, therfore, the display time of a toast can not be longer than 6800 ms. The minumu display time is 2000ms to guarantee that the message can be perceived by the user.
The toast message has 30 characters. animation_example = 150 + 500 + (50 * 30) + 150 animation_example = 2300
This results in an animation time of 2300 ms.