Capítulo 45 de 108

Alert Dialog

Core Idea

Modal que interrompe o usuário com conteúdo importante e exige uma resposta explícita (não fecha ao clicar fora). Use para confirmações críticas/destrutivas, não como Dialog genérico. Built on Base UI Alert Dialog.

Key Concepts

  • AlertDialogAction / AlertDialogCancel: botões semânticos de confirmação/cancelamento; AlertDialogCancel também fecha o dialog.
  • AlertDialogMedia: slot para ícone/imagem no header, antes do título (ex. <Trash2Icon />).
  • size: prop em AlertDialogContent, "default" | "sm" (padrão "default").
  • variant: AlertDialogAction/AlertDialogCancel aceitam variant="destructive"/"outline" (reaproveita variantes de Button).

Code Examples

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive">Delete Chat</Button>} />
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
        <Trash2Icon />
      </AlertDialogMedia>
      <AlertDialogTitle>Delete chat?</AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete this chat conversation.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel variant="outline">Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
  • O que demonstra: padrão de confirmação destrutiva com size="sm", AlertDialogMedia colorido com tokens destructive e variant="destructive" na ação final.

Reference Tables

Composição:

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction
PropTypeDefault
size (em AlertDialogContent)"default" | "sm""default"

Anti-patterns

  • Usar Alert Dialog para qualquer modal: reservar para casos que exigem resposta obrigatória (ação irreversível); para formulários/edição comuns usar Dialog, que permite fechar clicando fora.

Key Takeaways

  1. Diferente de Dialog, AlertDialog não fecha ao clicar fora, forçando uma escolha explícita (Cancel/Action).
  2. AlertDialogMedia é o slot dedicado para ícone no header, distinto do padrão do Dialog comum.
  3. size="sm" produz um dialog compacto, útil para confirmações curtas (ex. permissão de dispositivo USB/Bluetooth).
  4. Para ações destrutivas, aplicar variant="destructive" tanto no trigger quanto no AlertDialogAction.
  5. Instalação manual requer npm install @base-ui/react.

Connects To

  • Dialog: use quando o usuário pode dispensar o modal livremente; Alert Dialog é só para decisões obrigatórias.
  • Button: variantes (destructive, outline) são reaproveitadas em AlertDialogAction/AlertDialogCancel/AlertDialogTrigger.
AnteriorDialogPróximoSheet