Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.


Default

This is a default Toast

this is a toast

this is a toast

this is a toast

this is a toast


                  <div class="flex flex-row">
    <div class="toast colors-successLight colors-textDark success-shadow"><h4>this is a toast</h4><svg xmlns="http://www.w3.org/2000/svg" height=25px width=25px fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg></div>
    
</div>
<div>
  <div class="toast colors-errorLight colors-textDark error-shadow "><h4>this is a toast</h4><svg xmlns="http://www.w3.org/2000/svg" height=25px width=25px fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg></div>
</div>
<div>
  <div class="toast colors-warningLight colors-textDark warning-shadow"><h4>this is a toast</h4><svg xmlns="http://www.w3.org/2000/svg" height=25px width=25px fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg></div>
</div>
<div>
  <div class="toast colors-secondaryLight colors-textDark secondary-shadow"><h4>this is a toast</h4><svg xmlns="http://www.w3.org/2000/svg" height=25px width=25px fill="currentColor">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg></div>
</div>