#Overview
A toast informs a user about an outcome of an action in a non-disruptive way.
It displays a short message, which appears for a defined length of time at the bottom of the interface.
#When to use
- Short, non-disruptive messages to inform the outcome of a user action
- Communicating information that should be temporarily displayed
- To temporarily allow users to undo an action
#Don’t use for
- Communicating information that should be permanently displayed
- To communicate important information that requires user attention (use an Alert)
#Anatomy
- Container
- Text: Describes the task performed. On mobile, the text label can contain up to two lines of text.
- Action: A single link (for example, which allows users to undo the given task)
#Color
- Galaxus
- Digitec
#Spacing
#Best practices
#Non-disruptive and low-impact
Do
Use toasts for non-disruptive, low-impact decisions.
Don't
Don’t use toasts for high-impact decisions that require user attention or a response.
#Keep text as short as possible
Do
Keep copy minimal.
Don't
Don’t be overly verbose. Avoid using three or more lines of text on mobile.
#One action only
Do
A toast has only one action, a link placed to the right of the text.
Don't
Do not use inline links.
#Placement
#Mobile
Toasts should be placed at the bottom of the interface, in front of the content. Avoid placing a toast in front of frequently used touch targets, navigation or sticky elements.
#Desktop
Toasts should be placed in the bottom left of the interface, in front of the content.
#Behavior
#Stacking
Toasts can stack on top of each other.
We should not intentionally display multiple toasts at a time, however a user may cause multiple to appear. For example, if they delete multiple products from a wishlist at the same time.
#Container
- On small screens, the container expands horizontally according to the device width.
- On large screens, the container has a fixed width of 480px.
- On all screens, the container expands vertically with the text.
#Appearing on mobile
The toast enters from the bottom using Entry easing. It is always at 100% opacity, giving the impression that it is hiding off the edge of the screen before being triggered.
#Disappearing on mobile
The toast disappears using Linear (no easing) with opacity.
#Appearing on desktop
The toast enters from the left of the interface using Entry easing. It is always at 100% opacity, giving the impression that it is hiding off the edge of the screen before being triggered.
The motion is intentionally emphasised to grab the user’s attention, as they may have triggered the action far away from where the toast appears.
#Disappearing on desktop
The toast disappears using Linear (no easing) with opacity.