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)