Notice
Um aviso dentro da página: o que a pessoa precisa saber agora, com o estado dito por cor, ícone e palavra.
Nesta página
Playground
O primeiro aviso sai amanhã às 9h.
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Lembrete salvo</strong><p>O primeiro aviso sai amanhã às 9h.</p></div>Quando usar
- Depois de uma ação, logo acima do container dela, para dizer o resultado: "Agendamento criado".
- Para algo que afeta a página toda: um serviço fora do ar, um prazo chegando.
Quando não usar
- Erro de campo: ErrorMessage e ErrorSummary.
- O estado de um item: Tag.
- Num canto da tela, como toast: nunca.
Exemplos
A documentação ganhou os guias de formulário.
O primeiro aviso sai amanhã às 9h.
Ele roda de novo hoje às 3h.
A conexão caiu. O que você escreveu continua aqui; tente de novo.
Os quatro
Todos com o traço em volta, na cor do estado; a informação usa o traço suave, sem cor de estado. Nenhum é laranja.
Mostrar código
<div class="feitio-notice" data-status="ok" role="status">
<svg class="feitio-icon" aria-hidden="true">…</svg>
<strong>Agendamento criado</strong>
<p>O primeiro aviso sai amanhã às 9h.</p>
</div>Fechar e tempo
A documentação ganhou os guias de formulário.
Com o fechar
O X no canto: o aviso fica até a pessoa fechar. Sem o X, ele fica até a tela mudar.
Mostrar código
<div class="feitio-notice">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">…</button>
</span>
</div>O primeiro aviso sai amanhã às 9h.
Com tempo
Com data-timeout, o aviso some sozinho, e o fio em volta do X se desfaz enquanto o tempo passa. Passe o mouse em cima: o tempo para.
Mostrar código
<div class="feitio-notice" data-status="ok" role="status" data-timeout="8000">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">
<svg class="ring" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="100" d="…"/></svg>…
</button>
</span>
</div>
<script>feitioNotice.show(aviso) // depois da ação</script>- O tempo vem desligado. Quando ligado, o fechar vem junto, para a pessoa poder fechar antes.
- Só para certo e informação. Atenção e erro nunca somem sozinhos: a pessoa precisa ver.
- O tempo para enquanto o mouse ou o foco estão no aviso. Um aviso que já vem na página só começa a contar quando aparece na janela.
- Já na tela, não cai de novo: se a mesma ação acontece outra vez, o aviso troca o texto e recomeça o tempo, sem a animação de papel. Ao sair, some e o espaço fecha, deslizando.
Anatomia
O primeiro aviso sai amanhã às 9h.
- Ícone do estado.
- Título: o que aconteceu, curto.
- Fechar, opcional. Com tempo, o fio em volta do X se desfaz até o aviso sumir.
- Texto, opcional: o que fazer ou o que vem depois.
- Caixa: o fundo e o traço na cor do estado.
Bons e maus padrões
Faça assim
A mesma palavra do botão, em duas palavras.
Não faça
Sua solicitação foi processada com sucesso.
"Sucesso" não diz o que deu certo, e o texto repete o título.
Como escrever
- Título: o que aconteceu, com a palavra da ação ("Agendamento criado").
- Texto: só se disser o que fazer ou o que vem depois.
Onde fica
- Logo acima do container onde a ação aconteceu, junto com o StatusOverlay.
- No topo do conteúdo, quando é sobre a página toda.
- Dentro de um bloco, quando é só sobre ele.
Acessibilidade
- Depois de uma ação,
role="status"(ourole="alert"no erro), para o leitor de tela anunciar. - O estado nunca só pela cor: ícone e palavra no título.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-notice" | obrigatório | A caixa do aviso. |
data-status | nenhum, "ok", "warn", "error" | Informação (sem o atributo), certo, atenção ou erro. |
role | "status", "alert" | Quando aparece depois de uma ação. |
class="tools" + class="close" | opcional | O botão de fechar, no alto à direita. |
data-timeout | milissegundos | Some sozinho depois desse tempo; só com certo e informação. Leva o fio em volta do X. |
feitioNotice.show(el) | JS | Mostra o aviso depois de uma ação: chega como papel, ou só recomeça o tempo se já está na tela. |