Alert

Quando usar

Use o alert para uma mensagem que precisa aparecer no proprio fluxo da pagina, ao lado do conteudo que ela explica: um aviso de manutencao, uma confirmacao de que uma acao deu certo, um limite proximo de ser atingido. Ele fica no lugar, nao flutua por cima da tela.

Quando nao usar

Nao use alert para notificacao transitoria (a que aparece e some sozinha): isso e um padrao de toast, nao este componente, que fica ancorado no layout enquanto a condicao existir. Nao use a variante destructive para alta e baixa de preco: essa cor e reservada para erro de UI (falha de conexao, acao que nao pode ser desfeita). Para preco use os tokens de trading em outro componente, nunca o Alert.

Anatomia

• Alert (data-slot="alert"): a raiz, com role="alert".
• AlertTitle (data-slot="alert-title"): o titulo curto da mensagem.
• AlertDescription (data-slot="alert-description"): o corpo da mensagem, opcional quando o titulo ja e autoexplicativo.

Variantes

• default: aviso neutro, sem carga semantica.
• info: informacao relevante, sem exigir acao imediata.
• success: confirmacao de que algo deu certo.
• warning: atencao, algo pede cuidado mas ainda nao e um erro.
• destructive: erro ou falha que impede o fluxo de continuar.

Acessibilidade

O Alert carrega role="alert" sempre, o que faz leitores de tela anunciarem o conteudo assim que ele entra no DOM, mesmo sem foco. Por isso, so monte o Alert no momento em que a mensagem realmente precisa ser lida: montar um alert escondido por display:none e so mostrar depois via CSS nao dispara o anuncio, porque o leitor de tela reage a insercao no DOM, nao a mudanca de visibilidade. Cor nunca e a unica pista: o texto do titulo e da descricao precisa comunicar o significado sozinho, sem depender da variante visual.