Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toast works as a reactive service

Attention: the use of the components needs the squid.js included in the project

Attention + 1: Probably the interaction via Javascript should not work well in SPA applications needs some implementation to acess Toast on window element

Exemple

<button
  type='button'
  on-click='() => Toast.show("Hello world", { closeButton: true, position: "top right", className: "" })'
>
  Click here
</button>

Types

Toast has standard types, to call like Toast.success(...), Toast.error(...), etc... They are:

show
inverted
success
warning
error
grayscale
custom
theme

Position

Combine these values on position attribute

top
bottom
left
right

ClassName

className accepet a string that add a class to tooltip container on show it

CloseButton

Boolean value to show or not close button. Default closeButton: true

Full

To Toast use 100vw add full to className attribute

onClick

Pass onClick (with a function) atribute combinated with notOverClick: true to do a custom action click