Toast

Docs & Examples

• winduum
• winduum-stimulus

Source

• Toast.css
• Toast.js

Stimulus Actions

show

Shows an existing toast via showToast method.
You can add any params from options via Invoke params.

<button class="x-button" data-invoke-action="x-toast#show" data-invoke-target="#toastElement">
    Show toast
</button>

<ol class="x-toaster items-end">
    <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" id="toastElement">
        <div class="x-toast-content">
            <div class="flex-col">
                <div class="x-title">Hello toast</div>
                <div class="x-text">Fresh toast from oven</div>
            </div>
            <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
        </div>
    </li>
</ol>

close

<li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast">
    <div class="x-toast-content">
        <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
    </div>
</li>

Tips

• To show toast programmatically, you can append the HTML to .x-toaster

document.querySelector('.x-toaster').insertAdjacentHTML('beforeend', `
    <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" data-x-toaster-show-value='{ "autohide": 3000 }'>
        <div class="x-toast-content">
            <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
        </div>
    </li>
`)

• You can also use the useController('x-toast', '#toastElement').invoke('show') invoke method to show existing toast.