Toast

This is a toast notification Web Component using Stenciljs.

  • Built with Stencil
  • Built with TailwindCSS v3.x

Demo

Demo

Installation

npm install cb-toast

Or use npm cdn

<script type="module" src="https://cdn.jsdelivr.net/npm/cb-toast@1.0.3/dist/cb-toast/cb-toast.esm.js"></script>

Usage

The Coolbrains toast Component can be use as following:

<cb-toast></cb-toast>

<button id="showToastSuccess" class="bg-green-700">Success</button>

<script>

let cbToast = document.querySelector('cb-toast');
document.getElementById('showToastSuccess').addEventListener('click', event => {
        cbToast.Toast({
          title: 'Success', //default
          description: 'success message', //default
          timeOut: 3000, //default
          position: 'top-right', //default
          type: 'success', //default
        });
      });

</script>

Positions

'top';
'bottom';
'top-left';
'top-right'; //default
'bottom-left';
'bottom-right';

type

'success'; //default
'info';
'warning';
'error';

Code

Github