Toast

Toasts are completely unstyled, so they work well with theme styles.

Class nameTypeDescription
tc-toast-containerComponentToast container (optional- must use a position utility)
tc-toast-container-tlUtilityPosition toast container to top left of window
tc-toast-container-trUtilityPosition toast container to top right of window
tc-toast-container-blUtilityPosition toast container to bottom left of window
tc-toast-container-brUtilityPosition toast container to bottom right of window
tc-toastComponentToast
tc-toast-altUtilityAlternate styled toast

Examples

tc-toast

tc-toast-alt

tc-toast-container

This example utilizes the data-show attribute to show for a predefined duration.

Dismissible toast

This example utilizes the data-hide attribute to hide when clicked.

Programmatic toast

Toasts can be created programmatically using the Skin.Toast.create function.


        
        <div id="example-toast-container" class="tc-toast-container tc-toast-container-br"></div>

<button
        type="button"
        id="toast-btn"
        class="tc-btn tc-style-default">Create toast
</button>

<script src="./path/to/skin.js"></script>

<script>

    let toastBtn = document.getElementById("toast-btn");

    toastBtn.addEventListener('click', () => {

        Skin.Toast.create({
            containerId: "example-toast-container",
            classes: "tc-style-success",
            innerHTML: "This is an example toast"
        });

    });

</script>