How to create a snackbar wth close button - Tutorial

Tutorial on how to create a snackbar with close button.

HTML

For HTML, first we need a button to open the snackbar. We'll set onclick event and run "openSnackbar()" fuction.

And we'll need a snackbar element, with snackbar text and button to close the snackbar.

We'll set onclick lister to a button and fire the "closeSnackbar()" function.

Inside the button, we'll place the "X" svg.

<button class="open_snackbar_button" onclick="openSnackbar()">Open snackbar</button>

<div id="snackbar">
    <p>You didn't share this video</p>
    <button class="close_snackbar" onclick="closeSnackbar()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="#fff" width="20" height="20">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

Javascript

For javascript, we need to create two functions, one to open and the other to close the snackbar.

We'll just remove the "active" class from the snackbar in "closeSnackbar()" function and add it in "openSnackbar()" function.

We'll use this class to hide/show the snackbar.

function openSnackbar() {
    let snackbar = document.getElementById('snackbar')
    snackbar.classList.add('active')
}

function closeSnackbar() {
    let snackbar = document.getElementById('snackbar')
    snackbar.classList.remove('active')
}

CSS

For CSS, first we'll style the snackbar.

We'll set it's position to fixed with bottom of 20px and left of 50% with transform translateX -50% which will place the snackbar in the middle, bottom of the page.

Now we'll set background color to red, to indicate that this in an error message.

Then we'll position the text and button using flexbox.

We'll add some paddings, set border radius to 5 pixels, width to 300 pixels, and change font and set it's color to white.

And set display property to none to hide the element.

#snackbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FF5058;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    border-radius: 5px;
    width: 300px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
    display: none;
}

Now we'll overwrite the display property of the snackbar using "active" class and set it to flex with "!important" rule in order to overwrite the value.

.active {
    display: flex !important;
}

Now we'll style the close button.

We'll set width and height to 20 pixels, border radius to 50% to create a circle and box-sizing to content-box.

Also, we'll add 2px solid white border and set background color to transparent white.

Lastly, we'll set cursor to pointer and add a little transition (because we'll add hover effect).

.close_snackbar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: content-box;
    padding: 6px;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: .2s;
}

Now we'll style the close button on hover.

We'll add a little transition and decrease the transparency of the background.

.close_snackbar:hover {
    transition: .2s;
    background-color: rgba(255, 255, 255, 0.5);
}

Lastly, we'll style the button which opens the snackbar.

We'll set background color to green, remove the border, set border radius to 3 pixels, text color to white and size to 24 pixels and cursor to pointer.

.open_snackbar_button {
    background-color: #3BBBA0;
    border: none;
    border-radius: 3px;
    color: #fff;
    padding: 5px 20px;
    cursor: pointer;
    font-size: 24px;
}

And that's it.

You can find video tutorial and full code here.

Thank you for reading. ❤️