Bootstrap Toast Notification

<button class="btn btn-primary" id="showToastBtn">Show toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="demoToast" class="toast" role="status" aria-live="polite" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Saved</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">Your changes were saved successfully.</div>
    </div>
</div>

<script>
document.querySelector('#showToastBtn').addEventListener('click', () => {
    const toast = new bootstrap.Toast(document.querySelector('#demoToast'));
    toast.show();
});
</script>