Toast - Usage
Behaviour
When triggered, the Toast pops up from the bottom of the screen, overlaying the content underneath. It will time out after five seconds.
If multiple Toasts are triggered at the same time, they will queue, and the next Toast will only pop up once the previous Toast has timed out and exited the screen.
Content Guidance
On Desktop the content of the Toast should not exceed one line and on Mobile it should not exceed three lines. These rules limit the content to about 55—85 characters (including spaces).
It’s possible to emphasise words using the medium font weight.
Do not include links in the Toast message, as it is only visible for a limited time which means the user would be time-boxed into being able to complete an action.
Alignment
The component spans full-width on mobile. Its contents deliberately don’t line up with the rest of the content of the screen to make the Toast stand out slightly more and save space for the text within.
The Desktop variant will stretch to the required length to fit the text. Please make sure the text doesn’t run over two lines.
This example is downscaled to fit into the documentation.
Placement
Toast always sits at the bottom of the viewport, but above any sticky elements (i.e. a sticky basket) and the footer.
If there is a sticky element on the bottom of the page, the Toast sits directly above it. Make sure the Toast is not overlapping and hiding the sticky element.
The Toast is positioned directly above the footer. If there is an additional sticky element, the Toast should again sit above it.
Colour Usage
The Toast background is a neutral colour because the content within is simply informative. It is confirming an action, regardless of whether that action is considered positive or negative by the user. Do not change the background colour.
Icon Usage
In most cases, it is generally recommended to not include an Icon, as it can often be difficult to interpret them correctly and thus doesn’t always benefit the user. An Icon should only be used to provide additional and clear context and not just purely for aesthetics. Icons need to be illustrative of the action that has been taken.
Please note: Only regular icons should be used, not inverted Icon.
