Toasts are shown automatically to give the user instant feedback regarding an action they’ve made. They are temporary messages that last only a few seconds. Placed on the centre bottom of the screen, overlaying everything.
Toast being displayed in Carl's Shop Plus
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Toast |
Immediate feedback triggered by a user action |
Placed on the very bottom of the screen |
The user can dismiss the toast or take another action, if available |
Anatomy
Structure
|
|
|
description |
It must always show and should sum up in little words the exact information the user must know. It’s important the copy respects UX writing rules. The description has a maximum of 160 characters. |
|
button |
The button will appear as a suffix on the toast component. It can either be a close button or a text button, with a custom action. |
Sizes and Spaces
|
The toast has a fixed min-height of 40px.
The button is placed on the very end of the toast and its width adjusts to its content.
The description is placed inside a container that has a 16px x-padding. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Type |
default fail |
Depends on the nature of the message that's being displayed. By default, the toast will have the "notification" background colour. |
|
Action |
text button close button |
There's always an action button on the toast. It can have a close button or it can have a custom action |
Behaviour
Interaction
Toast popping up after an action is completed.
Responsiveness
Text-wrap on overflow
When the text is too long, there should be a line break. The button will remain vertically centred.
Max-width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Toast |
100% |
100% |
100% |
736px |
736px |
Margins on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Toast |
left: 32px right: 32px bottom: 32px |
left: 32px right: 32px bottom: 32px |
left: 32px right: 32px bottom: 32px |
left: 16px right: 16px bottom: 24px |
left: 16px right: 16px bottom: 24px |
Guidelines
|
|
⛔️ Don't If you’re not communicating an error, don’t use the “fail” style.