AlertDialog

Confirmação que exige uma decisão explícita antes de seguir.

O AlertDialog interrompe a tela para confirmar uma ação que cria versão, descarta trabalho ou não tem volta, como publicar a Marca ou revogar um token. Diferente do Modal, ele não fecha ao clicar fora nem com Esc por padrão: a pessoa precisa escolher.

import { AlertDialog } from "@rastreio-x/ui";

Padrão

O ícone usa status="danger" por padrão. O corpo resume o que muda; os botões usam verbos claros.

Estados

AlertDialog.Icon aceita accent, success, warning e danger. Use o estado que corresponde à gravidade, e variant="danger" no botão só quando o estado é perigo.

Controlado

Com isOpen e onOpenChange no AlertDialog.Backdrop, feche o diálogo ao concluir e avise o resultado com toast.

Anatomia

AlertDialog
├── AlertDialog.Backdrop
├── AlertDialog.Body
├── AlertDialog.CloseTrigger
├── AlertDialog.Container
├── AlertDialog.Dialog
├── AlertDialog.Footer
├── AlertDialog.Header
├── AlertDialog.Heading
├── AlertDialog.Icon
└── AlertDialog.Trigger

AlertDialog.Backdrop e AlertDialog.Container: o fundo e a posição.
AlertDialog.Dialog: a superfície, com role="alertdialog".
AlertDialog.Header, AlertDialog.Icon e AlertDialog.Heading: ícone de estado e título.
AlertDialog.Body e AlertDialog.Footer: o resumo e as ações.

Propriedades

Fundo (AlertDialog.Backdrop):

AlertDialog.Backdrop
Prop	Tipo	Padrão	Descrição
`children`	`ChildrenOrFunction<ModalRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<ModalRenderProps>`	`'react-aria-ModalOverlay'`	Classes CSS aplicadas ao elemento.
`defaultOpen`	`boolean`	-	Abre o elemento na primeira renderização (não controlado).
`isDismissable`	`boolean`	`false`	Permite fechar clicando fora ou arrastando.
`isEntering`	`boolean`	-	Indica que a animação de entrada está em andamento.
`isExiting`	`boolean`	-	Indica que a animação de saída está em andamento.
`isKeyboardDismissDisabled`	`boolean`	`true`	Impede que a tecla Esc feche a camada.
`isOpen`	`boolean`	-	Controla se o elemento está aberto (controlado).
`onOpenChange`	`((isOpen: boolean) => void)`	-	Chamada quando o elemento abre ou fecha.
`render`	`DOMRenderFunction<'div', ModalRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`shouldCloseOnInteractOutside`	`((element: Element) => boolean)`	-	Decide se uma interação fora da camada a fecha.
`style`	`StyleOrFunction<ModalRenderProps>`	-	Estilos em linha aplicados ao elemento.
`UNSTABLE_portalContainer`	`Element`	`document.body`	Elemento que recebe o portal da camada. Interface instável.
`variant`	`'blur' \| 'opaque' \| 'transparent'`	-	Fundo atrás da camada: `blur` (desfocado), `opaque` ou `transparent`.

Ícone (AlertDialog.Icon):

AlertDialog.Icon
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`status`	`AlertDialogStatus`	`"danger"`	Tom do ícone, que define a cor de fundo e do glifo: `default`, `accent`, `success`, `warning` ou `danger`.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.

Animações

CSS
indicativo

Mesma entrada do Modal: fade do fundo e opacity com transform no diálogo, em transição curta. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms.

Acessibilidade

Padrão WAI-ARIA alertdialog: o leitor de tela anuncia título e descrição ao abrir.
O foco fica preso no diálogo e volta ao gatilho ao fechar.
Por padrão exige ação explícita: fundo e Esc não fecham (isDismissable e isKeyboardDismissDisabled ajustam).
O estado do ícone vem acompanhado de texto no título, nunca só de cor.

Boas práticas

Faça

Título em pergunta, resumo do que muda e botões com verbo: Manter Rascunho e Excluir Rascunho.

Evite

Confirmar ações reversíveis, ou rótulos como Sim e Não.

Use só para ações que criam versão ou descartam trabalho (publicar, excluir, revogar).
O botão de cancelar diz o que preserva: "Manter Rascunho".
Texto curto: o que acontece e o que não muda.
Para ações reversíveis, prefira desfazer por toast.

Relacionados

Modal para tarefas que a pessoa pode fechar à vontade.
Button com danger para a confirmação.
Toast para avisar o resultado depois de confirmar.