Skip to content
IndexDesign corpus

Toast

83 resources ship this component · Feedback

Also called: snackbar, flash message, toaster, transient notification, temporary message, popup notification, growl.

Before you ship6 checks
  1. 01Copy — The text in the toast
  2. 02Placement — Toast should appear on the corners of the viewport, not as the focus
  3. 03Usage — Toasts are triggered to appear after an action or event
  4. 04Variants — Dictated by colour usually, variants affects the emotion of a message
  5. 05Length of appearance — Toasts should be visible long enough to read but short enough to not obstruct other information for too long
  6. 06Dismissable — 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)

Checks from checklist.design, MIT.

Ships it83