Easily relay messages to users using SLDS's Toast supporting success, warning, info & error.

SLDS-Toast.js

// #REVISION FOR SF1 / MOBILE / SHRUNK SIZE

// <div class="toaster"></div> --Add to where you want to display toast, like top of a VF page or <table>
// Then to use call: mkToast('Hey there!', 'success') anywhere in JS

const clearToast = () => document.querySelector('.toaster').innerHTML = ''
const mkToast = (msg, type) => {
    // toast type may be success || warning || info || error
    const cont = document.createElement('div')
    const toaster = document.querySelector('.toaster')

    cont.innerHTML =  
        `<div class="demo-only" style="height: 4rem; width: 25rem;">
            <div class="slds-region_narrow slds-is-relative">
                <div class="slds-notify_container slds-is-absolute">
                <div class="slds-notify slds-notify_toast slds-theme_${type}" role="alert">
                    <span class="slds-assistive-text">${type}</span>
                    <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small">26 potential duplicate leads were found.</h2>
                    </div>
                    <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
                    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}" />
                    </svg>
                    <span class="slds-assistive-text">Close</span>
                    </button>
                </div>
                </div>
            </div>
        </div>`

    toaster.innerHTML = ''
    toaster.appendChild(cont.childNodes[0])
}