Toast
Components
A toast is a brief, non-disruptive message that appears temporarily at the edge of the screen to provide feedback about an action or system status.
Checklist
Reset
Copy
The text in the toast
Copy should be clear and concise, focusing on a status or action
Placement
Toast should appear on the corners of the viewport, not as the focus
Usage
Toasts are triggered to appear after an action or event
Variants
Dictated by colour usually, variants affects the emotion of a message
Example: A green toast informing success, red toast informing error. If informing a status, don't rely on just color and leverage icons or the copy.
Length of appearance
Toasts should be visible long enough to read but short enough to not obstruct other information for too long
Read the text out loud slowly to gauge how much time is needed
Dismissable
Depending on the amount of content, a toast can be closed by a user (it should fade away shortly after appearing if it cannot be manually dismissed)
