Snackbar


<!-- Default -->
<button class="btn btn-primary default mb-2 me-4">Default</button>

<!-- No Action Button -->
<button class="btn btn-info no-action mb-2 me-4">No Action</button>

<!-- Action Text -->
<button class="btn btn-success action-text mb-2 me-4">Action Text</button>

<!-- Text Color -->
<button class="btn btn-warning text-color mb-2 me-4">Text Color</button>

<!-- Click Callback -->
<button class="btn btn-secondary click-callback mb-2 me-4">Click Callback</button>

<!-- Duration -->
<button class="btn btn-dark duration mb-2 me-4">Duration</button>

// Default
add_notification('.default', {text: 'Example notification text.', duration: 100000})

// No Action Button
add_notification('.no-action', {showAction: false})

// Action Text
add_notification('.action-text', {actionText: 'Thanks!'})

// Text Color
add_notification('.text-color', {actionTextColor: '#e2a03f'})

// Click Callback
add_notification('.click-callback', {
    text: 'Custom callback when action button is clicked.',
    width: 'auto',
    onActionClick: function(element) {
        document.querySelector(`.${element.classList[0]}`).addEventListener('click', function() {
            Snackbar.show({text: 'Thanks for clicking.',});
        })
    }
})

// Duration
add_notification('.duration', { text: 'Duration set to 5s', duration: 5000,})

Direction


<button class="btn btn-success top-left mb-2 me-4">Top Left</button>

add_notification('.top-left', {text: 'Example notification text.', pos: 'top-left'})

Background Color


<button class="btn mb-2 btn-primary snackbar-bg-primary mb-2 me-4">Primary</button>

add_notification('.snackbar-bg-primary', { 
    text: 'Primary',
    actionTextColor: '#fff',
    backgroundColor: '#4361ee'
})

Bootstrap Toast


<button id="toast-btn" class="btn btn-primary">Open Toast</button>

<div style="position: absolute; top: 0; right: 0;z-index: 9999; margin-left: 20px; margin-right: 20px;">
    <div class="toast toast-primary fade hide" role="alert" data-bs-delay="6000" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Bootstrap</strong>
            <small class="meta-time">just now</small>
            <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</div>

// Get the Toast button
var toastButton = document.getElementById("toast-btn");
// Get the Toast element
var toastElement = document.getElementsByClassName("toast")[0];

var toast = new bootstrap.Toast(toastElement)
toastButton.onclick = function() {
    toast.show();
}

Copyright © 2026 DesignReset, All rights reserved.

Coded with