Toast

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)