Go to homepage

Projects /

Toast

Notification message.

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

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

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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