Pular para o conteúdo
Faculdade PhorteDesign System

Alert

Em andamento

Mensagem de aviso, informação, sucesso, atenção ou erro, com ícone, título opcional e o tipo dito em texto para quem ouve. Erro e atenção interrompem o leitor de tela; informação e sucesso esperam a pausa. Pode ter uma ação e um botão de fechar.

Função
Estado e aviso
Também chamado de
aviso, alerta, mensagem, notificação, banner de aviso
Mora em
app/components/molecules/Alert.tsx
Última mudança
2026-09-30
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 Interativo, 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. Interativo
  2. Variantes
  3. Sem título
  4. Dispensável
  5. Com ação
  6. Dentro de formulário

Quando usar

Para uma mensagem que diz respeito à página ou a uma seção inteira — o pagamento foi confirmado, a inscrição falhou, o prazo está perto.

Faça

  • Escolha a variante pela gravidade: destructive para erro, warning para atenção, success para concluído.
  • Escreva o que aconteceu e o que fazer: "Não conseguimos processar o pagamento. Tente outro cartão."
  • Passe um role próprio quando um sucesso precisar ser ouvido na hora.
  • Seja breve: até três linhas. O que passar disso é página, não aviso.
  • Dê uma acao quando houver o que fazer: "Gerar boleto", "Tentar de novo" (E62).
  • Use titleAs="h2" (ou o nível certo) quando o alerta abre uma seção; o padrão é p, fora da navegação por títulos.

Evite

  • Alert de sucesso ou de informação inserido depois de uma ação: a região status criada junto com o texto pode não ser anunciada. Para o retorno de uma ação, o Aviso — a região dele já existe (E144).
  • destructive e warning para mensagem que não é urgente: interrompem quem está ouvindo.
  • Alerta dispensável com informação que a pessoa ainda vai precisar.
  • Vários alertas empilhados — um por vez, o mais grave primeiro.
  • Duas ações num aviso: aí é decisão, e decisão é Modal.

Quando não usar. Para o erro de um campo, use o FormField, que liga a mensagem ao campo. Para pedir uma decisão antes de seguir, o Modal. Para uma confirmação que some sozinha ("Salvo"), o aviso passageiro, não o Alert. Para uma mensagem do site inteiro, uma faixa no topo. Para um rótulo de uma palavra, o Badge.

Nota de uso

Quando usar (E62): para o que diz respeito à página ou ao formulário — e só um por vez, em até três linhas. Não para confirmação que some sozinha, nem para mensagem do site inteiro. O título é p por padrão (titleAs o faz cabeçalho), e a acao põe o que fazer a respeito num botão. Só erro e atenção usam role="alert", que interrompe o leitor; informação e sucesso usam role="status", que espera a pausa. Um role passado por prop vence — para um sucesso que aparece logo depois de uma ação, por exemplo. O tipo vem em texto para quem ouve ("Erro:", "Atenção:"…): a cor e o ícone não chegam lá.

Anatomia

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

  1. Ícone — Por variante (informação, visto, alerta, X), decorativo.
  2. Tipo em texto — "Erro:", "Atenção:", "Sucesso:"… — só para o leitor de tela.
  3. Título — Opcional, em negrito. `p` por padrão; `titleAs` escolhe o cabeçalho (E62).
  4. Descrição — `text-sm`, obrigatória; aceita link e ênfase.
  5. Ação — Com `acao`: Button `outline` pequeno embaixo do texto — ou link, com `href` (E62).
  6. Fechar — Com `dismissible`: botão "Fechar alerta" de 44×44 no canto.

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
Avisodefault: fundo --muted, role="status".
Informaçãoinfo: fundo --info-subtle, texto --info-strong, role="status".
Sucessosuccess: fundo --success-subtle, texto --success-strong, role="status".
Atençãowarning: fundo --warning-subtle, texto --warning-strong, role="alert".
Errodestructive: fundo --destructive-subtle, texto --destructive-strong, role="alert".
FechadoDepois do botão de fechar, o componente deixa de ser renderizado.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Aparece com `role="alert"`O leitor de tela interrompe o que lia e anuncia.
Aparece com `role="status"`O leitor anuncia na próxima pausa.
FecharSome, chama onDismiss e leva o foco a retornarFocoPara — ou, sem ela, ao próximo elemento focável depois do alerta (o anterior, se não houver) — medido no teste da ficha.

Relacionados