Toast
Toast or snackbar component is used to display short messages to the user that disappears after a few seconds.
Elixir offers one toast - a Simple Toast which is dark themed and appears in the bottom left corner.
Simple Toast
A simple toast consists of a toast text and accompanying action buttons such as a text or icon button.
To generate a simple toast, use the base class snackbar.
Copy the code below to use a snackbar/ toast component.
<div class="snackbar px-1 py-0-5">
<p class="snackbar-text">
Can't send photo. Retry in 5 seconds.
</p>
<div class="snackbar-actions">
<button class="btn btn-primary btn-icon btn-snackbar-close p-0-25">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
</div>
</div>
Copy the below code to use the logic for closing the snackbar when the button is clicked.
/* Reference to the snackbar close button */
const snackbarCloseButton = document.querySelector('.btn-snackbar-close');
/* Attaching event listener to listen to click event on the snackbar close button */
snackbarCloseButton.addEventListener('click', closeSnackbar);
/* Even handler to close the snackbar when close button is clicked */
function closeSnackbar(e) {
e.preventDefault();
e.target.parentElement.parentElement.style.display = 'none';
}