Toast
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.). Use classes like .toast-bl .toast-b to show toasts. The toast component uses alerts internally.
HTML
<div class="toast toast-bl hidden" id="toast-bottom-left">
<div class="alert warning">
<span>Bottom Left Toast</span>
<button class="close">
<i class="fas fa-times icon"></i>
</button>
</div>
</div>
<div class="toast toast-b hidden" id="toast-bottom-center">
<div class="alert dark">
<span>Bottom Center Toast</span>
<button class="close">
<i class="fas fa-times icon"></i>
</button>
</div>
</div>
<div class="toast toast-br hidden" id="toast-bottom-right">
<div class="alert info">
<span>Bottom Right Toast</span>
<button class="close">
<i class="fas fa-times icon"></i>
</button>
</div>
</div>
<div class="toast toast-tl hidden" id="toast-top-left">
<div class="alert dark">
<span>Top Left Toast</span>
<button class="close">
<i class="fas fa-times icon"></i>
</button>
</div>
</div>
<div class="toast toast-t hidden" id="toast-top-center">
<div class="alert error">
<span>Top Center Toast</span>
<button class="close">
<i class="fas fa-times icon"></i>
</button>
</div>
</div>
<div class="toast toast-tr hidden" id="toast-top-right">
<div class="alert success">
<span>Top Right Toast</span>
<button class="close">
<i class="fas fa-times icon"></i>
</button>
</div>
</div>
JavaScript
// Toast Top Left
const showToastTopLeft = document.querySelector('#show-toast-top-left');
const ToastTopLeft = document.querySelector('#toast-top-left');
showToastTopLeft.addEventListener('click', () => {
showToast(ToastTopLeft);
});
// Toast Top Center
const showToastTopCenter = document.querySelector('#show-toast-top-center');
const ToastTopCenter = document.querySelector('#toast-top-center');
showToastTopCenter.addEventListener('click', () => {
showToast(ToastTopCenter);
});
// Toast Top Right
const showToastTopRight = document.querySelector('#show-toast-top-right');
const ToastTopRight = document.querySelector('#toast-top-right');
showToastTopRight.addEventListener('click', () => {
showToast(ToastTopRight);
});
// Toast Bottom Left
const showToastBottomLeft = document.querySelector('#show-toast-bottom-left');
const ToastBottomLeft = document.querySelector('#toast-bottom-left');
showToastBottomLeft.addEventListener('click', () => {
showToast(ToastBottomLeft);
});
// Toast Bottom Center
const showToastBottomCenter = document.querySelector(
'#show-toast-bottom-center'
);
const ToastBottomCenter = document.querySelector('#toast-bottom-center');
showToastBottomCenter.addEventListener('click', () => {
showToast(ToastBottomCenter);
});
// Toast Bottom Right
const showToastBottomRight = document.querySelector('#show-toast-bottom-right');
const ToastBottomRight = document.querySelector('#toast-bottom-right');
showToastBottomRight.addEventListener('click', () => {
showToast(ToastBottomRight);
});
// Utility Function to toggle Toast
const showToast = toastId => {
toastId.classList.toggle('hidden');
setTimeout(() => {
toastId.classList.toggle('hidden');
}, 3000);
};