Snackbar

// CSS
@import url("https://magnificentui.netlify.app/src/components/snackbar/snackbar.css");

// HTML
<link rel="stylesheet"
	  href="https://magnificentui.netlify.app/src/components/snackbar/snackbar.css">

Snackbar

Snackbar provides brief messages about app processes at the bottom of the screen. Use following classes: flex-center snackbar

Can't send photo. Retry in 5 seconds.

<div class="snackbar flex-center">
    <span class="snackbar__text">Can't send photo. Retry in 5 seconds.</span>
    <button class="btn btn--contained">RETRY</button>
    <button class="btn btn--icon btn--close--transparent btn--circular">
        <i class="bx bx-x"></i>
    </button>
</div>

Note: Used 10px as root font size.