Toast

Informação importante

Para fazer a chamada de um toast você deverá usar a função 'toast()' de acordo com a sua necessidade. Use o exemplo a seguir como base:

<script>
    const primaryMessage = 'O título do toast deve ser inserido aqui';
    const secondaryMessage = 'A mensagem do toast deve ser inserida aqui';

    // Use como terceiro atributo '' (default), 'success', 'warning' ou 'error' para obter 
    // o toast que você deseja
    toast(primaryMessage, secondaryMessage, 'green');
</script>

Toast padrão

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <article class="toast__wrapper">
                <h2 class="toast__title"></h2>
                <p class="toast__message"></p>
            </article>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease, gap 0.1s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
    transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}


/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__title{
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>

Toast com ícone

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <span class="toast__icon">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="#2C2C2C"/>
                    <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="black" fill-opacity="0.2"/>
                </svg>
            </span>
            <article class="toast__wrapper">
                <h2 class="toast__title"></h2>
                <p class="toast__message"></p>
            </article>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
    transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__icon{
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 24px;
    background-color: #fff;
    margin-right: 16px;
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__icon svg path{
    fill: #28B95E;
}

.toast[data-color="success"] .toast__title {
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__icon svg path {
    fill: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__icon svg path {
    fill: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>

Toast com botão de fechar

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <article class="toast__wrapper">
                <h2 class="toast__title"></h2>
                <p class="toast__message"></p>
            </article>
            <span class="toast__close" onclick="closeToast(this.parentElement)">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.99982 7.05772L11.2998 3.75772L12.2425 4.70039L8.94249 8.00039L12.2425 11.3004L11.2998 12.2431L7.99982 8.94305L4.69982 12.2431L3.75716 11.3004L7.05716 8.00039L3.75716 4.70039L4.69982 3.75772L7.99982 7.05772Z" fill="#A7A7A7"/>
                </svg>
            </span>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
   transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.toast__close{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__title {
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

.toast[data-color="success"] .toast__close svg path {
    fill: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

.toast[data-color="warning"] .toast__close svg path {
    fill: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

.toast[data-color="error"] .toast__close svg path {
    fill: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>

Toast com ícone e botão de fechar

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <div class="toast__content-wrapper">
                <span class="toast__icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="#2C2C2C"/>
                        <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="black" fill-opacity="0.2"/>
                    </svg>
                </span>
                <article class="toast__wrapper">
                    <h2 class="toast__title"></h2>
                    <p class="toast__message"></p>
                </article>
            </div>
            <span class="toast__close" onclick="closeToast(this.parentElement)">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.99982 7.05772L11.2998 3.75772L12.2425 4.70039L8.94249 8.00039L12.2425 11.3004L11.2998 12.2431L7.99982 8.94305L4.69982 12.2431L3.75716 11.3004L7.05716 8.00039L3.75716 4.70039L4.69982 3.75772L7.99982 7.05772Z" fill="#A7A7A7"/>
                </svg>
            </span>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding-left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
    transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__content-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.toast__icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 24px;
    background-color: #fff;
    margin-right: 16px;
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.toast__close{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__icon svg path {
    fill: #28B95E;
}

.toast[data-color="success"] .toast__title {
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

.toast[data-color="success"] .toast__close svg path {
    fill: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__icon svg path {
    fill: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

.toast[data-color="warning"] .toast__close svg path {
    fill: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__icon svg path {
    fill: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

.toast[data-color="error"] .toast__close svg path {
    fill: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>

Toast com botão de ação e botão de fechar

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <article class="toast__wrapper">
                <h2 class="toast__title"></h2>
                <p class="toast__message"></p>
            </article>
            <div class="toast__content-wrapper">
                <a class="toast__button" href="">Nova</a>
                <span class="toast__close" onclick="closeToast(this.parentElement.parentElement)">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.99982 7.05772L11.2998 3.75772L12.2425 4.70039L8.94249 8.00039L12.2425 11.3004L11.2998 12.2431L7.99982 8.94305L4.69982 12.2431L3.75716 11.3004L7.05716 8.00039L3.75716 4.70039L4.69982 3.75772L7.99982 7.05772Z" fill="#A7A7A7"/>
                    </svg>
                </span>
            </div>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
    transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.toast__content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.toast__button{
    width: fit-content;
    height: 32px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #000000;
}

.toast__button:hover{
    color: inherit;
}

.toast__close{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__title {
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

.toast[data-color="success"] .toast__button {
    color: #fff;
    border-color: #D4F1DF;
}

.toast[data-color="success"] .toast__close svg path {
    fill: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

.toast[data-color="warning"] .toast__button {
    color: #fff;
    border-color: #FFE2B7;
}

.toast[data-color="warning"] .toast__close svg path {
    fill: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

.toast[data-color="error"] .toast__button {
    color: #fff;
    border-color: #FFBBBB;
}

.toast[data-color="error"] .toast__close svg path {
    fill: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>

Toast com ícone, botão de ação e botão fechar

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <div class="toast__content-wrapper">
                <span class="toast__icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="#2C2C2C"/>
                        <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="black" fill-opacity="0.2"/>
                    </svg>
                </span>
                <article class="toast__wrapper">
                    <h2 class="toast__title"></h2>
                    <p class="toast__message"></p>
                </article>
            </div>
            <div class="toast__content-wrapper">
                <a class="toast__button" href="">Nova</a>
                <span class="toast__close" onclick="closeToast(this.parentElement.parentElement)">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.99982 7.05772L11.2998 3.75772L12.2425 4.70039L8.94249 8.00039L12.2425 11.3004L11.2998 12.2431L7.99982 8.94305L4.69982 12.2431L3.75716 11.3004L7.05716 8.00039L3.75716 4.70039L4.69982 3.75772L7.99982 7.05772Z" fill="#A7A7A7"/>
                    </svg>
                </span>
            </div>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
   transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 24px;
    background-color: #fff;
    margin-right: 16px;
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.toast__content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.toast__button{
    width: fit-content;
    height: 32px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #000000;
}

.toast__button:hover{
    color: inherit;
}

.toast__close{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__icon svg path {
    fill: #28B95E;
}

.toast[data-color="success"] .toast__title {
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

.toast[data-color="success"] .toast__button {
    color: #fff;
    border-color: #D4F1DF;
}

.toast[data-color="success"] .toast__close svg path {
    fill: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__icon svg path {
    fill: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

.toast[data-color="warning"] .toast__button {
    color: #fff;
    border-color: #FFE2B7;
}

.toast[data-color="warning"] .toast__close svg path {
    fill: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__icon svg path {
    fill: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

.toast[data-color="error"] .toast__button {
    color: #fff;
    border-color: #FFBBBB;
}

.toast[data-color="error"] .toast__close svg path {
    fill: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>

Toast com botão de ação

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <article class="toast__wrapper">
                <h2 class="toast__title"></h2>
                <p class="toast__message"></p>
            </article>
            <a class="toast__button" href="">Nova</a>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 0px;
    padding-left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
    transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.toast__button{
    width: fit-content;
    height: 32px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #000000;
}

.toast__button:hover{
    color: inherit;
}

/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__title {
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

.toast[data-color="success"] .toast__button {
    color: #fff;
    border-color: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

.toast[data-color="warning"] .toast__button {
    color: #fff;
    border-color: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

.toast[data-color="error"] .toast__button {
    color: #fff;
    border-color: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>

Toast com ícone e botão de ação

Preview

HTML

<div id="toast-container">
    <template id="toast-template">
        <div class="toast">
            <div class="toast__content-wrapper">
                <span class="toast__icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="#2C2C2C"/>
                        <path d="M1.33333 5.99625C1.33298 5.47105 1.43623 4.95094 1.63717 4.46571C1.83812 3.98047 2.1328 3.53964 2.50436 3.16845C2.87592 2.79727 3.31705 2.50302 3.80248 2.30256C4.28792 2.1021 4.80813 1.99937 5.33333 2.00025H10.6667C12.8753 2.00025 14.6667 3.79692 14.6667 5.99625V14.0002H5.33333C3.12466 14.0002 1.33333 12.2036 1.33333 10.0042V5.99625ZM13.3333 12.6669V5.99625C13.3316 5.28992 13.0499 4.61308 12.5501 4.114C12.0503 3.61492 11.373 3.33429 10.6667 3.33358H5.33333C4.98323 3.33271 4.6364 3.40095 4.31273 3.5344C3.98906 3.66785 3.69491 3.86389 3.44717 4.11126C3.19942 4.35863 3.00295 4.65248 2.86901 4.97595C2.73507 5.29942 2.66631 5.64615 2.66666 5.99625V10.0042C2.66843 10.7106 2.95007 11.3874 3.4499 11.8865C3.94973 12.3856 4.62699 12.6662 5.33333 12.6669H13.3333ZM9.33333 7.33358H10.6667V8.66692H9.33333V7.33358ZM5.33333 7.33358H6.66666V8.66692H5.33333V7.33358Z" fill="black" fill-opacity="0.2"/>
                    </svg>
                </span>
                <article class="toast__wrapper">
                    <h2 class="toast__title"></h2>
                    <p class="toast__message"></p>
                </article>
            </div>
            <a class="toast__button" href="">Nova</a>
        </div>
    </template>
</div>

CSS

#toast-container {
    min-height: 0;
    max-height: 999px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    z-index: 9999;
    background-color: transparent;
    overflow: hidden;
}

.toast {
    transform: translateX(-200%);
    transform-origin: left;
    margin-top: 20px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    border-radius: 4px;
    background-color: #FFF;
    transition: transform .5s ease, margin 0.7s ease, height 0.7s ease, padding 0.7s ease;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 68px;
    width: auto;
    max-width: 417px;
    padding: 12px 20px;
}

.toast[data-enabled] {
    transform: translateX(0);
}

.toast.remove {
    animation: outToastEffect 0.7s forwards;
}

@keyframes outToastEffect {
    0% {
        opacity: 1;
        margin-bottom: 20px;
        height: auto;
        min-height: 68px;
        padding: 12px 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: 0;
        margin-top: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }
}

.toast__icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 24px;
    background-color: #fff;
    margin-right: 16px;
}

.toast__wrapper .toast__title {
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

.toast__wrapper .toast__message {
    color: #A7A7A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.toast__content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.toast__button{
    width: fit-content;
    height: 32px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #000000;
}

.toast__button:hover{
    color: inherit;
}

/* Toast Sucess */
.toast[data-color="success"] {
    background-color: #28B95E;
}

.toast[data-color="success"] .toast__icon svg path {
    fill: #28B95E;
}

.toast[data-color="success"] .toast__title {
    color: #fff;
}

.toast[data-color="success"] .toast__message {
    color: #D4F1DF;
}

.toast[data-color="success"] .toast__button {
    color: #fff;
    border-color: #D4F1DF;
}

/* Toast Warning */
.toast[data-color="warning"] {
    background-color: #FF9700;
}

.toast[data-color="warning"] .toast__icon svg path {
    fill: #FF9700;
}

.toast[data-color="warning"] .toast__title {
    color: #fff;
}

.toast[data-color="warning"] .toast__message {
    color: #FFE2B7;
}

.toast[data-color="warning"] .toast__button {
    color: #fff;
    border-color: #FFE2B7;
}

/* Toast Error */
.toast[data-color="error"] {
    background-color: #D60000;
}

.toast[data-color="error"] .toast__icon svg path {
    fill: #D60000;
}

.toast[data-color="error"] .toast__title {
    color: #fff;
}

.toast[data-color="error"] .toast__message {
    color: #FFBBBB;
}

.toast[data-color="error"] .toast__button {
    color: #fff;
    border-color: #FFBBBB;
}

Javascript

<script>
    function toast(primaryMessage, secondaryMessage, color) {
        const TOAST_TIME = 5000;
        const toastTemplate = document.getElementById('toast-template');
        const newToast = toastTemplate.content.cloneNode(true);

        const toastElement = newToast.querySelector('.toast');
        const toastTitle = newToast.querySelector('.toast__title');
        const toastMessage = newToast.querySelector('.toast__message');

        toastTitle.innerHTML = primaryMessage;
        toastMessage.innerHTML = secondaryMessage;
        toastElement.setAttribute('data-color', color);
        toastElement.setAttribute('data-enabled', true);

        const toastContainer = document.getElementById('toast-container');
        toastContainer.appendChild(newToast);

        setTimeout(() => {
            closeToast(toastElement);
        }, TOAST_TIME);
    }

    function closeToast(toastElement) {
        toastElement.removeAttribute('data-enabled');
        toastElement.classList.add('remove');

        setTimeout(() => {
            toastElement.remove();
        }, 700);
    }
</script>