Toast

Notification message.

How to

The Toast component can be used to show a notification message.

There are six .toast--{position} classes you can use to place the notification in different positions:

• toast--top-right
• toast--top-left
• toast--top-center
• toast--bottom-right
• toast--bottom-left
• toast--bottom-center

Use the openToast custom event to show a toast element:

var toast = document.querySelector('.js-toast'), // toast element
  openToastEvent = new CustomEvent('openToast'); // custom event

// open toast
toast.dispatchEvent(openToastEvent);

Duration #

The toast element automatically hides after 5s. You can change this amount using the data-toast-interval attribute:

<!-- hide toast after 3s -->
<div data-toast-interval="3000" class="toast toast--hidden toast--top-right js-toast" role="alert" aria-live="assertive" aria-atomic="true">
  <!-- toast content here -->
</div>

Set data-toast-interval="0" if you do not want to automatically close the notification.

Dynamic Content #

If your toast elements are dynamically created, you will need to initialize them after they have been injected in the DOM.

Create a new Toasts object:

var ToastObj = new Toasts();

Then initialize a new toast after it has been included in the DOM:

ToastObj.initToast(toast); // toast is the .toast element

Then open it using the openToast event:

// open toast
toast.dispatchEvent(new CustomEvent('openToast'));

Categories

• App > Notifications
• Feedback
• Overlays

Bug report & feedback

Component Github page ↗