This document compares the capabilities of existing popular toast libraries.
A toast is a UI element that provides valuable feedback to a user about the actions they perform while using an app. This feedback can be core to the user experience of many applications, and many accomplished developers have written many libraries to address this need. The aim of this study is to assess which needs the existing solutions meet, which services they provide in common with each other, and what the levels of granularity are available in toast APIs.
This table showcases the features that various popular toast libraries support. If there are any mistakes, please open an issue to get them corrected.
| Feature | react-toastify | Blueprint | ngx-toastr | Bootstrap | Sweet Alert2 | Material UI Snackbar | Ionic | Salesforce Lightning Design | Notyf | Polymer paper-toast | Android Snackbar | Android Toast |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Title | yes | yes | yes | yes | yes | |||||||
| Message | yes | yes | yes | yes | yes | yes | yes | yes | yes | yes | yes | yes |
| Timeout | yes | yes | yes | yes | yes | yes | yes | yes | yes | yes | yes | |
| Close Button | yes | yes | yes | yes | yes | yes | yes | yes | yes | |||
| Call To Action | yes | yes | yes | yes | yes | yes | yes | yes | yes | |||
| Dismiss | yes | yes | yes | yes | yes | yes | yes | yes | ||||
| Callbacks | yes | yes | yes | yes | yes | yes | yes | |||||
| Events | yes | yes | yes | yes | ||||||||
| Icon | yes | yes | yes | yes | yes | yes | ||||||
| Progress Bar | yes | yes | ||||||||||
| Type Support | yes | yes | yes | yes | yes | yes | yes | |||||
| Global Custom Configuration | yes | yes | yes | yes | ||||||||
| Configured / Created in JS | yes | yes | yes | yes | yes | yes | yes | |||||
| Explicit Component Pattern | yes | yes | yes | yes | yes | yes | ||||||
| Permits Custom HTML | yes | yes | yes | yes | yes | yes | yes | yes | yes | |||
| Display in Container | yes | yes | yes | yes | yes | yes | yes | |||||
| CSS Classes Field | yes | yes | yes | yes | yes | yes | yes | yes | yes | |||
| Explicit Animation Support | yes | yes | yes | yes | yes | yes | ||||||
| Swipe / Drag | yes | yes | ||||||||||
| Intuitive Positioning | yes | yes | yes | yes | yes | yes | yes | yes | ||||
| User Interaction Trigger | yes | yes | yes | |||||||||
| Mentions Accessibility | yes | yes | yes | yes | yes | yes | ||||||
| Default Times Out | yes | yes | yes | yes | yes | yes | yes | |||||
| Allows Multiple | yes | yes | yes | yes | yes | yes | yes | |||||
| Allows Duplicates | yes | yes | yes | yes | yes | |||||||
| Configurable Stacking | yes | yes | yes | yes | ||||||||
| Close Button Default | yes | yes | ||||||||||
| Translucent | yes | yes |
The list of features used in the Table of Comparison comes from the major recurring patterns and ideas that showed up in my research of existing toast implementations. This list is by no means exhaustive, but it covers many of the core elements built into popular toast libraries. They approximately break down into three categories: Properties, Built-In Support, and Policies.
Properties of a toast are specific, tangible parts of the object that a developer can set, toggle, or access. These are often the user-facing elements of the toast, and the general consensus of popular libraries regarding these properties is typically what sets toasts apart from other solutions like alerts and dialogs.
-
title: header text to be displayed above the main message of the toast. -
message: main text contents of the toast. -
timeout: time period (usually in ms) after which the toast disappears. -
Close Button: dedicated button that closes the toast when clicked.
-
Call To Action: button(s) displayed on the toast prompting user engagement.
-
Dismiss: function to programatically dismiss the toast.
-
Callbacks: functions triggered when the toast enters or exits certain states.
-
Events: JavaScript events triggered when the toast enters or exits certain states.
-
icon: pictograph displayed with the toast. -
Progress Bar: element on toast displaying time remaining before timeout.
The Built-In Support establishes how a toast is defined and used, as well as what it's allowed to be used with. It consists of a collection of implementation details, patterns, and technologies that are supported by popular libraries.
-
Type Support: offers built-in typing options, such as
success,info, orerror. -
Global Custom Configuration: support for global config objects defining custom types / patterns, which can be applied to individual toasts.
-
Configured / Created in JS: the toast object is set up and called to display using JavaScript.
- Upon display this creates a new DOM element or injects the settings into an existing HTML element.
-
Explicit Component Pattern: uses an element explicitly written into the HTML to display the toast when triggered.
- This element can be configured, or left as a dummy element to inject configuration into.
-
Permits Custom HTML: allows developers to write custom HTML templates, loaded in as children or passed as views.
-
Display in Container: allows the toast to display within a container, the default being
body. -
CSS Class Field: explicit field to pass in the CSS class or list of classes for styling the toast.
-
Explicit Animation Support: library offers an
animationortransitionfield which abstracts away writing animations. -
Swipe / Drag: the toast can be swiped or dragged to be dismissed.
-
Intuitive Positioning: the library provides built in values to place your toast on the
top/middle/bottomand theleft/center/right. -
User Interaction Trigger: tracks when user has interacted with the toast, and allows the developer to change behavior when they do.
The Policies of a toast library are what it chooses to allow, forbid, and prioritize. It's the list of opinions about what a toast should be able to do.
-
Mentions Accessibility: library specifically mentions A11y, uses
aria, or makes note of accessibility concerns (e.g. focus).- Note: This was difficult to track, not tested comprehensively, and I could have made mistakes. Please create an issue if you notice an error.
-
Default Times Out: the toast dismisses by default, unless otherwise specified.
-
Allows Multiple: multiple toasts can be displayed at once, typically either by stacking or overlapping.
-
Allows Duplicates: the same toast can be called and displayed multiple times simultaneously.
-
Configurable Stacking: option to control if a new toast displays above or below the current stack of toasts, for libraries that permit stacking.
-
Close Button Default: the toast creates and displays with a close button by default, unless otherwise specified.
-
Translucent: the background of the toast shows up, to some degree, as blurred and translucent.