Toast

toast message saving

Introduction

Toasts display status messages or feedback that is directly related to an action.

Toast example

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.

Styleguide

Toast styleguide

x: 32px

Text

font-family: Bernina Sans Regular
font-size: 14px
color: #fff
vertical-align: center

Box

min-height: 52px
color: $gray-700
border: 1px solid $gray-640 //inside
border-radius: 3px

Position of toast

Toast position

x: 24px
horizontal-align: center

Behavior

Toasts appear on the bottom of the screen, above all other elements. Toast are not blocking any user input.

Animation

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

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.

Example

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.

Toast example