tabler/pages/_docs/toasts.md

title, menu, description, bootstrap-link

title	menu	description	bootstrap-link
Toasts	docs.toasts	The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).	components/toasts/

Default markup

{% capture code %} {% include ui/toast.html %} {% endcapture %} {% include example.html code=code %}

Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements under a toast.

{% capture code %} {% include ui/toast.html %} {% endcapture %} {% include example.html code=code %}

Stacking toasts

If you want to stack toasts just put them in the same container.

{% capture code %} {% include ui/toast.html person-id=3 %} {% include ui/toast.html date="7 mins ago" text="This is another toast message." %} {% endcapture %} {% include example.html code=code %}