AlertDialog
Diálogo de alerta que interrompe para confirmar uma decisão difícil de desfazer, como excluir um projeto ou mandar um e-mail para milhares de pessoas. O foco começa na escolha segura, e um clique fora não fecha.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, DialogActions } from "@camaleo/react";Anatomia
As mesmas partes do Dialog, então cada estilo cuida dos dois do mesmo jeito. O popup ganha data-kind="alert" e role="alertdialog".
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Abra: o dialog usa o estilo, o modo e a cor escolhidos na barra acima.
Chaves de API (3)
- Servidor de produção
Criada em 14/03/2026 - Servidor de homologação
Criada em 02/06/2026 - Integração Zapier
Criada em 21/09/2026
Excluir uma linha sem perder o foco
Clique em Excluir. A linha e o botão somem, então o finalFocus leva o foco para o título da lista e uma mensagem de status confirma.
Digitar o nome para confirmar
Para os piores erros, como excluir um repositório, peça para digitar o nome. O botão fica desativado até o nome bater.
Espera a requisição
Clique em Sair dos aparelhos. Enquanto a requisição roda, o Esc e o Cancelar não fazem nada, para a pessoa ver se deu certo antes de o dialog fechar.
Foco no Cancelar
O foco vai para o primeiro elemento focável. Quando ele é uma caixa de seleção, aponte o initialFocus para o Cancelar, assim um Enter apressado não confirma.
Aberto de um menu
Deixe o dialog fora do menu e controle com open: o menu fecha, o dialog fica, e o finalFocus volta para o botão do menu.
Não é só para excluir
Tudo o que não tem volta merece uma confirmação, como enviar uma newsletter. Use um botão solid quando não for destrutivo.
Em contexto
Confirmações protegem as ações que doem quando dão errado. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Zona de perigo
Estas ações afetam todo mundo no projeto.
Oculta o projeto e deixa só para leitura. Dá para restaurar depois.
Exclui o projeto com todas as páginas. Isso não pode ser desfeito.
Notas da versão
Cobrança
Plano EquipeAtivo
R$ 99 por pessoa / mês · 8 vagas · renova em 12/11/2026
Boas práticas
"Excluir 3 arquivos" diz o que acontece. A pessoa responde sem reler a pergunta.
Nenhum dos dois diz o que vai acontecer, então a pessoa clica sem ler.
Excluir um workspace que 12 pessoas usam vale a pausa.
"Salvo" não pede resposta. Interromper por isso ensina a dispensar alertas sem ler. Use um toast.
Props
eventDetails.reason diz o motivo, por exemplo escape-key. Ignore a chamada para manter o dialog aberto enquanto uma requisição roda.onOpenChange para controlar o estado.Ele é sempre modal e nunca fecha com clique fora. As outras partes recebem as props do seu elemento, mais render.
O AlertDialogContent decide para onde vai o foco:
Styling hooks
Ele usa os mesmos slots do dialog. Use data-kind="alert" para mudar só as confirmações.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* mais estreito e centralizado, só nas confirmações */
[data-slot="dialog-popup"][data-kind="alert"] {
text-align: center;
inline-size: min(24rem, calc(100vw - 2rem));
}Acessibilidade
- O popup tem role="alertdialog", com o nome do AlertDialogTitle e a descrição do AlertDialogDescription, então o leitor de tela lê a pergunta e a consequência juntas.
- Um clique fora não faz nada: o dialog pede uma resposta. O Esc ainda fecha, como um Cancelar.
- Ponha o Cancelar primeiro. O foco começa nele, então um Enter por hábito nunca exclui nada.
- Depois da ação, o gatilho pode ter sumido: defina o finalFocus e anuncie o resultado com role="status".