notification · Casa Hacker DS

overview

01

✓

tudo certo

post publicado com sucesso.

⚠

deu ruim

não foi possível enviar. tenta de novo em alguns segundos.

⚠

atenção

essa ação tem consequências.

i

fyi

nova versão disponível.

variantes

02

Inline (default) e Toast (programático via window.CHDS.toast()).

estados

03

✓

com ação

tem botão de fechar.

i

sem ação

não pode ser dispensada.

comportamentos

04

Click no × dispara animação de saída (200ms) e remove do DOM
Toast desaparece sozinho após 4.5s (configurável)
Toast novo empilha em cima dos anteriores (.toast-stack)
Toast stack tem aria-live='polite' pra anunciar

modifiers · api

05

prop	tipo	default	descrição
.notification--success	class	—	verde
.notification--error	class	—	vermelho
.notification--warning	class	—	amarelo
.notification--info	class	—	neutro
.notification-close	class	—	botão dispensar
CHDS.toast()	function	—	toast programático {title, message, kind, timeout}

quando usar

06

use

Feedback de ação do usuário
Erro recuperável
Confirmação de operação assíncrona

não use

Conteúdo persistente — usa tile/banner
Erro crítico bloqueante — usa modal
Empilhar 5+ notifications — vira ruído

acessibilidade

07 · wcag aa

role="alert" pra erros críticos (interrompe SR)
role="status" pra info/success (não-interruptivo)
aria-live="polite" pra updates dinâmicos
Botão close com aria-label
Tempo suficiente pra ler (mínimo 5s pra texto curto)

código

08 · html

<!-- inline -->
<div class="notification notification--success">
  <div class="notification-icon">✓</div>
  <div class="notification-body">
    <strong>tudo certo</strong>
    <p>post publicado.</p>
  </div>
  <button class="notification-close">×</button>
</div>

// programático
CHDS.toast({
  title: "enviado",
  message: "obrigado!",
  kind: "success"
});