tabler/docs/content/ui/components/toasts.md

title, summary, bootstrapLink, description

title	summary	bootstrapLink	description
Toasts	Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.	components/toasts/	Display lightweight alert notifications.

Default markup

Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an x close button to make it possible for users to close the toast if they wish.

{% capture html -%}

Mallory Hulme 11 mins ago

Hello, world! This is a toast message.

{%- endcapture %} {% include "docs/example.html" html=html %}

Translucent

Toasts blend over the elements they appear over. If a browser supports the backdrop-filter CSS property, the elements under a toast will be blurred.

{% capture html -%}

Mallory Hulme 11 mins ago

Hello, world! This is a toast message.

{%- endcapture %} {% include "docs/example.html" html=html %}

Stacking toasts

Stack multiple toasts together by putting them within one .toast-container.

{% capture html -%}

Dunn Slane 11 mins ago

Hello, world! This is a toast message.

Mallory Hulme 7 mins ago

This is another toast message.

{%- endcapture %} {% include "docs/example.html" html=html height="25rem" centered bg="surface-secondary" %}