Toasts

Found a great toaster site the other day but gave up on it. Too many pop-ups.

Snackbar

Often interchanged between toast and snackbar, but the package calls it a snackbar so we'll roll with that! As with date pickers and tooltips, you must have the custom code from this page's settings panel pasted into your page for snackbars to activate and animate correctly. Wherever you add the custom attribute data-snackbar-content, the element will present a toast once clicked with the text you place against the attribute.

Filled button

Click to activate a snackbar

A screenshot from Webflow's custom attributes panel

A screenshot from Webflow's custom attributes panel

Alternative usage

You can also trigger snackbars using custom code:

  • Attribute selectors, e.g. in custom code at the moment for custom attributes above to work.

  • Listener events, e.g. $("#myElementId").on("click", function(){ trigger here });.

  • Embedded in normal logic, e.g. if (1 + 1 === 2) { trigger here };.

Where "trigger here" is used, simply paste the initiation function pictured (also in this page's custom code settings!).

For more information and additional customisability, you can also visit: https://www.polonel.com/snackbar.

An example trigger method for snackbars

An example trigger method for snackbars