Toast

The toast is used to show alerts on top of an overlay. It closes itself when the close button is clicked, or after a timeout. The toast component is used to give feedback to users after an action has taken place.

            
              <!-- removed toast msg>
              <div class="alert alert-error toast-removed">
                <svg class="error-icon" ...> <path ...></path> </svg>
                <p>Removed from Cart</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>


              <!-- success toast msg>
              <div class="alert alert-success toast-success">
                <svg class="success-icon" ...> <path ...></path> </svg>
                <p>Added to Cart</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>


              <!-- warning toast msg>
              <div class="alert alert-warning toast-warning">
                <svg class="warning-icon" ...> <path ...></path> </svg>
                <p>Removed from wishlist</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>


              <!-- toast info>
              <div class="alert alert-info toast-info">
                <svg class="info-icon" ...> <path ...></path> </svg>
                <p>Added to wishlist</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>