Toasts

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

<script>
    function makeToast(title, message, theme, hideIcon, hideBorder, duration){
        window.EventBridge.emit('toast', {'detail': {
            title,
            message,
            theme,
            hideIcon,
            hideBorder,
            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>

Toast

You can also add a message:

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

Toast with message

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>

Success Danger Warning Info

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

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

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

By default, a themed toast has an icon and 2px coloured border.

You can hide either of these by setting the hideIcon or hideBorder parameters:

No icon
No border

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', false, false, 7000)"
    href="#"
>Custom Duration</a>

Custom Duration

The default display durection is three seconds.