Vox Mente
Navegação

Componentes

Alert

beta

Aviso que fica na página e pode ser relido. Se some sozinho, é Toast — e aí não pode carregar nada que o usuário precise reter.

Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/alert

Orientação

Aviso que fica na página e pode ser relido. Ocupa espaço de propósito: o que precisa ser retido não pode depender de o usuário ter olhado na hora certa.

Quando usar

  • A informação precisa continuar disponível enquanto o usuário decide o que fazer.
  • O aviso tem consequência: um dado faltando, um limite atingido, uma pendência que trava o fluxo.
  • O usuário pode precisar reler o texto depois de sair e voltar para a tela.

Quando não usar

  • Para confirmar que algo deu certo e acabou. Isso é Toast, e some sozinho.
  • Para erro de um campo específico — o erro pertence ao campo, dentro do Field.
  • Para bloqueio por permissão, que é estado de tela inteira e tem componente próprio: No Permission.
Playground
<Alert>
  <InfoIcon />
  <AlertTitle>Sessão vencida</AlertTitle>
  <AlertDescription>A sessão da turma 7º ano B venceu há 2 dias.</AlertDescription>
</Alert>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Alert
  └─ AlertTitle
  └─ AlertDescription
  └─ AlertAction

Uso

Alert fica na página e persiste. O usuário pode reler quantas vezes precisar — é o lugar certo para algo que exige atenção sustentada, não um aviso de passagem.

Variantes

`destructive`, `warning` e `success` seguem a mesma leitura de sempre. `sensitive` é diferente das outras quatro: não é erro nem aviso, é acesso legítimo a dado protegido que precisa declarar motivo e classificação.

Sem ícone

O ícone é opcional. Sem ele, título e descrição ocupam a largura toda — use quando o texto já entrega a gravidade sozinho.

Com ação

`AlertAction` fixa um controle no canto superior direito. Use para a ação que resolve o problema descrito — não para descartar o alerta.

Só título

`AlertDescription` também é opcional. Use quando o título sozinho já é a mensagem completa — evite forçar uma descrição só para preencher espaço.

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.
  • Aviso que aparece depois da montagem precisa ser anunciado. Sem role="alert" ou uma região viva, quem usa leitor de tela não fica sabendo que ele apareceu.
  • A variante comunica gravidade por cor; o texto precisa comunicar a mesma coisa sem a cor.
  • Se o alerta tem ação, ela é um botão de verdade dentro dele, não o alerta inteiro clicável.

Componentes relacionados

Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Alert

PropTipoPadrão
variant"default" | "destructive" | "warning" | "success" | "sensitive" | null—

Também aceita as props de React, incluindo className e os atributos de DOM.

AlertAction, AlertDescription, AlertTitle não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Orientação, acessibilidade e relacionados: documentação
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css