Alert
Alerta — uma mensagem que fica na página até a situação mudar. Use para o que a pessoa precisa saber ou resolver ali mesmo, onde está trabalhando.
Login em duas etapas vai ser obrigatório
A partir de 10/11, todo administrador do workspace precisa de um app autenticador para entrar.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { Alert, AlertTitle, AlertDescription } from "@camaleo/react";Anatomia
Uma caixa com um ícone escolhido pelo tom, um rótulo opcional e o conteúdo. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Manutenção no domingo
O login fica fora do ar de 2h00 às 2h15 (horário de Brasília) em 02/11. Seus dados não são afetados.
A versão 2.4 está pronta
Ela é instalada na próxima vez que você abrir o app.
Pagamento recebido
Enviamos o recibo de R$ 249,00 para financeiro@acme.com.br.
Armazenamento 85% cheio
Os envios param em 100 GB. Apague arquivos antigos ou mude de plano.
Conta bancária não conectada
Não conseguimos confirmar a conta •••• 6021, então os repasses estão parados.
Tons
Escolha o tom pelo que a pessoa precisa fazer: nada (informação), nada mais (sucesso), agir em breve (atenção) ou agir agora para continuar (perigo).
Esta fatura foi paga em 24/10.
Os preços mudam em 01/01/2027.
Só o título
Quando uma frase basta, deixe a descrição de fora. Um alerta curto é lido mais rápido e atrapalha menos.
Confirme seu e-mail de recuperação
Sem ele, se você perder o celular, não consegue mais entrar na conta.
Com ação
Se dá para resolver, coloque o botão dentro do alerta. Assim a pessoa não precisa procurar a tela de configuração certa.
Dentro de um formulário
Coloque o alerta logo acima do campo a que ele se refere. Assim a pessoa lê o risco antes de mudar o valor.
Agora dá para mencionar nos comentários
Digite @ e o nome de alguém do time para avisar a pessoa.
Com botão de fechar
Clique em fechar. Só feche avisos que a pessoa pode ignorar. O foco vai para o botão que aparece no lugar, então quem usa teclado não se perde.
Sua sessão termina em 60 segundos
Salve agora, senão as alterações se perdem.
Rascunho salvo
Salvo às 15h42. Guardamos as últimas 30 versões.
Urgente ou discreto
Os tons de atenção e perigo recebem role="alert" e interrompem o leitor de tela. Os de informação e sucesso recebem role="status" e esperam a vez.
Resumos de reunião ativados
O resumo de cada chamada chega no canal 5 minutos depois que ela acaba.
Ícone próprio
Troque o ícone quando o seu produto tiver um mais claro, como um brilho para recursos de IA. O tom continua definindo a cor e o papel.
Em contexto
Um alerta fica perto do que ele fala. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Cobrança
Plano Pro · R$ 249,00 por mês
Pagamento recusado
Seu Visa final 4242 foi recusado em 24/10. Atualize até 31/10 para seus projetos continuarem no ar.
Status da API
InstávelRespostas mais lentas na Europa
As requisições para eu-west-1 levam até 3 segundos enquanto trocamos um servidor com defeito.
Documentos offline
3 documentos não foram sincronizados
Você ficou sem internet enquanto salvava. Suas edições estão guardadas neste aparelho.
Boas práticas
Você está usando 8 de 10 vagas
Adicione vagas antes de convidar mais gente. Você pode continuar trabalhando normalmente.
Guarde o vermelho para o que realmente impede a pessoa de seguir. Assim ele não perde o sentido.
Você está usando 8 de 10 vagas
Adicione vagas antes de convidar mais gente.
Quando tudo é vermelho, as pessoas param de ler e deixam passar os erros de verdade.
Domínio não verificado
Adicione o registro TXT no seu DNS para emitirmos o certificado de acme.com.br.
Explique o problema e dê o próximo passo, de preferência num botão.
Erro no domínio
Algo deu errado com o seu domínio.
"Algo deu errado" deixa a pessoa travada e manda ela para o suporte.
Props
warning e danger interrompem o leitor de tela; info e success esperam.AlertTitle e AlertDescription renderizam um <p> e aceitam os atributos dele, como className e style.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio alerta.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Um alerta que aparece depois que a página carregou é lido em voz alta: na hora nos tons de atenção e perigo (role="alert"), e depois da fala atual nos de informação e sucesso (role="status").
- Um alerta que já está na página quando ela carrega não é anunciado. Coloque no topo do conteúdo a que ele se refere, para a pessoa encontrar enquanto lê.
- Quando a pessoa fechar um alerta, mande o foco para o que ficou no lugar, nunca para o topo da página.
- A cor nunca é o único sinal: cada tom tem seu ícone, e o título diz o que aconteceu.