Toasts

Usage

Toasts are great for showing meaningful content easily and provide brief messages about processes of the app the user is working with.
As they only appear temporarily, they can't be done with CSS alone. Which is why we have provided a stupidly simple script to help you at the bottom of the page.
Checkout the demo below.

Notation:

It's recommended you use our script below but it's entirely up to you, you can create your own!
The toast container is prefixed with the class toast it is positioned absolutley by default, but you can position toasts using our position classes below or using our pin classes, see our position page for more details.
The tost content is wrapped with the class toast-body. This is the class to set colors on.

<!-- Without toast body (using our JS) -->
<div class="toast toast-bottom-right"></div>
<!-- With toast body (using your JS) -->
<div class="toast toast-bottom-right">
    <div class="toast-body bg-primary">Mmmmmmmmm toast</div>
</div>

Position

You can use the toast position classes to make them fixed, and align them to the viewport, see the buttons below & classes below. Alternatively you can use the pin classes, which will pin the toast to the parent of the toast container.

<div class="toast toast-top-right"></div>
<div class="toast toast-top-left"></div>
<div class="toast toast-top-center"></div>
<div class="toast toast-bottom-right"></div>
<div class="toast toast-bottom-left"></div>
<div class="toast toast-bottom-center"></div>
<div class="toast toast-bottom-right"></div>

Icon

You can use the toast position classes to make them fixed, and align them to the viewport, see the buttons below & classes below. Alternatively you can use the pin classes, which will pin the toast to the parent of the toast container.

Javascript

Copy & paste our toast script below to achieve the toast effect. The toast object accepts two objects:

The first being any HTML markup you want to display within the toast. Handy for icons &
The second being an object which has a display time property (passed in with seconds) and a classes property, allowing you to pass in any classes you want to append to to the toast-body element.

meshToast('mesh toast', { displayTime: '5s' });
meshToast('mesh toast', { displayTime: '5s', classes: 'bg-secondary' });

Script

function meshToast(text, opts = {}) {

        const defaults = {
            classes: "bg-primary"
        };

        const options = Object.assign(defaults, opts);
        const toastContainer = document.getElementsByClassName("toast")[0];
        const toastBody = document.createElement("div");
        const toastText = document.createElement("span");

        toastBody.setAttribute('class', "toast-body " + options.classes);
        toastText.innerHTML = text;
        toastBody.appendChild(toastText);
        toastContainer.appendChild(toastBody);

        toastBody.addEventListener("animationend", e => {
            toastBody.remove(1);
        });

        toastBody.classList.add("toast-show");
        if (options.displayTime) {
            toastBody.style.animationDuration = options.displayTime;
        }
    }

Variables

Add a description here:

Variable	Value	Description