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.

Web component

Toasts are available to be used as a web component. Any tc-toast-* utility class can be applied.

Attributes:

  • id: Unique ID (required if dismissible)
  • data-icon: Any valid skin-icon name (optional)
  • data-dismiss-duration: Minutes to keep toast hidden after dismissed (optional)
This is a toastThis is an informational toastThis is a warning toastThis is an error toastThis is a success toast

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>