Components

Toast

Toast provide brief notifications. The component is also known as a Snackbar.

Basic Toast/Snackbar

Toast component can be created by using toast class.

The toast offers five severity levels that set a distinctive icon and color.

Default message!

Info message

Success message

Warning message

Error message

Try Again

Code Snippets

              
                <div class="toast row-flex m-1 p-1">
                  <p class="toast-msg m-r-1">Default message!</p>
                  <div class="toast-action">
                    <i class="icon-toggle p-1 icon-btn grid-ctr rd-bdr fa fa-times" aria-hidden="true"></i>
                  </div>
                </div>
                <div class="toast blue-content row-flex m-1 p-1">
                  <p class="toast-msg m-r-1">
                    <i class="fa fa-info-circle" aria-hidden="true"></i>
                    Info message
                  </p>
                  <i class="icon-toggle p-1 icon-btn grid-ctr rd-bdr fa fa-times" aria-hidden="true"></i>
                </div>
                <div class="toast green-content row-flex m-1 p-1">
                  <p class="toast-msg m-r-1">
                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                    Success message
                  </p>
                  <i class="icon-toggle p-1 icon-btn grid-ctr rd-bdr fa fa-times" aria-hidden="true"></i>
                </div>
                <div class="toast yellow-content row-flex m-1 p-1">
                  <p class="toast-msg m-r-1">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                    Warning message
                  </p>
                  <i class="icon-toggle p-1 icon-btn grid-ctr rd-bdr fa fa-times" aria-hidden="true"></i>
                </div>
                <div class="toast red-content row-flex m-1 p-1">
                  <p class="toast-msg m-r-1">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                    Error message
                  </p>
                  <div class="toast-action row-flex">
                    <a class="action-link toast-action-link">Try Again</a>
                    <i class="icon-toggle p-1 icon-btn grid-ctr rd-bdr fa fa-times" aria-hidden="true"></i>
                  </div>
                </div>

Live Toast Example

Click on star to see toast message.

Success message

Code Snippets

HTML snippet

              
                <button class="btn primary-btn m-1 open-toast-btn">Open Toast</button>
                <div class="toast example-toast green-content row-flex m-1 p-1">
                  <p class="toast-msg m-r-1">
                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                    Success message
                  </p>
                  <i class="icon-toggle close-toast-btn p-1 icon-btn grid-ctr rd-bdr fa fa-times" aria-hidden="true"></i>
                </div>

JS snippet

              
                /*-----------TOAST DEMO---------------------*/

                const openToastBtn = document.querySelector(".open-toast-btn");
                const closeToastBtn = document.querySelector(".close-toast-btn");
                const toast = document.querySelector(".example-toast");

                const openToast = () => {
                  toast.classList.add("show-toast");
                  setTimeout(() => {
                    closeToast()
                  },2000);
                };

                const closeToast = () => {
                  toast.classList.remove("show-toast");
                };

                openToastBtn.addEventListener("click", openToast);
                closeToastBtn.addEventListener("click", closeToast);
Previous Next