SnackBar

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, or icons. They provide brief messages about app processes at the bottom of the screen.

SnackBar Types

SnackBars are available in 3 variants, baseline snackbar, leading snackbar, and stacked snackbar. To use this snackbar in your code, just include classname .snackbar. And also as per the requirement you can also add the following classnames .snackbar-baseline, .snackbar-leading, .snackbar-stacked and .snackbar-stacked-btns. You can copy the HTML code from below code snippet. Below is the Live Demo. The snackbar will disappear after 3 seconds. Before that, you can close it by using the close button. Also, refer the Javascript code for any customization.

Can't send photo. Retry in 5 seconds.

Your photo has been archived.

This item already has the label "travel". You can add a new label.

                    HTML
                    
Copy
    <!-- Baseline Snackbar comp -->
    <div class="snackbar snackbar-baseline centered-flex-row-container">
        <p>Can't send photo. Retry in 5 seconds.</p>
        <button class="btn btn-outline-primary rounded-med space-S">RETRY</button>
        <img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
    </div>

    <!-- Snackbar Leading -->
    <div class="snackbar snackbar-leading centered-flex-row-container">
        <p>Your photo has been archived.</p>
        <button class="btn btn-outline-primary rounded-med space-S">UNDO</button>
        <img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
    </div>

    <!-- Snackbar Stacked -->
    <div class="snackbar snackbar-stacked centered-flex-col-container">
        <p>This item already has the label "travel". You can add a new label.</p>
        <div class="snackbar-stacked-btns centered-flex-row-container">
            <button class="btn btn-outline-primary rounded-med space-S">ADD A NEW LABEL</button>
            <img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
        </div>
    </div>


                    JavaScript
                    
Copy
const snackbarBaseline = document.querySelector(".snackbar-baseline");
const snackbarLeading = document.querySelector(".snackbar-leading");
const snackbarStacked = document.querySelector(".snackbar-stacked");
const baselineBtn = document.querySelector(".baseline-btn");
const leadingBtn = document.querySelector(".leading-btn");
const stackedBtn = document.querySelector(".stacked-btn");
const cancelBtn = document.querySelectorAll(".btn-close");

cancelBtn.forEach(btn => {
    btn.addEventListener("click", (event) => {
        if(event.target.parentNode.parentNode.classList.contains("snackbar")) {
            event.target.parentNode.parentNode.style.display = 'none';
        } else {
            event.target.parentNode.style.display = 'none';
        }
    });
});

baselineBtn.addEventListener("click", () => onClickHandler(snackbarBaseline));
leadingBtn.addEventListener("click", () => onClickHandler(snackbarLeading));
stackedBtn.addEventListener("click", () => onClickHandler(snackbarStacked));

const onClickHandler = elem => {
    if(elem.style.display === 'none' || !elem.style.display) {
        elem.style.display = 'flex';
        setTimeout(() => {
            elem.style.display = 'none';
      }, 3000);
    }
}