Go to homepage

Projects /


Notification message.

View Demo

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

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 -->

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'));


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.