Toast

Toasts are used to show alert or information to users.

Add a container element with the toast class. You can add any text within the container, and even icons. You may also add a close button with the btn-clear class if you need.

<script>
    import { Toast, Toaster, toast } from 'svelte-spectre'

    let visible = true

    function sendToast() {
        toast.send({
            msg: 'msg', pos: 'pos',
            timeout: 'timeout',
            type: 'type',
            icon: 'icon',
            closable: true,
            invert: false,
            reverse: false
        })
    }
</script>

{#if visible}
    <Toast
        bind:visible
        type="initial"
        icon="arrow-right"
        timeout={3000}
        closable={true} />
{/if}

<button on:click={sendToast}>sendToast</button>
<Toaster />