Skip to content
Index730 resources
Toast

Toast

76 resources in the index ship this component, best first. Group: Feedback.

Also called · snackbar · flash message · toaster · transient notification · temporary message · popup notification · growl

Before you ship

6
  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 it

76