Pular para o conteúdo
Faculdade PhorteDesign System

Aviso

Em andamento

Confirmação passageira de uma ação — "Inscrição salva", "Link copiado" —, no canto de baixo da tela, anunciada por região viva sem roubar o foco. Some sozinha em 6s, e o tempo para no hover e no foco; o erro não some sozinho.

Função
Estado e aviso
Também chamado de
toast, notificação, aviso passageiro, snackbar, mensagem flutuante
Mora em
app/components/molecules/Aviso.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Tipos
  3. Com ação
  4. Na página

Quando usar

Logo depois de uma ação da pessoa, para confirmar que deu certo (ou avisar que falhou) sem tirá-la de onde está.

Faça

  • Monte o AvisosProvider uma vez, no alto da página, e dispare com useAvisos().avisar({ … }).
  • Escreva o que aconteceu, curto: "Inscrição salva." — e, se couber, uma acao que desfaz ("Desfazer").
  • Use tipo="erro" para falha: vai para a região alert e fica até a pessoa fechar.

Evite

  • Informação que a pessoa ainda vai precisar: ela some.
  • Mais de um aviso por ação. A pilha guarda no máximo três, e o mais antigo sai.
  • Ação essencial só no aviso: quem não viu a tempo perde o caminho.

Quando não usar. Para uma mensagem que diz respeito à página ou ao formulário e precisa ficar, use o Alert. Para pedir uma decisão, o Modal. Para o erro de um campo, o FormField.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Ícone — Por tipo (informação, visto, alerta, X), 20px, decorativo.
  2. Tipo em texto — "Sucesso:", "Erro:"… só para o leitor, como no Alert.
  3. Título e mensagem — Título opcional em negrito e a mensagem em `text-sm`.
  4. Ação — Opcional: botão sublinhado de 44px de altura.
  5. Fechar — "Fechar aviso", 44×44.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Informação, sucesso, atenção, erroOs pares tênue/forte do Alert (--*-subtle com --*-strong), 5,5:1 no mínimo.
SeguradoCom o ponteiro ou o foco em cima, o tempo para (data-segurado) — conferido no teste da ficha.
EntrandoEsmaece e sobe 8px em 300ms, só com movimento liberado.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Com açãoNão some sozinho, mesmo com duracao (E144): ação com cronômetro é limite de tempo (SC 2.2.1). Fica até alguém fechar — testado na ficha.
EscCom o foco num botão do aviso, dispensa o aviso (E144, guia de toasts do A11Y.md) — testado na ficha.
TempoPelo tamanho do texto: 6 s no mínimo, cerca de 60 ms por caractere (E144; era 6 s para qualquer tamanho) — testado na ficha.
`avisar` com informação, sucesso ou atençãoEntra na região status, já montada, e é anunciado na próxima pausa — conferido no teste da ficha; o foco não se move.
`avisar` com erroEntra na região alert e não some sozinho.
Fim do tempoSome e chama onFechar; com o ponteiro em cima, espera — conferido no teste da ficha.
Quarto avisoO mais antigo sai: no máximo três.

Relacionados