AlertModal
Confirmação pronta sobre o AlertDialog: emblema por tom, título, descrição e as ações confirmar e cancelar. Se onConfirm devolver uma Promise, o modal mostra o carregamento e só fecha quando ela termina.
Tons
O tom escolhe o ícone e a cor do emblema. Só danger pinta o confirmar de vermelho; os outros usam a cor de ação.
Confirmação assíncrona
Enquanto a Promise não termina, o confirmar mostra o indicador, Cancelar, o X e o Esc ficam bloqueados e o painel recebe aria-busy. Se a Promise rejeitar, o modal continua aberto.
Nenhuma ação confirmada ainda.
<AlertModal
open={open}
onOpenChange={setOpen}
tone="danger"
title="Cancelar o envelope?"
description="Os signatários são avisados por e-mail."
confirmLabel="Cancelar envelope"
cancelLabel="Manter envelope"
onConfirm={async () => {
await envelopes.cancel(id);
}}
/>Aviso só com confirmar
Com hideCancel e hideClose, a única saída é o botão de confirmar, que recebe o foco ao abrir.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| title | ReactNode | — | Pergunta ou resultado, ligado por aria-labelledby. |
| description | ReactNode | — | Consequência da ação, ligada por aria-describedby. |
| tone | "info" | "success" | "warning" | "caution" | "danger" | "info" | Ícone e cor do emblema; danger também pinta o confirmar. |
| icon | LucideIcon | null | — | Troca o ícone do tom; null esconde o emblema. |
| trigger | ReactNode | — | Elemento que abre o modal sem controle externo. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Controle de abertura. Funciona controlado ou não. |
| confirmLabel | ReactNode | "Confirmar" | Texto do botão de confirmar. |
| cancelLabel | ReactNode | "Cancelar" | Texto do botão de cancelar. |
| onConfirm | () => void | Promise<void> | — | Chamado ao confirmar. Fecha em seguida ou quando a Promise resolve. |
| onCancel | () => void | — | Chamado ao clicar em Cancelar, antes de fechar. |
| loading | boolean | false | Carregamento controlado por fora; bloqueia o fechamento. |
| confirmDisabled | boolean | false | Bloqueia o confirmar. |
| hideCancel | boolean | false | Esconde Cancelar; o foco inicial vai para o confirmar. |
| hideClose | boolean | false | Esconde o X do canto. |
| children | ReactNode | — | Conteúdo extra entre o texto e as ações. |