Toasts

Sending a toast notification is as simple as dispatching a toast browser event with the correct details.

<script>
    function makeToast(title, message, icon, duration){
        window.EventBridge.emit('toast', {'detail': {
            title,
            message,
            icon,
            duration,
        }})
    }
</script>

This is an example of how to emit the toast event using the window.EventBridge. You can read more about the eventBridge here.

A simple toast can have just a title:

<a
    onclick="event.preventDefault(); makeToast('Toast Title')"
    href="#"
>Toast</a>

You can also add a message:

<a
    onclick="event.preventDefault(); makeToast('Toast Title', 'This is the message')"
    href="#"
>Toast with message</a>

The theme icons are also available to reference by name:

<a
    onclick="event.preventDefault(); makeToast('Something went wrong', 'Lorem ipsum dolor sit amet', 'danger')"
    href="#"
>Icons</a>

The supported values are: info, success, danger and warning.

You can even customise the duration of how long a toast is visible:

<a
    onclick="event.preventDefault(); makeToast('Success', 'Lorem ipsum dolor sit amet', 'success', 7000)"
    href="#"
>Custom Duration</a>

The default display durection is three seconds.