Component infos
Description
The toast/ snackbar is used to give user feedback from the system, like when an action was successful or when en error occurs.
Page related
Will be used in :
- News editor, to communicate the email was sent.
-
- Success signaling in general
Mockup
You can view the component description on this Figma File
Behavior
The component can be accompanied by an icon slot or without an icon. It should include the icons for basic feedback (success, alert, error, info).
The component can be accompanied by a button
In desktop, it should be centered and 20px distance from the bottom viewport. It will stay for 10 seconds until it dissapears.
In mobile it will stretch to full width, keeping a padding of 10px between the borders.
Build suggestion
Interaction
Loading toast
A proposal is to add a toast to indicate system is loading. It should only be implemented if it's not too much work.
Loading preview
Component infos
Description
The toast/ snackbar is used to give user feedback from the system, like when an action was successful or when en error occurs.
Page related
Will be used in :
Mockup
You can view the component description on this Figma File
Behavior
The component can be accompanied by an icon slot or without an icon. It should include the icons for basic feedback (success, alert, error, info).
The component can be accompanied by a button
In desktop, it should be centered and 20px distance from the bottom viewport. It will stay for 10 seconds until it dissapears.
In mobile it will stretch to full width, keeping a padding of 10px between the borders.
Build suggestion
Interaction
Loading toast
A proposal is to add a toast to indicate system is loading. It should only be implemented if it's not too much work.
Loading preview