Toast

Notificação temporária compacta posicionada no bottom-center da tela. Background invertido (escuro no light, mais claro no dark). Auto-dismiss em 4 segundos com animação de entrada e saída.

components/toast.cssAbrir no Figma

Exemplos

Clique nos botões para ver o toast aparecer e desaparecer após 4 segundos.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar o toast.

Propriedade	Tipo	Default	Descrição
.toast-container	classe	—	Container fixo bottom-center na tela.
.toast	classe	—	Notificação pill (padding 8px 12px, radius 6px).
.toast-icon	classe	—	Ícone opcional (18x18).
.toast-text	classe	—	Texto da mensagem (p3 medium).
.is-leaving	classe	—	Anima a saída do toast (fade out + slide down).

Código

Snippets prontos para copiar e usar.

Toast simples

<!-- Container fixo (uma vez na página) -->
<div class="toast-container" id="toast-container"></div>

<!-- Criar toast via JS -->
<script>
function showToast(message) {
    var container = document.getElementById('toast-container');
    var toast = document.createElement('div');
    toast.className = 'toast';
    toast.innerHTML = '<span class="toast-text">' + message + '</span>';
    container.appendChild(toast);

    setTimeout(function() {
        toast.classList.add('is-leaving');
        setTimeout(function() { toast.remove(); }, 300);
    }, 4000);
}
</script>

Toast com ícone

<div class="toast">
    <span class="toast-icon">
        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor"
             stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="24" cy="24" r="20"/>
        </svg>
    </span>
    <span class="toast-text">Arquivo salvo!</span>
</div>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
--surface-base-neutral-container-default-on-black	Background (light mode)
--surface-base-neutral-container-hover	Background (dark mode)
--text-base-neutral-white	Cor do texto e ícone
--radius-default	Border-radius (6px)
--spacing-2	Padding top/bottom, gap ícone-texto (8px)
--spacing-3	Padding left/right (12px)

Versão3.0.0

Última atualização2026-03-19

Caminhocomponentes/toast.md