> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/engineering-reference-docs/software-testing-overview/ux-ui-checklist/elements/toast.md).

# 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)